doneit-web/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html

<ion-header class="ion-no-border">
  <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
  <div class="title">
    <div class="thetitle"><ion-label >Expediente</ion-label></div>
    <div class="theicon" (click)="refreshing()">
      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
        <mat-select [(value)]="filterName">

          <mat-option value="Para hoje" >
            Para hoje
          </mat-option>

          <mat-option value="Novos" >
            Novos
          </mat-option>

          <mat-option value="Lidos" >
            Lidos
          </mat-option>

          <mat-option value="Não Lidos" >
            Não lidos
          </mat-option>

          <mat-option value="Todos" >
            Todos
          </mat-option>

        </mat-select>
      </mat-form-field>
      <!-- <button title="Atualizar" class="btn-no-color" (click)="refreshing()">
        <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
      </button> -->
    </div>
  </div>
</ion-header>
<ion-content>

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

    <ion-list *ngIf="expedienteGdStore.list.length >= 1">
      <div
        class=" item-hover ion-no-padding ion-no-margin cursor-pointer"
        *ngFor = "let task of expedienteGdStore.list"
        (click)="goToExpediente(task.SerialNumber)"
      >
        <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
          <div class="exp-top-detail">
            <div class="subject">
              <ion-label>{{ task.Subject }}</ion-label>
            </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.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
            </div>
          </div>
        </div>
      </div>
    </ion-list>


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

    <div *ngIf="skeletonLoader && expedienteGdStore.list.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>