doneit-web/src/app/modals/create-process/create-process.page.html

<ion-content class="height-100">
  <div class="main-content d-flex height-100">
    <div class="content d-flex flex-column width-100">
      <ion-item  lines="none">
        <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
      </ion-item>
      <div class="ion-item-container width-100">
        <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.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-description.svg"></ion-icon>
          </div>
          <div class="ion-input-class flex-grow-1">
            <ion-textarea class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-textarea>
          </div>
        </div>
      </div>
      
      <!-- Add scrolls -->
      <div class="d-flex flex-column height-100 overflow-y-auto">
          
        <div class="container-div width-100">
          <div class="ion-item-class-2 width-100">
            <div class="ion-icon-class">
              <ion-icon class="icon-time" slot="start" name="time-outline"></ion-icon>
            </div>
            <div class="ion-input-class">

              <ion-select class="d-block d-md-none" placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
                <ion-select-option value="99999861"><b>Normal</b> (4 dias para a execução da tarefa)</ion-select-option>
                <ion-select-option value="99999862"><b>Urgente</b> (2 dias para a execução da tarefa)</ion-select-option>
                <ion-select-option value="99999863"><b>Muito Urgente</b> (1 dia para a execução da tarefa)</ion-select-option>
                <ion-select-option value="99999864"><b>Urgentíssimo</b> (8 horas para a execução da tarefa)</ion-select-option>
              </ion-select>

              <mat-form-field class="width-100 d-none d-md-block" placeholder="Sample Type" required>
                <mat-select matInput [(value)]="postData.Priority" >
                  <mat-option value="99999861">
                    Normal
                  </mat-option>
                  <mat-option value="99999862">
                    Urgente
                  </mat-option>
                  <mat-option value="99999863">
                    Muito Urgente
                  </mat-option>
                  <mat-option value="99999864">
                    Urgentíssimo
                  </mat-option>
                </mat-select>
              </mat-form-field>

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

              <mat-form-field appearance="fill" class="width-100">
                <mat-select [formControl]="toppings">
                  <mat-option [value]="99999861">Normal</mat-option>
                  <mat-option  [value]="99999862">Urgente</mat-option>
                  <mat-option  [value]="99999863">Muito Urgente</mat-option>
                  <mat-option [value]="99999864">Urgentíssimo</mat-option>
                </mat-select>
              </mat-form-field>

            </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>
                    <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
                  </ion-list>
                </ion-item>
              </div>
              <div class="add-people" (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">
            <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 *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" (click)="addParticipantsCc();">
                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
              </div>
            </div>
          </div>
        </div>

        <div class="ion-item-container-no-border" (click)="getDoc()">
          <ion-label class="d-flex align-center">
            <div class="attach-icon d-flex align-center">
              <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
            </div>
            <div class="attach-document pl-10">
              <ion-label>Anexar 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>

    </div>

    
    <div *ngIf="postData" class="aside-right flex-column height-100">
      <app-empty-container 
          [texto]="emptyTextDescription" 
          *ngIf="!showAttendees" 
          class="d-flex height-100 flex-column">
      </app-empty-container>
      <app-attendee-modal
      *ngIf="showAttendees"
        [footer]="false"
        class="d-flex flex-column height-100"
        [adding]="adding"
        [taskParticipants]="taskParticipants"
        [taskParticipantsCc]="taskParticipantsCc"
        (closeComponent)="closeComponent()"
        (setIntervenient)="setIntervenient($event)"
        (setIntervenientCC)="setIntervenientCC($event)"
        (setContact)="setContact($event)"
      ></app-attendee-modal>
    </div>

  </div>
</ion-content>
<ion-footer>
  <div class="buttons">
    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
  </div>
</ion-footer>