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

<ion-header class="ion-no-border">
  <ion-toolbar class="header-toolbar">
    <div class="main-header">
      <div class="title-content">
        <div class="middle">
          <ion-label id="edit-event-desktop" class="title">Editar Evento</ion-label> <br>
          <i style="margin-top: -3px; font-size: 15px;"> Campos marcados com * são obrigatórios</i>
        </div>
      </div>
      <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="main-content">
    <div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
      <ion-input autocomplete="on" autocorrect="on" spellcheck="true" 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">

        </div>
        <div *ngIf="Form.get('Subject').errors?.minlength">
          O campo deve ter pelo menos 4 caracteres.
        </div>
      </div>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2 width-100 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Location')?.invalid  && validateFrom ">
          <ion-input autocomplete="on" autocorrect="on" spellcheck="true" placeholder="Localização*"
            [(ngModel)]="_postEvent.Location"></ion-input>
        </div>
      </div>
      <!-- Error messages -->
      <!-- <span class="error ion-padding" >
        Campo obrigatório
      </span> -->

    </div>


    <!-- <div class="container-div">
      <div class="ion-item-class-2 width-100 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1" >
          <ion-input [disabled]=true autocomplete="on" autocorrect="on" spellcheck="true" placeholder="Localização*" [(ngModel)]="CalendarNameOwnerName"></ion-input>
        </div>
      </div>

     <span class="error ion-padding" >
        Campo obrigatório
      </span>

    </div> -->

    <div *ngIf="Form && validateFrom">
      <div *ngIf="Form.get('Location').invalid " class="input-errror-message">
        <div *ngIf="Form.get('Location').errors?.required">

        </div>
        <div *ngIf="Form.get('Location').errors?.minlength">
          O campo deve ter pelo menos 4 caracteres.
        </div>
      </div>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2 width-100 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 appearance="none" floatLabel="never" class="width-100 ">
            <mat-select placeholder="Selecione agenda*" [(ngModel)]="_postEvent.CalendarName" [disabled]=true>
              <mat-option *ngFor="let calendars of CalendarNamesOptions" value="{{calendars}}">
                Agenda {{ calendars }}
              </mat-option>
            </mat-select>
          </mat-form-field>

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

    <div class="container-div">
      <div class="ion-item-class-2 width-100 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"
          [class.input-error]="Form?.get('Categories')?.invalid  && validateFrom ">

          <mat-form-field appearance="none" floatLabel="never" class="width-100" required>
            <!-- <input matInput type="text" > -->
            <mat-select placeholder="Selecione o tipo de evento*" matInput [(ngModel)]="_postEvent.Category">
              <mat-option value="Reunião">
                Reunião
              </mat-option>
              <mat-option value="Viagem">
                Viagem
              </mat-option>
              <mat-option value="Conferência">
                Conferência
              </mat-option>
              <mat-option value="Encontro">
                Encontro
              </mat-option>
            </mat-select>
          </mat-form-field>

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

    <div class="container-div">
      <div>
        <ion-item>
          <ion-label>Todo dia</ion-label>
          <ion-checkbox [(ngModel)]="allDayCheck" (ionChange)="onCheckboxChange($event)"></ion-checkbox>
        </ion-item>
      </div>
  </div>

    <div *ngIf="allDayCheck" class="container-div">
      <div class="ion-item-class-2 width-100 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" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">

          <mat-form-field appearance="none" floatLabel="never" class="date-hour-picker">
            <input matInput [ngxMatDatetimePicker]="picker1" placeholder="Choose a date"
              [(ngModel)]="_postEvent.StartDate" [max]="maxDate" [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" [hideTime]="true">
            </ngx-mat-datetime-picker>
          </mat-form-field>

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

    <div *ngIf="!allDayCheck" class="container-div">
      <div class="ion-item-class-2 width-100 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" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">

          <mat-form-field appearance="none" floatLabel="never" class="date-hour-picker">
            <input matInput [ngxMatDatetimePicker]="picker1" placeholder="Choose a date"
              [(ngModel)]="_postEvent.StartDate" [max]="maxDate" [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" [hideTime]="false">
            </ngx-mat-datetime-picker>
          </mat-form-field>

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

    <div *ngIf="allDayCheck" class="container-div">
      <div class="ion-item-class-2 width-100 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" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">

          <mat-form-field appearance="none" floatLabel="never" floatLabel="never" class="date-hour-picker">
            <input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [(ngModel)]="_postEvent.EndDate"
              [max]="maxDate" [disabled]="disabled" [min]="_postEvent.StartDate">
            <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" [hideTime]="true">
            </ngx-mat-datetime-picker>
          </mat-form-field>

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

    <div *ngIf="!allDayCheck" class="container-div">
      <div class="ion-item-class-2 width-100 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" [class.input-error]="Form?.get('Date')?.invalid  && validateFrom ">

          <mat-form-field appearance="none" floatLabel="never" floatLabel="never" class="date-hour-picker">
            <input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [(ngModel)]="_postEvent.EndDate"
              [max]="maxDate" [disabled]="disabled" [min]="_postEvent.StartDate">
            <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" [hideTime]="false">
            </ngx-mat-datetime-picker>
          </mat-form-field>

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

    <!-- <div class="container-div d-flex">
      <div class="ion-item-class-2 width-100 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">

          <mat-form-field   appearance="none" floatLabel="never" class="width-100" value="false" interface="action-sheet" required>
            <mat-select
            placeholder="Selecione repetição*"
            [(ngModel)]="_postEvent.EventRecurrence.Type"
            (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="_postEvent.EventRecurrence.Type != '-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 (click)="openLastOccurrence()" class="ion-input-class flex-grow-1">

          <mat-form-field class="date-hour-picker">
            <input matInput [ngxMatDatetimePicker]="occurrrence" placeholder="Choose a date"
              [(ngModel)]="_postEvent.EventRecurrence.LastOccurrence" [disabled]="disabled" [min]="_postEvent.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=" d-flex width-100">
      <div class="ion-item-class-2 width-100">
        <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"
          [class.input-error]="Form?.get('participantes')?.invalid  && validateFrom">
          <div class="list-people">
            <ion-item lines="none">
              <ion-list>
                <div *ngIf="taskParticipants?.length < 1" class="list-people-title">Adicionar Intervenientes*</div>
                <div *ngFor="let participant of taskParticipants">{{participant.Name}}</div>
              </ion-list>
            </ion-item>
          </div>
          <div class="add-people">
            <button class="btn-no-color cursor-pointer" (click)="addParticipants()">
              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" slot="start"
                src="assets/images/icons-arrow-forward.svg"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" slot="start"
                src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class=" d-flex width-100">
      <div class="ion-item-class-2 width-100">
        <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"
          [class.input-error]="Form?.get('participantes')?.invalid  && validateFrom">
          <div class="list-people">
            <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">
            <button class="btn-no-color cursor-pointer" (click)="addParticipantsCc()">
              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" slot="start"
                src="assets/images/icons-arrow-forward.svg"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" slot="start"
                src="assets/images/theme/gov/icons-arrow-forward.svg"></ion-icon>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2 d-flex">
        <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">
          <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="_postEvent.Body.Text"
            placeholder="Detalhes" rows="6" cols="20"></ion-textarea>
        </div>
      </div>
    </div>

    <div (click)="getDoc()" class="d-flex container-div width-100 ion-item-container-no-border cursor-pointer">
      <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" *ngFor="let document of loadedEventAttachments; let i = index">
      <ion-list class="width-100 list" *ngIf="!document.remove">
        <ion-item class="width-100">
          <ion-label class="width-100">
            <p class="d-flex ion-justify-content-between">
              <span class="attach-title-item">{{document.SourceName}}</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.Id, i)">
                <ion-icon class="font-20" src="assets/images/icons-delete-25.svg"></ion-icon>
              </span>
            </p>
            <p><span class="span-left">{{document.Stakeholders}}</span><span class="span-right"> {{document.CreateDate |
                date: 'dd-MM-yyyy HH:mm'}} </span></p>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>

  </div>
</ion-content>
<ion-footer class="ion-no-border">
  <ion-toolbar class="width-100 d-flex justify-space-between px-20">
    <ion-buttons slot="start">
      <button class="btn-ok" fill="clear" color="#fff" (click)="save_v2()">
        <ion-label>Gravar</ion-label>
      </button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons slot="end">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>