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

<ion-header class="ion-no-border header-2">
  <div class="header-content">
    <div class="header-icon-left">
      <button class="btn-no-color cursor-pointer" (click)="goBack()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " 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>
      </button>
    </div>
    <div class="header-title">
      <label>Expediente <span class="lowercase" *ngIf="filterName != 'Todos' ">{{ filterName }}</span></label>
    </div>
    <div class="btn-refresh  d-flex align-center">

      <div>
        <div class="d-flex" (click)="reorderList('old')" *ngIf="ordinance == 'recent' ">

          <ion-icon  class="mr-10 font-25"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
        </div>
  
        <div class="d-flex" (click)="reorderList('recent')" *ngIf="ordinance != 'recent' ">
          <ion-icon  class="mr-10 font-25"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
        </div>
      </div>

      <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" >
            Novas
          </mat-option>

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

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


          <mat-option value="OverdueTasks">
            Em atraso
          </mat-option>

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

          
        </mat-select>
        
      </mat-form-field>
      <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-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>

  <div class="main-content d-flex height-100" >
    <div class="content d-flex flex-column width-100 overflow-y-auto px-20">

      <ion-list>
        <div
          class=" ion-no-padding ion-no-margin cursor-pointer"
          *ngFor = "let task of list"
          (click)="goToExpediente(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.Subject }}</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.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
            </div>
          </div>
        </div>
        </div>
      </ion-list>

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

      <div *ngIf="skeletonLoader && 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>
  </div>

</ion-content>