doneit-web/src/app/pages/gabinete-digital/despachos/despacho/despacho.page.html

<ion-content class="container-wrapper">
  <div class="main-content d-flex height-100 overflow-hidden">
    <div class="content d-flex flex-column" *ngIf="task">
      <div class="main-header">
        <div class="title-content width-100 d-flex justify-space-between align-center">
          <div class=" btn-dismiss font-30-rem cursor-pointer" (click)="goBack()" defaultHref="#">
            <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
          </div>
          <div class="middle d-flex align-center flex-grow-1">
            <ion-label class="title">{{ task.Folio }}</ion-label>
          </div>
          <div class="div-icon" (click)="openOptions()" *ngIf="p.userPermission([p.permissionList.Agenda.access])">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-menu.svg"></ion-icon>
          </div>
        </div>
      </div>
      <div class="upper-content">
        <div class="content-details">
          <ion-label>
            <p><span class="date">{{customDate}}</span></p>
          </ion-label>
          <ion-label>
            <p><span class="color-red">{{ task.DeadlineType }}</span></p>
          </ion-label>
          <ion-label>
            <p class="d-flex mt-10"><span class="label">{{ task.activityInstanceName }}</span></p>
          </ion-label>
        </div>
      </div>
      <div class="line"></div>

      <div class="overflow-y-auto" style="margin-right: -20px; margin-right: -20px;">
        <div class="middle-content">
          <h5 *ngIf="intervenientes">Intervenientes</h5>
          <ion-item class="ion-no-margin ion-no-padding">
            <ion-label>
              <div *ngFor="let task of intervenientes">
                <p>{{task.Name}}</p>
              </div>
            </ion-label>
          </ion-item>
          <div *ngIf="cc.length > 0">
            <h5 class="font-17-rem">Com conhecimento</h5>
            <ion-item class="ion-no-margin ion-no-padding">
              <ion-label>
                <div *ngFor="let c of cc">
                  <p>{{c.Name}}</p>
                </div>
              </ion-label>
            </ion-item>
          </div>
          <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
            <h5 class="font-17-rem">Detalhes</h5>
            <ion-item class="ion-no-margin ion-no-padding">
                <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
            </ion-item>
          </div>
        </div>
        <div class="bottom-content width-100">
          <ion-list>
            <h5 class="font-17-rem">Documentos Anexados</h5>
            <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of mergedArray">
              <ion-label class="d-block" (click)="viewDocument(Document.DocId, Document,Document.content)">
                <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }} <span class="document-type" *ngIf="Document.content != ''">Rascunho</span></p>
                <p><span class="span-left">{{ Document.Sender}}</span><span class="span-right">{{ Document.DocDate | date: 'dd-MM-yyyy HH:mm' }}</span></p>
              </ion-label>
            </ion-item>
          </ion-list>
        </div>
      </div>

    </div>

    <div class="content d-flex flex-column" *ngIf="!task">
      <ion-item lines="none"
                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">

                    <div class="item-content flex-grow-1 cursor-pointer">
                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
                    </div>
      </ion-item>
      <ion-item lines="none"
      class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">

        <div class="item-content flex-grow-1 cursor-pointer">
          <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
          <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
          <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
        </div>
      </ion-item>
      <ion-item lines="none"
      class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">

        <div class="item-content flex-grow-1 cursor-pointer">
          <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
          <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
          <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
        </div>
      </ion-item>
      <ion-item lines="none"
      class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">

        <div class="item-content flex-grow-1 cursor-pointer">
          <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
          <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
          <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
        </div>
      </ion-item>
    </div>

    <div *ngIf="task" class="aside-right flex-column height-100 overflow-y-auto">
      <div class="buttons" *ngIf="task.activityInstanceName == 'Tarefa de Despacho'">
        <div class="option-desc" *ngIf="task.WorkflowName == 'Despacho do Presidente da República' "> <div>Responder ao PR</div> </div>
        <button (click)="openAddNoteModal('Executado')" class="btn-cancel" shape="round" >Executado</button>
        <div class="option-desc" *ngIf="task.WorkflowName == 'Despacho do Presidente da República' ">Reencaminhar para Área Jurídica</div>
        <button (click)="openAddNoteModal('Gerar Diploma')" *ngIf="task.WorkflowName == 'Despacho do Presidente da República'" class="btn-cancel" style="margin-bottom: 0px !important;" shape="round" >Gerar Diploma </button>
        <div class="option-desc" *ngIf="task.WorkflowName == 'Despacho do Presidente da República' " >Outras opções</div>
        <button (click)="openDelegarModal(task)" class="btn-cancel" shape="round" >Delegar</button>
        <div class="solid"></div>
        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button *ngIf="p.userPermission([p.permissionList.Agenda.access])" (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <div class="solid"></div>
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
      </div>
      <div class="buttons" *ngIf="task.activityInstanceName == 'Reexecutar Despacho'">
        <button (click)="openAddNoteModal('Executado')" class="btn-cancel" shape="round" >Executado</button>
        <button (click)="openDelegarModal(task)" class="btn-cancel" shape="round" >Delegar</button>
        <div class="solid"></div>
        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button *ngIf="p.userPermission([p.permissionList.Agenda.access])" (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <div class="solid"></div>
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
      </div>
      <div class="buttons" *ngIf="task.activityInstanceName == 'Concluir Despacho'">
        <button (click)="openAddNoteModal('Arquivar')" class="btn-cancel" shape="round" >Arquivar</button>
        <div class="solid"></div>
        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button *ngIf="p.userPermission([p.permissionList.Agenda.access])" (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <div class="solid"></div>
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
        <button (click)="openAddNoteModal('Reexecução')" class="btn-cancel" shape="round" >Enviar para Reexecução</button>
      </div>
    </div>
  </div>
</ion-content>