peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-20 21:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

add skeleton in presidencial actions

Browse Source
This commit is contained in:
tiago.kayaya
2021-12-16 19:11:30 +01:00
parent 1358c6ef9a
commit b9028cf296
5 changed files with 100 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/publications/publications.page.html
+89 -7
View File
@@ -38,7 +38,7 @@
</ion-toolbar>
<!-- Content -->
<div class="aside overflow-y-auto d-flex flex-wrap width-100">
<div *ngIf="!skeletonLoader" class="aside overflow-y-auto d-flex flex-wrap width-100">
<!-- <ion-list class="width-100"> -->
<ion-item-sliding disabled="{{showSlidingOptions}}" class="width-100"
*ngFor="let viagem of publicationsTravelFolderList">
@@ -57,9 +57,6 @@
<p class="item-content-title my-10" [class.item-content-title-active]="viagem.ProcessId == idSelected">{{viagem.Description}}</p>
<p class="item-content-detail my-5" [class.item-content-detail-active]="viagem.ProcessId == idSelected">{{viagem.Detail}}</p>
</div>
<!-- <div (click)="openOptions(viagem.ProcessId)" class="item-options d-none cursor-pointer" [class.item-options-active]="viagem.ProcessId == idSelected" autoHide="false">
<i class="fas fa-ellipsis-v"></i>
</div> -->
</ion-item>
<ion-item-options class="members-options" side="end">
<ion-item-option class="edit-option" (click)="editAction(viagem.ProcessId)">
@@ -93,9 +90,6 @@
<p class="item-content-title" [class.item-content-title-active]="evento.ProcessId == idSelected">{{evento.Description}}</p>
</ion-label>
</div>
<!-- <div (click)="openOptions(evento.ProcessId)" class="item-options d-none cursor-pointer" [class.item-options-active]="evento.ProcessId == idSelected" autoHide="false">
<i class="fas fa-ellipsis-v"></i>
</div> -->
</ion-item>
<ion-item-options class="members-options" side="end">
<ion-item-option class="edit-option" (click)="editAction(evento.ProcessId)">
@@ -113,6 +107,94 @@
</ion-item-options>
</ion-item-sliding>
</div>
<!-- Sart Skeleton -->
<div *ngIf="showLoader">
<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/images/theme/gov/icons-plane-active-hover.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 slot="end" src='assets/images/theme/gov/icons-plane-active-hover.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 slot="end" src='assets/images/theme/gov/icons-plane-active-hover.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 slot="end" src='assets/images/theme/gov/icons-plane-active-hover.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 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 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 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 -->
src/app/pages/publications/publications.page.ts
+4 -3
View File
@@ -59,6 +59,7 @@ export class PublicationsPage implements OnInit {
hideRefreshBtn = true;
showSlidingOptions = true;
idSelected: string;
skeletonLoader:boolean;
constructor(
private router: Router,
@@ -74,6 +75,7 @@ export class PublicationsPage implements OnInit {
) {
this.months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
this.days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
this.skeletonLoader = true;
}
ngOnInit() {
@@ -140,6 +142,7 @@ export class PublicationsPage implements OnInit {
getActions() {
this.showLoader = true;
this.skeletonLoader = true;
this.publications.GetPublicationFolderList().subscribe(res => {
console.log('accoes', res)
@@ -168,15 +171,13 @@ export class PublicationsPage implements OnInit {
this.publicationsTravelFolderList.push(folder);
}
this.showLoader = false;
/* this.publicationEventFolderStorage.reset(this.publicationsEventFolderList)
this.publicationTravelFolderService.reset(this.publicationsTravelFolderList) */
});
}, (error) => {
this.getFromDB();
});
this.skeletonLoader = false;
}
addActionToDB(folder) {