doneit-web/src/app/shared/gabinete-digital/generic/task-list/task-list.page.html

<ion-content>
  <div class="overflow-y-auto height-100 width-100 px-20 d-flex task-list-com">

    <div *ngIf="taskList.length >= 1" class="width-100">
      <ion-list part="divo" class="width-100">
        <div class=" item-hover ion-no-padding ion-no-margin cursor-pointer"
          *ngFor="let task of taskList; let i = index" (click)="viewTaskDetail.emit(task)">
          <!--  [routerLink]="['/home/gabinete-digital/expediente',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.WorkflowName}}</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 *ngIf="!skeletonLoader && taskList.length == 0"
      class="empty-list d-flex height-100 width-100 align-center justify-content-center">
      <span>Lista vazia</span>
    </div>

    <div class="width-100" *ngIf="skeletonLoader && taskList.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>