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

<ion-header class="ion-no-border">
  <app-header></app-header>
</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>

  <!-- 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-toolbar >
          <div class="main-header">
          <div class="title-content d-flex justify-space-between">
            <div class="div-title flex-grow-1">
              <ion-label class="title ">Acções Presidenciais</ion-label>
            </div>
            <div class="div-icon">
              <button class="btn-no-color" (click)="AddPublicationFolder()">
                <ion-icon  slot="icon-only" src='assets/images/icons-add.svg'></ion-icon>
              </button>
              <button *ngIf="hideRefreshBtn" class="btn-no-color" (click)="doRefresh($event)">
                <ion-icon slot="icon-only" class="title-icon" 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-list class="width-100"> -->
          <ion-item-sliding class="width-100" 
          *ngFor="let viagem of publicationsTravelFolderList">
            <ion-item class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
              <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-icon cursor-pointer">
                  <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
                </div>
                <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-content flex-grow-1 cursor-pointer">
                    <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
                    <p class="item-content-title my-10">{{viagem.Description}}</p>
                    <p class="item-content-detail my-5">{{viagem.Detail}}</p>
                </div>
                <div (click)="openOptions(viagem.ProcessId)" class="item-options d-none cursor-pointer" autoHide="false">
                  <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
                </div>
            </ion-item>
            <ion-item-options class="members-options" side="end">
              <!-- <ion-item-option (click)="editAction(viagem.ProcessId)"> 
                <button class="btn-no-color">
                  <ion-icon class="edit" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
                </button> 
              </ion-item-option> -->
              <ion-item-option (click)="deleteAction(viagem.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>
        <!-- </ion-list> -->
        <!-- <div class="item width-100 d-flex" 
          *ngFor="let viagem of publicationsTravelFolderList">
            <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-icon cursor-pointer">
              <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
            </div>
            <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-content flex-grow-1 cursor-pointer">
                <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
                <p class="item-content-title my-10">{{viagem.Description}}</p>
                <p class="item-content-detail my-5">{{viagem.Detail}}</p>
            </div>
            <div (click)="openOptions(viagem.ProcessId)" class="item-options d-none cursor-pointer" autoHide="false">
              <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
            </div>
        </div> -->
        <ion-item-sliding class="item width-100"
        *ngFor="let evento of publicationsEventFolderList">
          <ion-item class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding"
            (click)="viewPublications(evento)">
            <div class="item-icon2">
              <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
            </div>
            <div class="item-content flex-grow-1">
              <ion-label>
                <p class="item-content-date">{{evento.DateBegin}}</p>
                <p class="item-content-title">{{evento.Description}}</p>
              </ion-label>
            </div>
            <div (click)="openOptions(evento.ProcessId)" class="item-options d-none cursor-pointer" autoHide="false">
              <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
            </div>
          </ion-item>
          <ion-item-options class="members-options" side="end">
            <ion-item-option color="danger"><ion-icon name="delete"></ion-icon> Apagar</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
        <!-- <div class="item width-100 d-flex"
          *ngFor="let evento of publicationsEventFolderList"
          (click)="viewPublications(evento)">
          <div class="item-icon2">
            <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
          </div>
          <div class="item-content flex-grow-1">
            <ion-label>
              <p class="item-content-date">{{evento.DateBegin}}</p>
              <p class="item-content-title">{{evento.Description}}</p>
            </ion-label>
          </div>
          <div (click)="openOptions(evento.ProcessId)" class="item-options d-none cursor-pointer" autoHide="false">
            <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
          </div>
        </div> -->
      </div>  
    </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)"
        (openPublicationDetails)="openPublicationDetails($event)"
        (goBacktoPublicationDetails)="goBacktoPublicationDetails()"
        (goBackToViewPublications)="goBackToViewPublications()"
        (closeDesktopComponent)="closeDesktopComponent($event)"
      >
      </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()"
      >
      </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()"
      ></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)"
      ></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)"
      >
      </app-edit-action>


    </div>

  </div>

  
</ion-content>