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

<ion-header  class="ion-no-border">
  <ion-toolbar class="header-toolbar">
    <div class="main-header">
      <div class="title-content width-100">
        <div class="middle">
          <ion-label class="title">Novo Evento</ion-label>
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="main-content">
    <!-- <input type="text" ngbDatepicker #d="ngbDatepicker"/> -->
    
    <div class="ion-item-container" [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">
      <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>
      <!-- Error messages -->
      <!-- <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">
          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">
      <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('CalendarName')?.invalid  && validateFrom ">
          <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">
        <div *ngIf="Form.get('CalendarName').errors?.required">
          Campo obrigatório.
        </div>
      </div>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-description.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]" 
          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">
      <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="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">
      <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">
      <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">
          <ion-select placeholder="Selecione repetição*" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
            <ion-select-option value="false">Não se repete</ion-select-option>
            <ion-select-option value="true">Repete</ion-select-option>
          </ion-select>
        </div>
      </div>
    </div>
    
    <div class="container-div">
      <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  class="ion-input-class-no-height">
          <div class="list-people">
            <ion-item lines="none">
              <ion-list>
              <ion-label  *ngIf="taskParticipants?.length < 1"  class="list-people-title">Adicionar intervenientes*</ion-label>
                <div class="list-people">
                    <ion-item lines="none">
                      <ion-list>
                        <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
                      </ion-list>
                    </ion-item>
                  </div>
                </ion-list>
            </ion-item>
          </div>
          <div (click)="addParticipants()" class="add-people cursor-pointer">
            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
          </div>
        </div>
      </div>
    </div>
    
    <div class="container-div">
      <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">
          <div class="list-people">
            <ion-item lines="none">
              <ion-list>
              <ion-label class="list-people-title">Com conhecimento</ion-label>
                <div class="list-people">
                    <ion-item lines="none">
                      <ion-list>
                        <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
                          <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
                      </ion-list>
                    </ion-item>
                  </div>
                </ion-list>
            </ion-item>
          </div>
          <div (click)="addParticipantsCC()" class="add-people cursor-pointer">
            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
          </div>
        </div>
      </div>
    </div>
    
    <div class="container-div">
      <div class="ion-item-class-2">
        <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 flex-grow-1">
          
          <ion-textarea  [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
          
        </div>
      </div>
    </div>
    
   <div  class="ion-item-container-no-border cursor-pointer"  (click)="getDoc()">
      <ion-label>
        <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   *ngFor="let document of documents; let i = index" > 
      <ion-list class="list">
        <ion-item>
        <ion-label>
          <p class="d-flex ion-justify-content-between"> 
            <span class="attach-title-item">{{document.Assunto}}</span> 
            <span class="app-name">{{document.appName}}</span> 
            <span class="close-button text-black cursor-pointer" (click)="removeAttachment(i)" >
              <ion-icon class="font-20" src="assets/images/icons-delete-25.svg"></ion-icon>
            </span>
          </p> 
          <p><span class="span-left">{{document.EntidadeOrganicaNome}}</span><span class="span-right"> {{document.Data | date: 'dd-MM-yy'}} </span></p>
        </ion-label>
      </ion-item>
      </ion-list>
    </div>
  </div>    
</ion-content>
<ion-footer class="ion-no-border d-flex justify-center px-20">
  <ion-toolbar class=" ">
    <ion-buttons slot="start">
      <ion-button class="btn-cancel cursor-pointer" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </ion-button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons slot="end">
      <ion-button class="btn-ok cursor-pointer" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>