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

<ion-content class="container-wrapper">
  <div class="d-md-none" *ngIf="hideRefreshBtn">
    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content>
      </ion-refresher-content>
    </ion-refresher>
  </div>

  <!-- Main container -->
  <div class="main-content d-flex  height-100 background-white overflow-hidden border-t-radius ">
    <!-- Left -->
    <div class="aside-left app-default-padding d-flex flex-grow-1 flex-column width-30 ">
      <!-- Header -->
      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
      <ion-toolbar >

        <div class="main-header">

          <div class="title-content width-100 d-flex justify-space-between">
            <div class="div-title flex-grow-1">
              <ion-label class="title font-25-em">Acções</ion-label>
            </div>
            
            <div class="div-icon">
              <button *ngIf="p.userPermission([p.permissionList.Actions.create])" title="Adicionar nova ação presidencial" class="btn-no-color" (click)="AddPublicationFolder()">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="icon-only" src='assets/images/icons-add.svg'></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="icon-only" src='assets/images/theme/gov/icons-add.svg'></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="icon-only" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-add.svg'></ion-icon>
              </button>
              <button title="Atualizar"  class="btn-no-color" (click)="refreshing()">
                <ion-icon slot="icon-only" class="title-icon font-awesome" name="reload-circle" title="Actualizar"></ion-icon>
              </button>
            </div>
          </div>

        </div>
      </ion-toolbar>
      <!-- Content -->

      <div class="aside overflow-y-auto d-flex  flex-wrap width-100">
        <ion-item-sliding disabled="{{showSlidingOptions}}" class="width-100"
          *ngFor="let evento of publicationsEventFolderList">
          <ion-item lines="none"
            class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding"
            [class.item-active]="evento.ProcessId == idSelected"
            (click)="goToPublicationsList(evento.ProcessId)">
            <div class="item-icon2">
              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'gov' && evento.ProcessId != idSelected " slot="end" src='assets/images/theme/gov/icons-nav-actions.svg'></ion-icon>
              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'gov' && evento.ProcessId == idSelected " slot="end" src='assets/images/theme/gov/icons-nav-actions-hover.svg'></ion-icon>
              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'doneIt' && evento.ProcessId != idSelected " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-nav-actions.svg'></ion-icon>
              <ion-icon class="font-40-em" *ngIf="ThemeService.currentTheme == 'doneIt' && evento.ProcessId == idSelected " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-nav-actions-hover.svg'></ion-icon>
            </div>
            <div class="item-content flex-grow-1">
              <p class="item-content-date font-13-em" [class.item-content-date-active]="evento.ProcessId == idSelected">{{getDate(evento.DateBegin)}}</p>
              <p class="item-content-title font-15-em" [class.item-content-title-active]="evento.ProcessId == idSelected">{{evento.Description}}</p>
            </div>
          </ion-item>
          <ion-item-options class="members-options" side="end">
            <ion-item-option *ngIf="p.userPermission([p.permissionList.Actions.edit])" class="edit-option" (click)="editAction(evento.ProcessId)">
              <button class="btn-no-color">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="edit" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="edit" slot="end" src="assets/images/theme/gov/icons-edit.svg" ></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="edit" slot="end" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-edit.svg" ></ion-icon>

              </button>
            </ion-item-option>
            <ion-item-option *ngIf="p.userPermission([p.permissionList.Actions.delete])" class="delete-option" (click)="deleteAction(evento.ProcessId)">
              <button class="btn-no-color">
                <ion-icon class="delete"  name="trash-sharp"></ion-icon>
              </button>
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </div>
      <!-- Sart Skeleton -->
      <div *ngIf="showLoader && publicationsEventFolderList.length == 0">
        <ion-item-sliding disabled="{{showSlidingOptions}}" class="width-100">
          <ion-item lines="none"
            class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
              <div class="item-icon cursor-pointer">
                <ion-icon slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
              </div>
              <div class="item-content flex-grow-1 cursor-pointer">
                <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
                <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
              </div>
            </ion-item>
            <ion-item lines="none"
            class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
              <div class="item-icon cursor-pointer">
                <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
              </div>
              <div class="item-content flex-grow-1 cursor-pointer">
                <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
                <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
              </div>
            </ion-item>
            <ion-item lines="none"
            class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
              <div class="item-icon cursor-pointer">
                <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
              </div>
              <div class="item-content flex-grow-1 cursor-pointer">
                <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
                <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
              </div>
            </ion-item>
            <ion-item lines="none"
            class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
              <div class="item-icon cursor-pointer">
                <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
              </div>
              <div class="item-content flex-grow-1 cursor-pointer">
                <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
                <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
              </div>
            </ion-item>
        </ion-item-sliding>
        <ion-item-sliding disabled="{{showSlidingOptions}}" class="width-100">
          <ion-item lines="none"
            class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
            <div class="item-icon2">
              <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
            </div>
            <div class="item-content flex-grow-1">
              <ion-label>
                <p class="item-content-date"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
              </ion-label>
            </div>
          </ion-item>
          <ion-item lines="none"
            class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
            <div class="item-icon2">
              <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
            </div>
            <div class="item-content flex-grow-1">
              <ion-label>
                <p class="item-content-date"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
              </ion-label>
            </div>
          </ion-item>
          <ion-item lines="none"
            class="item cursor-pointer width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
            <div class="item-icon2">
              <ion-icon class="font-40-rem" slot="end" src='assets/icon/icons-actions-grey.svg'></ion-icon>
            </div>
            <div class="item-content flex-grow-1">
              <ion-label>
                <p class="item-content-date"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
                <p class="item-content-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
              </ion-label>
            </div>
          </ion-item>
        </ion-item-sliding>
      </div>
     <!--  End Skeleton -->
    </div>

    <!-- Right -->
    <div class="content content-right d-none flex-grow-1 flex-column ">

      <div class="width-100 height-100 d-flex align-center justify-center"
        *ngIf="(
          desktopComponent.showViewPublication == false &&
          desktopComponent.showAddNewPublication == false &&
          desktopComponent.showPublicationDetail == false &&
          desktopComponent.showAddActions == false &&
          desktopComponent.showEditActions == false
        )"><div>Nenhuma ação presidencial selecionada</div></div>

      <!-- View Publication -->
      <app-view-publications
        *ngIf="desktopComponent.showViewPublication"
        [folderId]="folderId"
        class="height-100 d-flex flex-column overflow-hidden flex-grow-1"
        (addNewPublication)="addNewPublication($event)"
        (editPublication)="editPublication($event)"
        (openPublicationDetails)="openPublicationDetails($event)"
        (goBacktoPublicationDetails)="goBacktoPublicationDetails()"
        (goBackToViewPublications)="goBackToViewPublications()"
        (closeDesktopComponent)="closeDesktopComponent($event)"
        (getActions)="getActions()"
      >
      </app-view-publications>

      <app-new-publication
        *ngIf="desktopComponent.showAddNewPublication"
        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
        [folderId]="folderId"
        [publicationType]="publicationType"
        [publicationId]="publicationId"

        (closeDesktopComponent)="closeDesktopComponent($event)"
        (goBacktoPublicationDetails)="goBacktoPublicationDetails()"
        (goBackToViewPublications)="goBackToViewPublications()"
        (getActions)="getActions()"
      >
      </app-new-publication>

      <app-publication-detail-shared
        *ngIf="desktopComponent.showPublicationDetail"
        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
        [publicationId]="publicationId"
        [folderId]="folderId"
        (addNewPublication)="addNewPublication($event)"
        (closeDesktopComponent)="closeDesktopComponent($event)"
        (goBacktoPublicationDetails)="goBacktoPublicationDetails()"
        (goBackToViewPublications)="goBackToViewPublications()"
        (getActions)="getActions()"
      ></app-publication-detail-shared>

      <app-new-action
        *ngIf="desktopComponent.showAddActions"
        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
        (closeDesktopComponent)="closeDesktopComponent($event)"
        (getActions)="getActions()"
      ></app-new-action>

      <app-edit-action
        *ngIf="desktopComponent.showEditActions"
        [folderId]="folderId"
        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
        (closeDesktopComponent)="closeDesktopComponent($event)"
        (updateDesktopComponent)="updateDesktopComponent($event)"
        (getActions)="getActions()"
      >
      </app-edit-action>

    </div>

  </div>

</ion-content>