doneit-web/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html

<ion-header class="ion-no-border">
  <app-header></app-header>
</ion-header>

<div class="ion-page d-none" id="main-content">
  <ion-menu-button></ion-menu-button>
</div>

<ion-content class="container-wrapper" >
  <div *ngIf="task" class="main-content d-flex height-100 overflow-hidden">
    <div class="content d-flex flex-column" *ngIf="task">
      <div class="main-header" style="overflow: unset !important;">
        <div class="title-content width-100 d-flex justify-between">
          <div class="font-30 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 flex-grow-1">
            <ion-label class="title">{{ task.Folio}}</ion-label>
          </div>
          <div class="menu-ptions">
            <button class="btn-no-color" (click)="openOptions()">
              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/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/gov/icons-menu.svg"></ion-icon>
            </button>
          </div>
        </div>
      </div>
      <div class="upper-content" style="overflow: unset !important;">
        <div class="content-details">
          <ion-label>
            <p><span class="date">{{customDate}}</span><span class="label">{{ task.WorkflowName }}</span></p>
          </ion-label>
        </div>
      </div>
      <div class="line"></div>

      <div class="overflow-y-auto">
        <div class="middle-content">
          <div *ngIf="cc.length > 0">
            <h5>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>
          <h5>Detalhes</h5>
          <ion-item class="ion-no-margin ion-no-padding">
              <pre class="width-100 text">{{ task.Note }} </pre>
          </ion-item>
        </div>
        <div class="bottom-content width-100">
          <ion-list>
            <h5>Documentos Anexados</h5>
            <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
              <ion-label class="d-block" (click)="viewDocument(Document.DocId, Document)">
                <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></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 *ngIf="eventsList">
          <h5 class="h3-event-title">Eventos Associados</h5>
          <ion-list>
            <div class="content-items width-100" *ngIf="eventsList">
              <ion-list>
                <ion-item class=" ion-no-padding width-100 cursor-pointer" lines="none" *ngFor="let event of eventsList" (click)="goToEvent(event.EventId)">
                <div class="d-flex  content-{{profile}}-{{event.CalendarName}}">
                  <div class="schedule-time">
                    <div class="time-start">{{event.StartDate | date: 'HH:mm'}}</div>
                    <div class="time-end">{{event.EndDate | date: 'HH:mm'}}</div>
                  </div>
                  <div class="schedule-details">
                    <div class="location">{{event.Location}}</div>
                    <div class="description">{{event.Subject}}</div>
                  </div>
                </div>
                </ion-item>
              </ion-list>
            </div>
          </ion-list>
        </div>
      </div>
    </div>

    <div class="aside-right flex-column height-100 overflow-y-auto">
      <div class="buttons">
        <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" class="option-desc"> <div>Enviar para o PR</div> </div>
        <button *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openAddNoteModal('Aprovar')" class="btn-cancel" shape="round" >Avaliação Superior</button>
        <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" class="option-desc"> <div>Solicitar revisão</div> </div>
        <button *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openAddNoteModal('Revisão')" class="btn-cancel" shape="round" >Mandar para Revisão</button>
        <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" class="option-desc"> <div>Outras opções</div> </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.Gabinete.pr_tasks])" (click)="openExpedientActionsModal('2',fulltask)" class="btn-cancel" shape="round" >Pedido de Deferimento</button>
        <button *ngIf="p.userPermission([p.permissionList.Agenda.access])" (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <button *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="attachDocument()" class="btn-cancel" shape="round" >Anexar Documentos</button>
        <button (click)="distartExpedientModal('descartar')" class="btn-cancel" shape="round" >Descartar</button>
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" full class="btn-cancel" shape="round"  >Enviar para pendentes</button>
        <button *ngIf="p.userPermission([p.permissionList.Chat.access])" (click)="openNewGroupPage()" class="btn-cancel" shape="round" >Iniciar Conversa</button>
        <div class="solid"></div>
      </div>
    </div>

    <!-- <div *ngIf="task && p.userRole(['PR'])" class="aside-right flex-column height-100 overflow-y-auto">

      <div class="buttons">
        <button (click)="openExpedientActionsModal('0', fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="distartExpedientModal('descartar')" class="btn-cancel" shape="round" >Descartar</button>
        <div class="solid"></div>
        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
         <button (click)="openNewGroupPage()" class="btn-cancel" shape="round" >Iniciar Conversa</button>
        <div hidden class="solid"></div>
        <button hidden class="btn-cancel" shape="round" >Delegar</button>
      </div>

    </div> -->

  </div>

  <div *ngIf="!task" class="main-content d-flex height-100 overflow-hidden">
    <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>

  </div>
</ion-content>