doneit-web/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html

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

    <div class="content d-flex flex-column width-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 por aprovar</ion-label> <br>
              <i style="margin-top: -5px; font-size: 15px;" > Campos marcados com * são obrigatórios</i>

            </div>
          </div>
        </ion-header>
      </div>
      <ion-item-sliding class="overflow-y-auto d-flex width-100">
        <div class="px-20 d-flex flex-column width-100">
          <div class="ion-item-container width-100">
            <ion-input  placeholder="Assunto*" [(ngModel)]="eventProcess.workflowInstanceDataFields.Subject"></ion-input>
          </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">
                <ion-input placeholder="Localização *" [(ngModel)]="eventProcess.workflowInstanceDataFields.Location"></ion-input>
              </div>
            </div>
            <!-- Error messages -->
            <!-- <span class="error ion-padding" >
              Campo obrigatório
            </span> -->

          </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 disabled  placeholder="Selecione agenda*"
                  class="d-block d-md-none"
                  selectedText="{{eventProcess.workflowInstanceDataFields.Agenda}}"
                  [(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda"
                  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> -->


                <mat-form-field appearance="none"  class="width-100" >
                  <mat-select placeholder="Selecione agenda" [(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda" [disabled]="disabled">
                    <mat-option value="Oficial">
                      Agenda Oficial
                    </mat-option>
                    <mat-option value="Pessoal">
                      Agenda Pessoal
                    </mat-option>
                  </mat-select>
                </mat-form-field>

              </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">

                <mat-form-field appearance="none" class="width-100" placeholder="Sample Type" required>
                  <!-- <input matInput type="text" > -->
                  <mat-select [(ngModel)]="eventProcess.workflowInstanceDataFields.Category" >
                    <mat-option value="Meeting">
                      Reunião
                    </mat-option>
                    <mat-option value="Travel">
                      Viagem
                    </mat-option>
                    <mat-option value="Conference">
                      Conferência
                    </mat-option>
                    <mat-option value="Encontro">
                      Encontro
                    </mat-option>
                  </mat-select>
                </mat-form-field>


              </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">

                <mat-form-field appearance="none"
                class="width-100 date-hour-picker">
                  <input matInput [ngxMatDatetimePicker]="picker1"
                    placeholder="Choose a date"
                    [(ngModel)]="startDate"
                    [disabled]="disabled"
                  >
                  <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
                  <ngx-mat-datetime-picker #picker1
                    [showSpinners]="showSpinners"
                    [showSeconds]="showSeconds"
                    [stepHour]="stepHour" [stepMinute]="stepMinute"
                    [stepSecond]="stepSecond"
                    [touchUi]="touchUi">
                  </ngx-mat-datetime-picker>
                </mat-form-field>
              </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 width-100">

                <mat-form-field appearance="none"
                class="width-100 date-hour-picker">
                  <input matInput [ngxMatDatetimePicker]="fim"
                    placeholder="Choose a date"
                    [(ngModel)]="endDate"
                    [disabled]="disabled"
                  >
                  <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
                  <ngx-mat-datetime-picker #fim
                    [showSpinners]="showSpinners"
                    [showSeconds]="showSeconds"
                    [stepHour]="stepHour" [stepMinute]="stepMinute"
                    [stepSecond]="stepSecond"
                    [touchUi]="touchUi">
                  </ngx-mat-datetime-picker>
                </mat-form-field>

              </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">

                <mat-form-field
                  class="width-100"
                  placeholder="Selecione repetição"
                  value="false"
                  interface="action-sheet"
                  required
                  appearance="none"
                >
                <mat-select [(ngModel)]="eventProcess.workflowInstanceDataFields.OccurrenceType"
                  (ngModelChange)="onSelectedRecurringChanged($event)"
                  >
                    <mat-option
                    *ngFor="let recurring of recurringTypes" value="{{recurring.Code}}"
                    >
                    {{recurring.Description}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

              </div>
            </div>
          </div> -->

          <div *ngIf="eventProcess.workflowInstanceDataFields.OccurrenceType != '-1'"
            class="container-div width-100">
            <div class="ion-item-class-2 d-flex">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
              </div>
              <div class="ion-input-class flex-grow-1">

                <mat-form-field class="date-hour-picker">
                  <input matInput [ngxMatDatetimePicker]="occurrrence"
                    placeholder="Choose a date"
                    [(ngModel)]="eventProcess.workflowInstanceDataFields.LastOccurrence"
                    [disabled]="disabled"
                    [min]="endDate"
                  >
                  <mat-datepicker-toggle id="last-occurrence" matSuffix [for]="occurrrence"></mat-datepicker-toggle>
                  <ngx-mat-datetime-picker #occurrrence
                    [showSpinners]="showSpinners"
                    [showSeconds]="showSeconds"
                    [stepHour]="stepHour" [stepMinute]="stepMinute"
                    [stepSecond]="stepSecond"
                    [touchUi]="touchUi"
                    >
                  </ngx-mat-datetime-picker>
                </mat-form-field>

              </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-person.svg"></ion-icon>
              </div>
              <div (click)="addParticipants()" class="ion-input-class-no-height d-flex">
                <div class="list-people flex-grow-1">
                  <ion-item lines="none">
                    <ion-list style="display:grid">
                      <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 cursor-pointer">
                  <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="start" src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="start" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-arrow-forward.svg"></ion-icon>
                </div>
              </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-people-cc.svg"></ion-icon>
              </div>
              <div class="ion-input-class-no-height d-flex" (click)="addParticipantsCC()">
                <div class="list-people flex-grow-1">
                  <ion-item lines="none">
                    <ion-list>
                      <ion-label *ngIf="taskParticipantsCc?.length < 1" class="list-people-title">Com Conhecimento</ion-label>
                      <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
                    </ion-list>
                  </ion-item>
                </div>
                <div class="add-people cursor-pointer" >
                  <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  slot="start" src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' "  slot="start" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-arrow-forward.svg"></ion-icon>
                </div>
              </div>
            </div>
          </div>

          <div class="container-div d-flex width-100">
            <div class="ion-item-class-2 d-flex width-100">
              <div class="ion-icon-class">
                <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">
                <ion-textarea  autoGrow="true" class="heigh-200" [(ngModel)]="eventProcess.workflowInstanceDataFields.Body"  placeholder="Detalhes" rows="6" cols="20"></ion-textarea>
              </div>
            </div>
          </div>

          <div (click)="getDoc()" class="cursor-pointer d-flex container-div width-100 ion-item-container-no-border" >
            <ion-label>
              <div class="attach-icon">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-attach-doc.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-attach-doc.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/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"  >
            <ion-list class="width-100 ">
              <ion-item class="width-100"   *ngFor="let document of loadedAttachments; let i = index">
                <ion-label class="width-100 d-block list">
                  <p class="d-flex ion-justify-content-between">
                    <span class="attach-title-item">{{document.subject || document.Description || 'Sem título'}}</span>
                    <span class="app-name" *ngIf="document.ApplicationId  == 8"> Correspondencia </span>
                    <span class="app-name" *ngIf="document.ApplicationId == 386"> AccoesPresidenciais </span>
                    <span class="app-name" *ngIf="document.ApplicationId == 361 "> ArquivoDespachoElect </span>
                    <span class="close-button text-black cursor-pointer" (click)="deleteAttachment(document, i)" >
                      <ion-icon class="font-20" src="assets/images/icons-delete-25.svg"></ion-icon>
                    </span>
                  </p>
                  <p><span class="span-left" *ngIf="document.Stakeholders != false">{{document.Stakeholders}}</span><span class="span-right" *ngIf="document.dateEntry != false"> {{document.dateEntry }} </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"
      [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-ok cursor-pointer" shape="round" (click)="save()">Gravar</button>
    <button class="btn-cancel cursor-pointer" shape="round" (click)="close()">Cancelar</button>

  </div>
</ion-footer>