doneit-web/src/app/shared/publication/view-publications/view-publications.page.html

<ion-header class="ion-no-border">
  <div class="main-header">
    <div class="title-content d-flex flex-end">
    <!--   <div class="back-icon" (click)="goBack()">
        <ion-icon  slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
      </div> -->
      <div class="div-title flex-grow-1">
        <ion-label class="title">{{item.Description}}</ion-label>
        <p class="item-content-detail">{{item.Detail}}</p>
        <p class="item-content-date">{{item.DateBegin}}</p>
      </div>
      <div class="actions-icon">
       <!--  <ion-icon (click)="AddPublication('1',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
        <ion-icon (click)="AddPublication('2',item.ProcessId)" src='assets/images/icons-add.svg'></ion-icon>
        <ion-icon (click)="doRefresh($event)" class="title-icon" name="reload-circle"></ion-icon>
      </div>
    </div>
  </div>
</ion-header>

<ion-content>
  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <div class="main-container px-20">
    <ion-list>
      <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
      <div class="post-item  d-md-block mb-10"
        *ngFor="let publication of publicationList"
        (click)="viewPublicationDetail(publication.DocumentId)">
        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100">
          <img src="{{publication.FileBase64}}" alt="image">
        </div>
        <div *ngIf="publication.FileBase64.length < 30" class="mb-10 post-img">
          <img src="/assets/icon/icon-no-image.svg" alt="image">
        </div>
        <div class="post-content px-20 width-md-100 ">
          <div class="post-title-time">
            <div class="post-title">
              <ion-label>{{publication.Title}}</ion-label>
            </div>
            <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</div>
          </div>
          <div class="post-description">
            <p>{{publication.Message}}</p>
          </div>
        </div>
      </div>
      <div *ngIf="!publicationList">
        <p>{{error}}</p>
      </div>
      <div hidden *ngIf="!publicationList" class="post-item">
        <div class="post-img">
          <img src="/assets/icon/icon-no-image.svg" alt="image">
        </div>
        <div class="post-content">
          <div class="post-title-time">
            <div class="post-title">
              <ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
            </div>
            <div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
          </div>
          <div class="post-description">
            <p><ion-skeleton-text animated></ion-skeleton-text></p>
            <p><ion-skeleton-text animated></ion-skeleton-text></p>
          </div>
        </div>
        <div class="post-img">
          <img src="/assets/icon/icon-no-image.svg" alt="image">
        </div>
        <div class="post-content">
          <div class="post-title-time">
            <div class="post-title">
              <ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
            </div>
            <div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
          </div>
          <div class="post-description">
            <p><ion-skeleton-text animated></ion-skeleton-text></p>
            <p><ion-skeleton-text animated></ion-skeleton-text></p>
          </div>
        </div>
      </div>
    </ion-list>
  </div>    
</ion-content>