mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Peter Maquiran
241 lines
13 KiB
HTML
241 lines
13 KiB
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>
|