doneit-web/src/app/shared/gabinete-digital/diplomas/diplomas.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>Diplomas</ion-label></div>
    <div class="theicon d-flex align-center">
      <!-- <div>
        <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
          <div (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="d-flex">
            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-35-rem" src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-35-rem" src='assets/images/icons-search.svg'></ion-icon>
            <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" src='assets/images/theme/gov/icons-search.svg'></ion-icon>
          </div>
          <button title="Fechar" class="btn-no-color d-flex" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' " class="font-35-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-35-rem" name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
          </button>

          <div *ngIf="showSearch">
            <div class="d-flex search-input-container ml-10 justify-between" *ngIf="showSearch">

              <div class="input-text d-flex ion-align-items-center">
                <ion-input (keyup.enter)="basicSearch()" [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch()"
                  class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input>
              </div>

              <div (click)="basicSearch()"  class="d-flex align-center icon">

                <ion-icon  class="icon-z" slot="end" src="assets/images/theme/gov/search.svg"></ion-icon>
    
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <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>

      <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>
      </div>
      <!-- <button title="Atualizar" 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-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">
        <span *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">
          Diplomas assinados PR
        </span>
        <span *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])">
          Diplomas
        </span>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>

  <div class="main-container width-100 overflow-y-auto height-100" [ngSwitch]="segment">

    <div *ngIf="listDiplomasPorValidar.length >= 1 && p.userPermission([p.permissionList.Gabinete.md_tasks])">
      <ion-list *ngSwitchCase="'validar'">
        <div class=" item-hover ion-no-padding ion-no-margin cursor-pointer" *ngFor="let task of listDiplomasPorValidar"
          (click)="goToDiploma(task.SerialNumber)">
          <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>
        </div>
      </ion-list>

    </div>
    <div *ngIf="listDiplomasAssinadosPR.length >= 1">
      <ion-list *ngSwitchCase="'assinados'">
        <div class=" ion-no-padding ion-no-margin cursor-pointer" *ngFor="let task of listDiplomasAssinadosPR"
          (click)="goToDiploma(task.SerialNumber)">
          <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.activityInstanceName}}</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 *ngSwitchCase="'validar'" class="centered-div">
      <div *ngIf=" listDiplomasPorValidar.length == 0 && !skeletonLoader"
        class="empty-list d-flex height-100 align-center justify-content-center">
        <span>Lista vazia</span>
      </div>
    </div>

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


    <div *ngSwitchCase="'validar'">

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

    <div *ngSwitchCase="'assinados'">

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

</ion-content>