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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/gabinete-digital"></ion-back-button>
    </ion-buttons>
    <ion-title>Gabinete Digital</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment">
      <ion-segment-button value="expediente">
        Expediente
      </ion-segment-button>
      <ion-segment-button value="pendentes">
        Pendentes
      </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 [ngSwitch]="segment" *ngIf="taskslist">
    <ion-list *ngSwitchCase="'expediente'">
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" *ngFor = "let task of taskslist" >
            <div class="div-content-expediente">
              <ion-item lines="none"  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]">
                <ion-icon slot="end" name="calendar"></ion-icon>
                 <h3>{{ task.Folio }}</h3>
              </ion-item>
              <p><span class="span-left">OAPR - GTI</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
              <!-- <p><span class="span-left">{{ task.Senders }}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p> -->
            </div>
          </ion-item>
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
    <ion-list *ngSwitchCase="'pendentes'">
      <ion-item-group>
        <ion-item-sliding>
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
  </div>
  <div *ngIf="!taskslist">
  
    <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>