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

<ion-header class="ion-no-border">
  <div class="title">
    <div class="thetitle"><ion-label >Diplomas</ion-label></div>
    <div class="theicon">
      <button class="btn-no-color" (click)="doRefresh($event)">
        <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
      </button>
    </div>
  </div>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="validar">
        Diplomas por validar
      </ion-segment-button>
      <ion-segment-button value="assinados">
        Diplomas assinados PR
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</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="width-100" [ngSwitch]="segment">
    <div *ngIf="diplomasList">
      <ion-list *ngSwitchCase="'validar'">
        <!-- *ngFor = "let task of parecerList; let i = index"
        (click)="viewExpedientDetail(task.SerialNumber)" -->
        <ion-item 
            class="expediente ion-no-padding cursor-pointer"  
            *ngFor = "let task of diplomasList"
            (click)="viewPedidoDetail(task.SerialNumber)"
            >
            <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
            <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
              <div class="item width-100">
                <div class="exp-top-detail">
                  <div class="exp-date">
                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
                  </div>
                  <div class="exp-remetente">
                    <ion-label>{{task.Remetente}}</ion-label>
                  </div>
                  <div class="exp-icon">
                    <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                    <label></label>
                  </div>
                </div>
                <div class="exp-bottom-detail">
                  <ion-label>{{ task.Folio }}</ion-label>
                </div>
              </div>
            </ion-item>
      </ion-list>

    </div>
    <div *ngIf="">
      <ion-list *ngSwitchCase="'assinados'">
        <ion-item 
            class="expediente ion-no-padding cursor-pointer"  
            *ngFor = "let task of diplomasList"
            (click)="viewPedidoDetail(task.SerialNumber)"
            >
              <div class="item width-100">
                <div class="exp-top-detail">
                  <div class="exp-date">
                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
                  </div>
                  <div class="exp-remetente">
                    <ion-label>{{task.Remetente}}</ion-label>
                  </div>
                  <div class="exp-icon">
                    <ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                    </ion-menu-button> 
                  </div>
                </div>
                <div class="exp-bottom-detail">
                  <ion-label>{{ task.Folio }}</ion-label>
                </div>
              </div>
            </ion-item>
      </ion-list>
    </div>
  </div>
  <div *ngIf="!diplomasList">
  
    <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>
</ion-content>