doneit-web/src/app/pages/publications/view-publications/view-publications.page.html

<ion-header class="ion-no-border">
  <app-header > </app-header>
</ion-header>

<ion-header class="ion-no-border">
  <!-- <ion-toolbar class="bg-blue"> -->
  <div class="main-header">
    <div class="title-content d-flex width-100">
      <div class="back-icon cursor-pointer" (click)="goBack()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  slot="end" src='assets/images/theme/gov/icons-calendar-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 | date: 'dd-MM-yy | HH:mm'}}</p>
      </div>
      <div *ngIf="p.userPermission([p.permissionList.Actions.createPost])" class="actions-icon cursor-pointer" (click)="AddPublication('2',item.ProcessId)">
       <!--  <ion-icon (click)="AddPublication('1',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-add.svg'></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-add.svg'></ion-icon>
      </div>
    </div>
  </div>
  <!-- </ion-toolbar> -->
</ion-header>

<ion-content class="background-white">
  <!-- <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 background-white height-100 overflow-y-auto">
   <ion-content>
      <ion-card *ngFor="let publication of getpublication let i = index"
      (click)="goToPublicationDetail(publication.DocumentId)"
      >
      <ion-card-content>
        <div  class="post-img">
          <img [lazyLoad]="publication.FileBase64">
        </div>
        <div class="post-content px-20">
          <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 | HH:mm'}}</div>
          </div>
          <div class="post-description">
            <p>{{publication.Message}}</p>
          </div>
        </div>
      </ion-card-content>
      </ion-card>
    </ion-content>
    <!-- <ion-list>
      <div class="post-item cursor-pointer"
        *ngFor="let publication of getpublication"
        (click)="goToPublicationDetail(publication.DocumentId)"
      >

          <div  class="post-img">
            <img [defaultImage]=defaultImage [lazyLoad]="publication.FileBase64">

          <ng-template #imageLoaded>
            <div *ngIf="publication.FileBase64.length > 30" class="post-img">
              <img [defaultImage]=defaultImage [lazyLoad]="publication.FileBase64">
            </div>
          </ng-template>
        </div>
        <div class="post-content px-20">
          <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 | HH:mm'}}</div>
          </div>
          <div class="post-description">
            <p>{{publication.Message}}</p>
          </div>
        </div>
      </div>
      <div *ngIf="showLoader" class="post-item">
        <div class="post-img">
          <img src="/assets/icon/icon-no-image.svg" alt="image">
        </div>
        <div class="post-content px-20">
          <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 px-20">
          <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>