doneit-web/src/app/pages/agenda/edit-event/edit-event.page.html

<ion-content>
  <!-- Edit event for Inicio -->
  <div class="main-content height-100">

    <div class="content d-flex flex-column width-md-100 height-100">
      
      <div class="main-header pt-30 px-20 background-white pb-15">
        <ion-header>
          <div class="title-content">
            <div class="middle">
              <ion-label class="title">Editar Evento</ion-label>
            </div>
          </div>
        </ion-header>
      </div>
      <ion-item-sliding class="overflow-y-auto">
  
        <div class="px-20">
          <div class="ion-item-container width-100" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
            <ion-input  placeholder="Assunto*" [(ngModel)]="postEvent.Subject"></ion-input>
          </div>

          
          <div *ngIf="Form && validateFrom" >
            <div *ngIf="Form.get('Subject').invalid " class="input-errror-message">
              <div *ngIf="Form.get('Subject').errors?.required">
                Campo obrigatório.
              </div>
              <div *ngIf="Form.get('Subject').errors?.minlength">
                O campo deve ter pelo menos 4 caracteres.
              </div>
            </div>
          </div>

          <div class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
              </div>
              <div class="ion-input-class" [class.input-error]="Form?.get('Location')?.invalid  && validateFrom ">
                <ion-input placeholder="Localização*" [(ngModel)]="postEvent.Location"></ion-input>
              </div>
            </div>
          </div>

          <div *ngIf="Form && validateFrom" >
            <div *ngIf="Form.get('Location').invalid " class="input-errror-message">
              <div *ngIf="Form.get('Location').errors?.required">
                Campo obrigatório.
              </div>
              <div *ngIf="Form.get('Location').errors?.minlength">
                O campo deve ter pelo menos 4 caracteres.
              </div>
            </div>
          </div>
        
          <div class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
              </div>
              <div class="ion-input-class">
                <ion-select  placeholder="Selecione agenda*"
                selectedText="{{postEvent.CalendarName}}" 
                [(ngModel)]="postEvent.CalendarName" 
                interface="action-sheet" Cancel-text="Cancelar" 
                required>
                  <ion-select-option value="Oficial">Oficial</ion-select-option>
                  <ion-select-option value="Pessoal">Pessoal</ion-select-option>
                </ion-select>
              </div>
            </div>
          </div>

          <div *ngIf="Form && validateFrom" >
            <div *ngIf="Form.get('CalendarName').invalid " class="input-errror-message">
              {{ postEvent.Categories[0] }}
              <div *ngIf="Form.get('CalendarName').errors?.required">
                Campo obrigatório.
              </div>
            </div>
          </div>
    
          <div class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
              </div>
              <div class="ion-input-class" [class.input-error]="Form?.get('Categories')?.invalid  && validateFrom ">
                <ion-select  placeholder="Selecione tipo de evento*" 
                [(ngModel)]="postEvent.Categories[0]"
                selectedText="{{postEvent.Categories[0]}}"
                interface="action-sheet" 
                Cancel-text="Cancelar" required>
                  <ion-select-option value="Reunião">Reunião</ion-select-option>
                  <ion-select-option value="Viagem">Viagem</ion-select-option>
                  <ion-select-option value="Conferência">Conferência</ion-select-option>
                  <ion-select-option value="Encontro">Encontro</ion-select-option>
                </ion-select>
              </div>
            </div>
          </div>

          <div *ngIf="Form && validateFrom" >
            <div *ngIf="Form.get('Categories').invalid " class="input-errror-message">
              {{ postEvent.Categories[0] }}
              <div *ngIf="Form.get('Categories').errors?.required">
                Campo obrigatório.
              </div>
            </div>
          </div>
        
          <div class="container-div width-100">
            <div class="ion-item-class-2 width-100">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
              </div>
              <div class="ion-input-class width-100" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">
                <ion-datetime 
                  placeholder="Início"
                  [(ngModel)]="postEvent.StartDate"
                  displayFormat="D MMM YYYY H:mm"
                  minuteValues="0,15,30,45"
                  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
                  min="{{minDate}}"  
                  max="2025" 
                >
                </ion-datetime>
                <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
              </div>
            </div>
          </div>

          <div class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
              </div>
              <div class="ion-input-class" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">
                <ion-datetime 
                  placeholder="Fim"
                  [(ngModel)]="postEvent.EndDate"
                  displayFormat="D MMM YYYY H:mm"
                  minuteValues="0,15,30,45"
                  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
                  min="{{minDate}}" 
                  max="2025" 
                >
                </ion-datetime>
                <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
              </div>
            </div>
          </div>

          <div class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
              </div>
              <div class="ion-input-class" [class.input-error]="Form?.get('Categories')?.invalid  && validateFrom ">
                <ion-select  placeholder="Selecione a repetição*"
                [(ngModel)]="selectedRecurringType"
                (ngModelChange)="onSelectedRecurringChanged($event)"
                interface="action-sheet" 
                Cancel-text="Cancelar" required>
                  <ion-select-option *ngFor="let recurring of recurringTypes" value="{{recurring.Code}}">{{recurring.Description}}</ion-select-option>
                </ion-select>
              </div>
            </div>
          </div>
          
          <div *ngIf="selectedRecurringType != '-1'" class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
              </div>
              <div class="ion-input-class">
                <ion-datetime 
                  placeholder="Última ocorrência"
                  [(ngModel)]="postEvent.EventRecurrence.LastOccurrence"
                  displayFormat="D MMM YYYY H:mm"
                  minuteValues="0,15,30,45"
                  monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
                  min="2021"
                  max="2025" 
                >
                </ion-datetime>
                <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
              </div>
            </div>
          </div>

          <div class="container-div width-100">
            <div (click)="addParticipants()" class="ion-item-class-2 cursor-pointer">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
              </div>
              <div class="ion-input-class-no-height d-flex">
                <div class="list-people flex-grow-1">
                  <ion-item lines="none">
                    <ion-list>
                      <ion-label *ngIf="taskParticipants?.length < 1" class="list-people-title">Adicionar intervenientes</ion-label>
                      <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
                    </ion-list>
                  </ion-item>
                </div>
                <div class="add-people">
                  <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
                </div>
              </div>
            </div>
          </div>

          <div class="container-div width-100">
            <div (click)="addParticipantsCC()" class="ion-item-class-2 cursor-pointer">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
              </div>
              <div class="ion-input-class-no-height d-flex">
                <div class="list-people flex-grow-1">
                  <ion-item lines="none">
                    <ion-list>
                      <ion-label *ngIf="taskParticipantsCc?.length < 1" class="list-people-title">Adicionar intervenientes</ion-label>
                      <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
                    </ion-list>
                  </ion-item>
                </div>
                <div class="add-people">
                  <ion-icon  slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
                </div>
              </div>
            </div>
          </div>


          <div class="container-div width-100">
            <div class="ion-item-class-2 d-flex width-100">
              <div class="ion-icon-class d-flex">
                <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
              </div>
              <div class="ion-input-class-no-height width-100 flex-grow-1">
                <!-- rows="6" cols="20" -->
                <ion-textarea [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
              </div>
            </div>
          </div>

          <div class="d-flex container-div width-100 ion-item-container-no-border" >
            <ion-label (click)="getDoc()" class="cursor-pointer">
              <div class="attach-icon">
                <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
              </div>
              <div class="attach-document">
                <ion-label>Adicionar documentos</ion-label>
              </div> 
            </ion-label>
          </div>
          
          <div class="d-flex container-div width-100"  *ngFor="let document of loadedEventAttachments; let i = index" > 
            <ion-list class="width-100 list" *ngIf="!document.remove">
              <ion-item class="width-100 ion-no-border ion-no-padding">
              <ion-label class="width-100">
                <p class="p-item-title d-flex ion-justify-content-between"> 
                  <span class="attach-title-item">{{document.SourceName}}</span> 
                  <span class="close-button text-black" (click)="deleteAttachment(document.Id, i)" >
                    <ion-icon class="font-20" src="assets/images/icons-delete-25.svg"></ion-icon>
                  </span>
                </p>
                <!-- <p *ngIf="document.Stakeholders" ><span class="span-left" >{{document.Stakeholders}}</span></p>  -->
                <p>
                  <span class="app-name span-left" *ngIf="document.ApplicationId  == 8"> Correspondência </span>
                  <span class="app-name span-left" *ngIf="document.ApplicationId == 386"> Acções Presidenciais </span>
                  <span class="app-name span-left" *ngIf="document.ApplicationId == 361 "> Arquivo Despacho Electrónico </span>

                  <!-- <span class="span-right" *ngIf="document.CreateDate"> {{document.CreateDate | date: 'dd-MM-yy'}} </span> -->
                </p>
              </ion-label>
            </ion-item>
            </ion-list>
          </div> 


        </div>
        


      </ion-item-sliding>

    </div>

    <app-attendee-modal class="aside-right flex-column height-100 d-none d-md-flex pt-10"
      *ngIf="showAttendees"
      [footer]="false"
      [taskParticipants]="taskParticipants"
      [taskParticipantsCc]="taskParticipantsCc"
      [adding]="adding"
      [footer]="false"
      (dynamicSetIntervenient)="dynamicSetIntervenient($event)"
    ></app-attendee-modal>

  </div>    
</ion-content>

<ion-footer class="background-whit">
  <div class="buttons">
    <button class="btn-cancel cursor-pointer" shape="round" (click)="close()">Cancelar</button>
    <button class="btn-ok cursor-pointer" shape="round" (click)="save()">Gravar</button>
  </div>
</ion-footer>