doneit-web/src/app/shared/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">
        <div class="middle">
          <ion-label class="title">Novo Evento</ion-label>
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="main-content">

    <!-- THIS -->

   
    <!-- <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <input class="form-control" placeholder="yyyy-mm-dd"
                name="dp"  ngbDatepicker #d="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
          </div>
        </div>
      </div>
    </form> -->

    <!-- 2. datepicker in the popup -->
   <!--  <input type="text" ngbDatepicker #d="ngbDatepicker"/> -->

    <div class="ion-item-container">
      <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
    </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-location.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">
          <ion-input type="text" 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 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="width-100"  [(ngModel)]="postEvent.CalendarName" placeholder="Selecione agenda" required>
            <mat-select>
              <mat-option value="Oficial">
                Oficial
              </mat-option>
              <mat-option value="Pessoal">
                Pessoal
              </mat-option>
            </mat-select>
          </mat-form-field>

        </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 flex-grow-1">

          <mat-form-field  class="width-100"  [(ngModel)]="postEvent.Categories[0]" placeholder="Selecione tipo" required>
            <mat-select>
              <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 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)="openInicio()" class="ion-input-class flex-grow-1">
          <mat-form-field class="date-hour-picker width-100">
            <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
            [(ngModel)]="postEvent.StartDate" 
              [min]="minDate" [max]="maxDate" [disabled]="disabled">
            <mat-datepicker-toggle id="new-inicio" #inicio  matSuffix [for]="picker"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker  #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
              [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false 
              [color]="'#0000'" [enableMeridian]="enableMeridian">
            </ngx-mat-datetime-picker>
          </mat-form-field>

        </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-calendar.svg"></ion-icon>
        </div>
        <div (click)="openFim()" class="ion-input-class flex-grow-1">
          <mat-form-field class="date-hour-picker width-100">
            <input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [formControl]="dateControl" 
              [(ngModel)]="postEvent.EndDate"
              [min]="minDate" [max]="maxDate" [disabled]="disabled">
            <mat-datepicker-toggle id="new-fim" #inicio  matSuffix [for]="fim"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker [showSpinners]=false  #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
              [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false appearance = "standard"
              [color]="'#0000'" [enableMeridian]="enableMeridian">
            </ngx-mat-datetime-picker>
          </mat-form-field>

        </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-refresh.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">

          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
            <mat-select>
              <mat-option value="false">
                Não se repete
              </mat-option>
              <mat-option value="true">
                Repete
              </mat-option>
            </mat-select>
          </mat-form-field>

        </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-person.svg"></ion-icon>
        </div>
        <div  class="ion-input-class-no-height flex-grow-1">
          
          <div class="list-people">
            <ion-item lines="none">
              <ion-list>
                <ion-label *ngIf="taskParticipants.length ==0" 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" (click)="addParticipants()">
            <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 d-flex">
        <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 flex-grow-1">
          <div class="list-people">
         
            <ion-item lines="none">
              <ion-list>
                <ion-label *ngIf="taskParticipantsCc.length ==0" 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" (click)="addParticipantsCc()">
            <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 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 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 class="list "  *ngFor="let document of documents; let i = index" > 
      <ion-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 px-20">
  <ion-toolbar class="d-flex justify-space-between">
    <ion-buttons slot="start">
      <ion-button class="btn-cancel" 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" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>