doneit-web/src/app/shared/gabinete-digital/all-processes/all-processes.page.html

<ion-header class="ion-no-border">
  <!-- <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar> -->
  <div class="title">
    <div class="thetitle"><ion-label >Todas as tarefas</ion-label></div>

    <div class="theicon">
      <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" >
              Novos
            </mat-option>
  
            <mat-option value="Lidos" >
              Lidos
            </mat-option>
  
            <mat-option value="Não lidos" >
              Não lidos
            </mat-option>
  
            <mat-option value="OverdueTasks">
              Em atraso
            </mat-option>

            <mat-option value="Todos" >
              Todos
            </mat-option>
  
          </mat-select>
        </mat-form-field>
      </div>
      <!-- <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>

  <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="overflow-y-auto height-100 width-100">

    <div  *ngIf="TaskService.AllProcess.length >= 0">
      <ion-item-sliding class="overflow-y-auto height-100">
        <div class="listview">
          <ion-list *ngIf="TaskService.AllProcess">
            <div
              class="item-hover ion-no-padding cursor-pointer"
              *ngFor = "let task of TaskService.AllProcess"
              (click)="goToProcess(task.SerialNumber || task.serialNumber, task.WorkflowName || task.workflowName|| task.workflowDisplayName , task.activityInstanceName)">
              <div class="item-wrapper" *ngIf="TaskService.filter(task, filterName)">
                <div class="item width-100 " >
                  <div class="item-top-detail">
                    <div class="item-subject d-flex">
  
                      <!-- {{ task.SerialNumber || task.serialNumber}} {{ task.WorkflowName || task.workflowName || task.workflowDisplayName }} {{ task.activityInstanceName }} -->
                      
                      <ion-label [class.gb-seen]="TaskService.seen(task)">{{ task.Folio || task.Subject || task.workflowInstanceDataFields.Subject}}</ion-label>
                      <span class="dead-line ml-10" *ngIf="TaskService.deadlineIsToday(task.Deadline || task.deadline)">Para hoje</span>
                      <span class="new-task ml-10" *ngIf="TaskService.lessThen24Hours(task.TaskStartDate || task.taskStartDate)">Nova</span>
                    </div>
                    <div *ngIf="task.DocumentsQty != 0" class="item-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>{{task.DocumentsQty || task.totalDocuments}}</label>
                    </div>
                  </div>
                  <div class="item-middle-detail">
                    <div class="item-remetente">
                      <ion-label *ngIf="task.Senders">{{task.Senders }}</ion-label>
                      <ion-label *ngIf="task.workflowInstanceDataFields">{{ task.workflowInstanceDataFields.Sender }}</ion-label>
                    </div>
                  </div>
                  <div *ngIf="task.Agenda" class="item-middle-detail">
                    <div class="item-remetente">
                      <ion-label>{{task.customDate}}</ion-label>
                    </div>
                  </div>
                  <div *ngIf="task.Agenda" class="item-middle-detail-extra">
                    <div class="item-middle-detail-extra-text">
                      <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial PR' || task.WorkflowName == 'Agenda Pessoal PR'">
                        <!-- Agenda {{task.Agenda}} do Presidente da República -->
                        Agenda {{task.Agenda}} do Titular
                      </ion-label>
                      <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial MDGPR' || task.WorkflowName == 'Agenda Pessoal MDGPR'">
                        A sua agenda {{task.Agenda}}
                      </ion-label>
                    </div>
                  </div>
                  <div class="item-bottom-detail d-flex align-items-center">
                    <div class="item-workflow">
                      <span class="label">{{task.activityInstanceName}}</span>
                    </div>
                    <div class="item-date">
                      <ion-label>{{ task.CreateDate || task.taskStartDate || task.TaskStartDate  | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </ion-list>
        </div>
      </ion-item-sliding>
    </div>

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

    <div *ngIf="TaskService.showLoader && TaskService.AllProcess.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>