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

<ion-header  class="ion-no-border">
  <ion-toolbar class="header-toolbar">
    <div class="main-header">
      <div class="title-content">
        <app-btn-modal-dismiss></app-btn-modal-dismiss>
        <div class="middle">
          <ion-label class="title">Gabinete Digital</ion-label>
        </div>
      </div>
    </div>
  </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">{{task.Remetente}}</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 
          class="expediente" 
          lines="none"  
          *ngFor = "let task of taskslist"
          (click)="viewExpedientDetail(task.SerialNumber)"
          >
          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
            <div class="Rectangle">
              <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-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>