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

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

  <app-task-list-header [goBackButton]=true [headerName]="headerName" [ordinance]=ordinance [loading]=skeletonLoader
    (reorderList)=reorderList($event) (changeFilterName)=changeFilterName($event)
    (goBack)=goBack()></app-task-list-header>

  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="validar" *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">
        Diplomas por validar
      </ion-segment-button>
      <ion-segment-button value="assinados">
        Diplomas assinados PR
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

</ion-header>

<ion-content>
  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

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


    <div class="width-100" [ngSwitch]="segment">
      <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
      <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">

        <ion-list *ngSwitchCase="'validar'">
          <div *ngIf="listDiplomasPorValidar.length >= 1">
            <ion-item class=" ion-no-padding cursor-pointer" *ngFor="let task of listDiplomasPorValidar"
              (click)="goToDiploma(task.SerialNumber)" lines="none">
              <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.WorkflowName}}</span>
                  </div>
                  <div class="exp-date">
                    <ion-label>{{ task.taskStartDate || task.TaskStartDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
                  </div>
                </div>
              </div>
            </ion-item>
          </div>

          <div *ngIf="listDiplomasPorValidar.length == 0 && skeletonLoader">
            <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 *ngIf="listDiplomasPorValidar.length == 0 && !skeletonLoader"
            class="empty-list d-flex height-100 align-center justify-content-center">
            <span>Lista vazia</span>
          </div>

        </ion-list>

      </div>

      <ion-list *ngSwitchCase="'assinados'">
        <div *ngIf="listDiplomasAssinadosPR.length >= 1">
          <ion-item class=" ion-no-padding cursor-pointer" *ngFor="let task of listDiplomasAssinadosPR"
            (click)="goToDiploma(task.SerialNumber)" lines="none">
            <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
              <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.WorkflowName}}</span>
                </div>
                <div class="exp-date">
                  <ion-label>{{ task.taskStartDate || task.TaskStartDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
                </div>
              </div>
            </div>
          </ion-item>
        </div>

        <div *ngIf="listDiplomasAssinadosPR.length == 0 && skeletonLoader">
          <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 *ngIf="listDiplomasAssinadosPR.length == 0 && !skeletonLoader"
          class="empty-list d-flex height-100 align-center justify-content-center">
          <span>Lista vazia</span>
        </div>

      </ion-list>

    </div>

  </div>

</ion-content>