From b9028cf296fb38ed932a80affe749b55222f20ee Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Thu, 16 Dec 2021 19:11:30 +0100
Subject: [PATCH] add skeleton in presidencial actions

---
 .../pages/publications/publications.page.html | 96 +++++++++++++++++--
 .../pages/publications/publications.page.ts   |  7 +-
 src/assets/icon/icons-actions-grey.svg        |  5 +
 src/environments/environment.prod.ts          |  2 +-
 src/environments/environment.ts               |  2 +-
 5 files changed, 100 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/icon/icons-actions-grey.svg

diff --git a/src/app/pages/publications/publications.page.html b/src/app/pages/publications/publications.page.html
index 049292745..860ddbca9 100644
--- a/src/app/pages/publications/publications.page.html
+++ b/src/app/pages/publications/publications.page.html
@@ -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 -->
diff --git a/src/app/pages/publications/publications.page.ts b/src/app/pages/publications/publications.page.ts
index fb589b982..4ff0d213c 100644
--- a/src/app/pages/publications/publications.page.ts
+++ b/src/app/pages/publications/publications.page.ts
@@ -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) {
diff --git a/src/assets/icon/icons-actions-grey.svg b/src/assets/icon/icons-actions-grey.svg
new file mode 100644
index 000000000..3daded799
--- /dev/null
+++ b/src/assets/icon/icons-actions-grey.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 34.5C26.023 34.5 31 33.523 31 28C31 22.477 26.523 18 21 18C15.477 18 11 22.477 11 28C11 33.523 14.977 34.5 20.5 34.5Z" stroke="#CCCCCC" stroke-width="2"/>
+<path d="M21 18C24.3137 18 27 15.3137 27 12C27 8.68629 24.3137 6 21 6C17.6863 6 15 8.68629 15 12C15 15.3137 17.6863 18 21 18Z" stroke="#CCCCCC" stroke-width="2"/>
+<path d="M12.6574 33.0924L26.3428 19.9077L12.6574 33.0924ZM29.157 23.3429L17.8433 34.6566L29.157 23.3429Z" stroke="#CCCCCC" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 76b20ba47..a8ccf00ce 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,6 +1,6 @@
 export const environment = {
   production: true,
-  apiURL: 'https://tabularium.dyndns.info/GabineteDigital.Services/V5/api/',
+  apiURL: 'https://gabinetedigital.dyndns.info/GabineteDigital.Services/V5/api/',
   apiChatUrl: 'https://www.tabularium.pt/api/v1/',
   domain: 'gabinetedigital.local',
   defaultuser: '',
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index f6b819510..98e1871b5 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/V5/api/',
+  apiURL: 'https://gabinetedigital.dyndns.info/GabineteDigital.Services/V5/api/',
   // apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/V4/api/',
   apiChatUrl: 'https://www.tabularium.pt/api/v1/',
   /* apiChatUrl: 'http://chat.gabinetedigital.local:3000/api/v1/', */