doneit-web/src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.html

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


<ion-header class="ion-no-border header-2">

  <div class="title d-flex align-center">
    <app-btn-modal-dismiss (click)="goBack()"></app-btn-modal-dismiss>

    <div class="title"><ion-label>Diplomas por Elaborar</ion-label></div>
    <div class="theicon btn-refresh">
      <button class="btn-no-color" (click)="doRefresh($event)">
        <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
      </button>
    </div>
  </div>

</ion-header>
<ion-content>

  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="deslize para actualizar"
      refreshingSpinner="circles" refreshingText="A actualizar...">
    </ion-refresher-content>
  </ion-refresher>

  <div class="main-content width-100 overflow-y-auto height-100">

    <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>

    <div class="d-flex ion-justify-content-between ion-align-items-center" style="
      width: 300px;
      margin: 0px auto;
    ">

      <div class="d-flex sort-by ion-justify-content-center">
        <p>
          <span class="order">Order por:</span>
          <span *ngIf="ordinance == 'recent'" class="order-labal">Mais Recentes</span>
          <span *ngIf="ordinance == 'old'" class="order-labal">Mais Antigos</span>
        </p>
      </div>
      <div>
        <div *ngIf="ordinance == 'old'" (click)="reorderList('recent')">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "
            src="assets/images/icons-arrow-arrow-up.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-arrow-arrow-up.svg"></ion-icon>
        </div>

        <div *ngIf="ordinance == 'recent'" (click)="reorderList('old')">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "
            src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-arrow-arrow-down.svg"></ion-icon>
        </div>
      </div>
    </div>


    <div class="width-100" *ngIf="deplomasStore.DiplomaGerarList.length >= 1">

      <div *ngIf="deplomasStore.DiplomaGerarList">
        <ion-list>
          <div class=" ion-no-padding ion-no-margin cursor-pointer" *ngFor="let task of deplomasStore.DiplomaGerarList"
            (click)="goToDiploma(task.SerialNumber)">
            <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
              <div class="exp-top-detail">
                <div class="subject d-flex align-center">
                  <ion-label [class.gb-seen]="TaskService.seen(task)">{{ task.Folio }}</ion-label>
                  <span class="dead-line ml-10" *ngIf="TaskService.deadlineIsToday(task.Deadline)">Para hoje</span>
                  <span class="new-task ml-10" *ngIf="TaskService.lessThen24Hours(task.TaskReceiveDate)">Nova</span>
                </div>
                <div class="exp-icon">
                  <ion-icon *ngIf="ThemeService.currentTheme == 'default' "
                    src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
                    src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                </div>
              </div>
              <div class="exp-bottom-detail">
                <div class="exp-remetente">
                  <ion-label>{{task.Senders}}</ion-label>
                </div>
              </div>
              <div class="exp-middle-detail">
                <div class="exp-workflow">
                  <span class="label">{{task.activityInstanceName}}</span>
                </div>
                <div class="exp-date">
                  <ion-label>{{ task.taskStartDate || task.TaskStartDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
                </div>
              </div>
            </div>
          </div>
        </ion-list>
      </div>
    </div>

    <!-- Empty -->
    <div *ngIf="!skeletonLoader && diplomasList.length == 0"
      class="empty-list d-flex height-100 align-center justify-content-center">
      <span>Lista vazia</span>
    </div>

    <div *ngIf="skeletonLoader && diplomasList.length == 0">

      <ion-list>
        <ion-item>
          <ion-thumbnail slot="end">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-thumbnail slot="end">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>
  </div>



  <div class="main-content width-100 overflow-y-auto height-100">

    <div>
      <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
      <div class="height-100">
        <ion-list>
          <div class="expediente ion-no-padding ion-no-margin cursor-pointer"
            *ngFor="let task of deplomasStore.DiplomaGerarList; let i = index" (click)="goToDiploma(task.SerialNumber)">
            <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
            <div class="item width-100">
              <div class="exp-top-detail">
                <div class="subject d-flex">
                  <ion-label [class.gb-seen]="TaskService.seen(task)">{{ task.Folio }}</ion-label>
                  <span class="dead-line ml-10" *ngIf="TaskService.deadlineIsToday(task.Deadline)">Para hoje</span>
                  <span class="new-task ml-10" *ngIf="TaskService.lessThen24Hours(task.TaskReceiveDate)">Nova</span>
                </div>
                <div class="exp-icon">
                  <ion-icon *ngIf="ThemeService.currentTheme == 'default' "
                    src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
                    src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                </div>
              </div>
              <div class="exp-bottom-detail">
                <div class="exp-remetente">
                  <ion-label>{{task.Senders}}</ion-label>
                </div>
              </div>
              <div class="exp-middle-detail">
                <div class="exp-workflow">
                  <span class="label">{{task.activityInstanceName}}</span>
                </div>
                <div class="exp-date">
                  <ion-label>{{ task.taskStartDate || task.TaskStartDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
                </div>
              </div>
            </div>
          </div>
        </ion-list>

      </div>
    </div>

    <div *ngIf="!skeletonLoader && deplomasStore.DiplomaGerarList.length == 0"
      class="empty-list d-flex height-100 align-center justify-content-center">
      <span>Lista vazia</span>
    </div>

    <div *ngIf="skeletonLoader && deplomasStore.DiplomaGerarList.length == 0">

      <ion-list>
        <ion-item>
          <ion-thumbnail slot="end">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-thumbnail slot="end">
            <ion-skeleton-text animated></ion-skeleton-text>
          </ion-thumbnail>
          <ion-label>
            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>
  </div>

</ion-content>