From 9191fb381192b77dbc7beae25901168bc460fa9e Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Wed, 27 Apr 2022 17:27:01 +0100
Subject: [PATCH] improve

---
 .../gabinete-digital.page.html                | 460 +++++++++++-------
 .../gabinete-digital.page.scss                |  82 +++-
 .../gabinete-digital/gabinete-digital.page.ts |   9 +-
 3 files changed, 359 insertions(+), 192 deletions(-)

diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index 27cdc2ed7..b2596bdea 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -17,7 +17,7 @@
           <div class="title">
             <ion-label>Gabinete Digital</ion-label>
           </div>
-          <button title="Atualizar" *ngIf="hideRefreshBtn" class="btn-no-color btn-refresh" (click)="doRefresh($event)">
+          <button  title="Atualizar" *ngIf="hideRefreshBtn && loadCount" class="btn-no-color btn-refresh" (click)="doRefresh($event)">
             <ion-icon class="title-icon font-awesome" name="reload-circle"></ion-icon>
           </button>
           <div *ngIf="!hideRefreshBtn" class="title-icons">
@@ -31,221 +31,307 @@
               </ion-segment>
           </div>
         </div>
-        <div [ngSwitch]="segmentVista" class="overflow-y-auto">
+        <div  [ngSwitch]="segmentVista" class="overflow-y-auto">
           <!-- This is the list view -->
 
           <div *ngSwitchCase="'listview'">
             <ion-item-sliding>
-            <div class="listview">
-              <ion-list *ngIf="allProcessesList">
-                <div
-                  class="item-wrapper box-hover ion-no-padding cursor-pointer"
-                  *ngFor = "let task of allProcessesList"
-                  (click)="goToProcess(task.SerialNumber, task.WorkflowName, task.activityInstanceName)">
-                  <div class="item width-100">
-                    <div class="item-top-detail">
-                      <div class="item-subject">
-                        <ion-label>{{ task.Folio }}</ion-label>
+              <div class="listview" >
+                <ion-list *ngIf="allProcessesList">
+                  <div
+                    class="item-wrapper box-hover ion-no-padding cursor-pointer"
+                    *ngFor = "let task of allProcessesList"
+                    (click)="goToProcess(task.SerialNumber, task.WorkflowName, task.activityInstanceName)">
+                    <div class="item width-100">
+                      <div class="item-top-detail">
+                        <div class="item-subject">
+                          <ion-label>{{ task.Folio }}</ion-label>
+                        </div>
+                        <div *ngIf="task.DocumentsQty != 0" class="item-icon">
+                          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
+                          <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
+                          <label>{{task.DocumentsQty}}</label>
+                        </div>
                       </div>
-                      <div *ngIf="task.DocumentsQty != 0" class="item-icon">
-                        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
-                        <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
-                        <label>{{task.DocumentsQty}}</label>
+                      <div class="item-middle-detail">
+                        <div class="item-remetente">
+                          <ion-label>{{task.Senders}}</ion-label>
+                        </div>
                       </div>
-                    </div>
-                    <div class="item-middle-detail">
-                      <div class="item-remetente">
-                        <ion-label>{{task.Senders}}</ion-label>
+                      <div *ngIf="task.Agenda" class="item-middle-detail">
+                        <div class="item-remetente">
+                          <ion-label>{{task.customDate}}</ion-label>
+                        </div>
                       </div>
-                    </div>
-                    <div *ngIf="task.Agenda" class="item-middle-detail">
-                      <div class="item-remetente">
-                        <ion-label>{{task.customDate}}</ion-label>
+                      <div *ngIf="task.Agenda" class="item-middle-detail-extra">
+                        <div class="item-middle-detail-extra-text">
+                          <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial PR' || task.WorkflowName == 'Agenda Pessoal PR'">
+                            Agenda {{task.Agenda}} do Presidente da República
+                          </ion-label>
+                          <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial MDGPR' || task.WorkflowName == 'Agenda Pessoal MDGPR'">
+                            A sua agenda {{task.Agenda}}
+                          </ion-label>
+                        </div>
                       </div>
-                    </div>
-                    <div *ngIf="task.Agenda" class="item-middle-detail-extra">
-                      <div class="item-middle-detail-extra-text">
-                        <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial PR' || task.WorkflowName == 'Agenda Pessoal PR'">
-                          Agenda {{task.Agenda}} do Presidente da República
-                        </ion-label>
-                        <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial MDGPR' || task.WorkflowName == 'Agenda Pessoal MDGPR'">
-                          A sua agenda {{task.Agenda}}
-                        </ion-label>
-                      </div>
-                    </div>
-                    <div class="item-bottom-detail d-flex align-items-center">
-                      <div class="item-workflow">
-                        <span class="label">{{task.activityInstanceName}}</span>
-                      </div>
-                      <div class="item-date">
-                        <ion-label>{{ task.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
+                      <div class="item-bottom-detail d-flex align-items-center">
+                        <div class="item-workflow">
+                          <span class="label">{{task.activityInstanceName}}</span>
+                        </div>
+                        <div class="item-date">
+                          <ion-label>{{ task.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </ion-list>
-            </div>
-          </ion-item-sliding>
+                </ion-list>
+              </div>
+            </ion-item-sliding>
           </div>
 
           <!-- This is the box view -->
-          <div *ngSwitchCase="'boxview'" class="aside overflow-y-auto d-flex  flex-wrap width-100 height-100">
-
-            <div *ngIf="hideInMobile" (click)="openAllProcessesPage()" [class.active]="selectedElement == 'allProcessesTag'"  class="box-hover exp-card d-flex flex-column" >
-              <div class="d-flex justify-center">
-               <!--  <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon> -->
-                <fa-icon class="icon-selected" icon="align-justify"></fa-icon>
-              </div>
-              <p class="text-center exp-card-title ">Todas as tarefas</p>
-              <p class="text-center exp-card-content">{{ allProcessesList.length }} <span class="title1">Documentos</span></p>
-            </div>
-
-            <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openEventsToApprovePage();selectedElement='approval'" [class.active]="selectedElement == 'approval'"  class="box-hover exp-card d-flex flex-column">
-              <div class="d-flex justify-center">
-                <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title ">Eventos para Aprovação</p>
-              <p class="text-center exp-card-content">{{eventoaprovacaostore.countMd + eventoaprovacaostore.countPr}} <span class="title1">Documentos</span></p>
-            </div>
-
-            <div (click)="openExpedientListPage(); selectedElement='Correspondence'" [class.active]="selectedElement == 'Correspondence'" class="box-hover exp-card d-flex flex-column justify-center">
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-correspondencia.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia-hover.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title ">Expediente</p>
-              <p class="text-center exp-card-content">{{expedientegbstore.count}} <span class="title1">Documentos</span></p>
-            </div>
-
-            <!-- <div  [class.active]="selectedElement == 'Pending'" (click)="openPendentesPage(); selectedElement='Pending'" class="exp-card d-flex flex-column justify-center" > -->
-            <div  [class.active]="selectedElementF('Pending')" (click)="openPendentesPage(); selectedElement='Pending'" class="box-hover exp-card d-flex flex-column justify-center"  >
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-pendente.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente-hover.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente.svg"></ion-icon>
-              </div>
-              <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pendentes</p>
-              <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Meus Pendentes</p>
-              <p class="text-center exp-card-content"><span class="number">{{pendentesstore.count}} </span> <span class="title1">Documentos</span></p>
-            </div>
-
-            <div *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks]) || p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openDespachosPrPage(); selectedElement='DispatchesPr'" [class.active]="selectedElement == 'DispatchesPr'" class="box-hover exp-card d-md-flex flex-column justify-center" >
-              <div class="d-flex justify-center">
-                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">Despacho do Presidente da República</p>
-              <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])">Despachos criados por mim</p>
-              <p class="text-center exp-card-content">{{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
-            </div>
-
-            <div *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" [class.active]="selectedElement == 'Dispatches'" class="box-hover exp-card d-flex flex-column justify-center" (click)="openDespachosPage(); selectedElement='Dispatches'">
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title ">Despachos</p>
-              <p class="text-center exp-card-content">{{despachoStore.count}} <span class="title1">Documentos</span> </p>
-            </div>
-
-            <div (click)="openPedidosPage('parecer'); selectedElement='RequestsForOpinion'" [class.active]="selectedElement == 'RequestsForOpinion'" class="box-hover exp-card d-flex flex-column justify-center">
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-parecer.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'RequestsForOpinion' " src="assets/images/theme/gov/icons-expediente-parecer.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'RequestsForOpinion'" src="assets/images/theme/gov/icons-expediente-parecer-hover.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'RequestsForOpinion' " src="assets/images/theme/gov/icons-expediente-parecer.svg"></ion-icon>
-              </div>
-              <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pedidos de Parecer</p>
-              <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pedidos de Parecer solicitados por mim</p>
-              <p class="text-center exp-card-content">{{pedidosstore.countparecer}} <span class="title1">Documentos</span></p>
-            </div>
-
-            <div (click)="openPedidosPage('deferimento'); selectedElement = 'RequestForApproval'" [class.active]="selectedElement == 'RequestForApproval'" class="box-hover exp-card d-flex flex-column justify-center">
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento-hover.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
-              <p class="text-center exp-card-content">{{pedidosstore.countdeferimento}} <span class="title1">Documentos</span></p>
-            </div>
-
-
-            <!-- <div *ngIf="p.userRole(['MDGPR'])" (click)="openExpedientesPrPage(); selectedElement='ExpedientesPr'" [class.active]="selectedElement == 'ExpedientesPr'" class="exp-card-long justify-center width-100 white-background">
-              <div class="center-div">F
-                <div class="exp-card-icon">
-                  <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
-                </div>
-                <div class="exp-card-text">
-                  <p class="exp-card-title " *ngIf="loggeduser.Profile == mdgpr">Expediente Presidente</p>
-                  <p class="exp-card-title " *ngIf="loggeduser.Profile == pr">Expediente</p>
-                  <p class="exp-card-content"><span class="number">{{expedienteprstore.count}} </span> <span class="title1">Documentos</span> </p>
+          <div  *ngSwitchCase="'boxview'"  class="aside overflow-y-auto d-flex  flex-wrap width-100 height-100">
+            <div *ngIf="loadCount">
+              <div *ngIf="hideInMobile" (click)="openAllProcessesPage()" [class.active]="selectedElement == 'allProcessesTag'"  class="box-hover exp-card d-flex flex-column" >
+                <div class="d-flex justify-center">
+                 <!--  <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon> -->
+                  <fa-icon class="icon-selected" icon="align-justify"></fa-icon>
                 </div>
+                <p class="text-center exp-card-title ">Todas as tarefas</p>
+                <p class="text-center exp-card-content">{{ allProcessesList.length }} <span class="title1">Documentos</span></p>
+              </div>
+  
+              <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openEventsToApprovePage();selectedElement='approval'" [class.active]="selectedElement == 'approval'"  class="box-hover exp-card d-flex flex-column">
+                <div class="d-flex justify-center">
+                  <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title ">Eventos para Aprovação</p>
+                <p class="text-center exp-card-content">{{eventoaprovacaostore.countMd + eventoaprovacaostore.countPr}} <span class="title1">Documentos</span></p>
+              </div>
+  
+              <div (click)="openExpedientListPage(); selectedElement='Correspondence'" [class.active]="selectedElement == 'Correspondence'" class="box-hover exp-card d-flex flex-column justify-center">
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-correspondencia.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia-hover.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title ">Expediente</p>
+                <p class="text-center exp-card-content">{{expedientegbstore.count}} <span class="title1">Documentos</span></p>
+              </div>
+  
+              <!-- <div  [class.active]="selectedElement == 'Pending'" (click)="openPendentesPage(); selectedElement='Pending'" class="exp-card d-flex flex-column justify-center" > -->
+              <div  [class.active]="selectedElementF('Pending')" (click)="openPendentesPage(); selectedElement='Pending'" class="box-hover exp-card d-flex flex-column justify-center"  >
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-pendente.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente-hover.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente.svg"></ion-icon>
+                </div>
+                <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pendentes</p>
+                <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Meus Pendentes</p>
+                <p class="text-center exp-card-content"><span class="number">{{pendentesstore.count}} </span> <span class="title1">Documentos</span></p>
               </div>
-            </div> -->
 
-            <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openDespachosPrPage(); selectedElement='showDespachosPr'" [class.active]="selectedElement == 'showDespachosPr'" class="box-hover exp-card-long width-100 d-flex flex-column justify-center">
-              <div class="center-div">
-                <div class="exp-card-icon">
+
+              
+  
+              <div *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks]) || p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openDespachosPrPage(); selectedElement='DispatchesPr'" [class.active]="selectedElement == 'DispatchesPr'" class="box-hover exp-card d-md-flex flex-column justify-center" >
+                <div class="d-flex justify-center">
                   <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
-                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
-                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
-                  <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
                 </div>
-                <div class="exp-card-text">
-                  <p class="exp-card-title">Despacho do Presidente da República</p>
-                  <p class="text-center exp-card-content">{{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
+                <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">Despacho do Presidente da República</p>
+                <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])">Despachos criados por mim</p>
+                <p class="text-center exp-card-content">{{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
+              </div>
+  
+              <div *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" [class.active]="selectedElement == 'Dispatches'" class="box-hover exp-card d-flex flex-column justify-center" (click)="openDespachosPage(); selectedElement='Dispatches'">
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title ">Despachos</p>
+                <p class="text-center exp-card-content">{{despachoStore.count}} <span class="title1">Documentos</span> </p>
+              </div>
+  
+              <div (click)="openPedidosPage('parecer'); selectedElement='RequestsForOpinion'" [class.active]="selectedElement == 'RequestsForOpinion'" class="box-hover exp-card d-flex flex-column justify-center">
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-parecer.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'RequestsForOpinion' " src="assets/images/theme/gov/icons-expediente-parecer.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'RequestsForOpinion'" src="assets/images/theme/gov/icons-expediente-parecer-hover.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'RequestsForOpinion' " src="assets/images/theme/gov/icons-expediente-parecer.svg"></ion-icon>
+                </div>
+                <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pedidos de Parecer</p>
+                <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pedidos de Parecer solicitados por mim</p>
+                <p class="text-center exp-card-content">{{pedidosstore.countparecer}} <span class="title1">Documentos</span></p>
+              </div>
+  
+              <div (click)="openPedidosPage('deferimento'); selectedElement = 'RequestForApproval'" [class.active]="selectedElement == 'RequestForApproval'" class="box-hover exp-card d-flex flex-column justify-center">
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento-hover.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
+                <p class="text-center exp-card-content">{{pedidosstore.countdeferimento}} <span class="title1">Documentos</span></p>
+              </div>
+  
+  
+              <!-- <div *ngIf="p.userRole(['MDGPR'])" (click)="openExpedientesPrPage(); selectedElement='ExpedientesPr'" [class.active]="selectedElement == 'ExpedientesPr'" class="exp-card-long justify-center width-100 white-background">
+                <div class="center-div">F
+                  <div class="exp-card-icon">
+                    <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
+                  </div>
+                  <div class="exp-card-text">
+                    <p class="exp-card-title " *ngIf="loggeduser.Profile == mdgpr">Expediente Presidente</p>
+                    <p class="exp-card-title " *ngIf="loggeduser.Profile == pr">Expediente</p>
+                    <p class="exp-card-content"><span class="number">{{expedienteprstore.count}} </span> <span class="title1">Documentos</span> </p>
+                  </div>
+                </div>
+              </div> -->
+  
+              <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openDespachosPrPage(); selectedElement='showDespachosPr'" [class.active]="selectedElement == 'showDespachosPr'" class="box-hover exp-card-long width-100 d-flex flex-column justify-center">
+                <div class="center-div">
+                  <div class="exp-card-icon">
+                    <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
+                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
+                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
+                    <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
+                  </div>
+                  <div class="exp-card-text">
+                    <p class="exp-card-title">Despacho do Presidente da República</p>
+                    <p class="text-center exp-card-content">{{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
+                  </div>
                 </div>
               </div>
+  
+              <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openDiplomasPage('validar'); selectedElement='DiplomasPorValidar'" [class.active]="selectedElement == 'DiplomasPorValidar'" class="box-hover exp-card d-flex flex-column justify-center">
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-diploma.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title " *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas por Validar</p>
+                <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas por Assinar</p>
+                <p class="text-center exp-card-content">{{ deplomasStore.deplomasReviewCount }} <span class="title1">Documentos</span> </p>
+              </div>
+  
+              <div (click)="openDiplomasPage('assinados'); selectedElement='DiplomasAssinados'" [class.active]="selectedElement == 'DiplomasAssinados'" class="box-hover exp-card d-flex flex-column justify-center">
+                <div class="d-flex justify-center">
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-diplomas-assinados-presidente.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente-hover.svg"></ion-icon>
+                  <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title " *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas assinados PR</p>
+                <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" >Diplomas</p>
+                <p class="text-center exp-card-content">{{ deplomasStore.countDiplomasAssinadoListCount }} <span class="title1">Documentos</span></p>
+              </div>
+  
+              <div *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" (click)="openDiplomasAssinarPage(); selectedElement='DiplomasAssinar'" [class.active]="selectedElement == 'DiplomasAssinar'" class="box-hover exp-card d-flex flex-column justify-center">
+                <div class="d-flex justify-center">
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-diploma.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
+                  <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
+                </div>
+                <p class="text-center exp-card-title">Diplomas para Assinar</p>
+                <p class="text-center exp-card-content">{{ deplomasStore.diplomasListCount }} <span class="title1">Documentos</span></p>
+              </div>
             </div>
 
-            <div *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])" (click)="openDiplomasPage('validar'); selectedElement='DiplomasPorValidar'" [class.active]="selectedElement == 'DiplomasPorValidar'" class="box-hover exp-card d-flex flex-column justify-center">
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-diploma.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title " *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas por Validar</p>
-              <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas por Assinar</p>
-              <p class="text-center exp-card-content">{{ deplomasStore.deplomasReviewCount }} <span class="title1">Documentos</span> </p>
+            <div *ngIf="!loadCount" class="width-100">
+              
+              <ion-item-sliding  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-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-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-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-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  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-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-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-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-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>
             </div>
 
-            <div (click)="openDiplomasPage('assinados'); selectedElement='DiplomasAssinados'" [class.active]="selectedElement == 'DiplomasAssinados'" class="box-hover exp-card d-flex flex-column justify-center">
-              <div class="d-flex justify-center">
-                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-diplomas-assinados-presidente.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente-hover.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title " *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas assinados PR</p>
-              <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" >Diplomas</p>
-              <p class="text-center exp-card-content">{{ deplomasStore.countDiplomasAssinadoListCount }} <span class="title1">Documentos</span></p>
-            </div>
 
-            <div *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" (click)="openDiplomasAssinarPage(); selectedElement='DiplomasAssinar'" [class.active]="selectedElement == 'DiplomasAssinar'" class="box-hover exp-card d-flex flex-column justify-center">
-              <div class="d-flex justify-center">
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-diploma.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
-                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
-              </div>
-              <p class="text-center exp-card-title">Diplomas para Assinar</p>
-              <p class="text-center exp-card-content">{{ deplomasStore.diplomasListCount }} <span class="title1">Documentos</span></p>
-            </div>
 
           </div>
 
-      </div>
+        </div>
       </div>
 
       <!-- Aside right -->
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index 718ba383c..d43777b98 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -62,7 +62,6 @@ ion-segment-button{
     border-radius: 20px;
   }
   ion-item{
-    --ion-background-color:#dae3f3;
     margin-bottom: 10px;
     border-radius: 5px;
   }
@@ -155,8 +154,8 @@ ion-segment-button{
       user-select: none;
       background:  white;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-      width: 360px;
-      margin: 7px 20px;
+      width: 90%;
+      margin: 0px 7px;
       border-radius: 15px;
       padding: 7px;
       border:1px solid white;
@@ -440,7 +439,7 @@ ion-list{
       }
       .exp-card-long{
         //display: none;
-        width: 100% !important;
+        width: 90% !important;
         cursor: pointer;
         user-select: none;
         background:  white;
@@ -600,3 +599,78 @@ ion-list{
   color: white !important;
   fill: red !important;
 }
+
+ion-item.item {
+  background-color: white !important;
+}
+
+.item{
+  width: 100% !important;
+  padding: 0px 20px 0 20px !important;
+  border-bottom: 1px solid #ebebeb !important;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: transparent;
+  overflow: auto;
+
+  .item-icon{
+    //margin-top: 28px;
+    width: 45px;
+    float: left;
+    font-size: 40px;
+
+    .item-icon ion-icon{
+      color: #061b52;
+    }
+  }
+  .item-icon2{
+    //margin-top: 23px;
+    width: 45px;
+    float: left;
+    font-size: 40px;
+  }
+
+  .item-content{
+    width: 100%;
+    padding: 15px 0 15px 10px;
+    overflow: auto;
+    margin-right: 5px;
+
+    p{
+      white-space: nowrap;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+    }
+
+    .item-content-date{
+      color: #797979;
+      font-size: 13px;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    .item-content-title{
+      color: var(--title-text-color);
+      font-size: 15px;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    .item-content-detail{
+      color: #000000;
+      font-size: 13px;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    .item-options{
+      color: var(--box-hover-background-color);
+      width: 25px;
+      font-size: 20px;
+    }
+    .item-content-date-active, .item-content-title-active, .item-content-detail-active{
+      color: #fff;
+    }
+  }
+  .item-options-active{
+    display: none !important;
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.ts b/src/app/pages/gabinete-digital/gabinete-digital.page.ts
index 5634ab2ec..90ff69e53 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.ts
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.ts
@@ -113,6 +113,9 @@ export class GabineteDigitalPage implements OnInit, DoCheck {
   //
   // pipe
 
+
+  loadCount = false
+
   customTaskPipe = new CustomTaskPipe()
 
   permissions = {
@@ -534,11 +537,12 @@ export class GabineteDigitalPage implements OnInit, DoCheck {
 
   async LoadCounts() {
 
-    this.showLoader = true;
 
     let allPreocesses_ = await this.processesbackend.GetTasksList("", false).toPromise();
     let allProcessesList = allPreocesses_;
 
+    this.loadCount = true;
+
     allProcessesList = allProcessesList.filter(element => element.activityInstanceName != 'Conhecimento')
     allProcessesList = allProcessesList.filter(element => element.activityInstanceName != 'Revisar Diploma')
 
@@ -660,6 +664,9 @@ export class GabineteDigitalPage implements OnInit, DoCheck {
     this.count_exp_pd = "-";
     this.count_dip_apr = "-";
 
+
+    
+    this.loadCount = true
   }
 
   doRefresh(event) {