further improvements on events to approve and expedientes view for mobile

src/app/pages/agenda/event-actions-popover/event-actions-popover.page.html

@@ -1,15 +1,14 @@
-<ion-list>
+<ion-content class="container">
-  <ion-item>
+  <div class="arrow-right" (click)="closePopover()">
-    <p>
+    <button class="btn-no-color">
-      <ion-button class="button-edit-event cursor-pointer" shape="round" (click)="emendarTask()">Adicionar Nota</ion-button>
+      <ion-icon slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
-    </p>
+    </button>
-    <p>
+  </div>
-      <ion-button class="button-approve cursor-pointer" shape="round" (click)="approveTask()">Aprovar</ion-button>
+  <div class="buttons">
-    </p>
+    <button class="btn-cancel" shape="round" (click)="emendarTask()">Adicionar Nota</button>
-  </ion-item>
+    <button class="btn-ok" shape="round" (click)="approveTask()">Aprovar</button>
-  <ion-item lines="none">
+    <div class="solid"></div>
-    <p>
+    <button class="btn-cancel" shape="round" (click)="editTask()">Editar</button>
-      <ion-button class="button-discart-event cursor-pointer" shape="round" (click)="deleteTask()">Rejeitar</ion-button>
+    <button class="btn-delete" shape="round" (click)="deleteTask()">Rejeitar</button>
-    </p>
+  </div>
-  </ion-item>
+</ion-content>
-</ion-list>

src/app/pages/agenda/event-actions-popover/event-actions-popover.page.scss

@@ -1,24 +1,58 @@
-.button-edit-event {
+.container{
-    /* width: 140px; */
+    --padding-top:20px !important;
-    height: 44px;
+   --padding-bottom:20px !important;
-    border-radius: 22.5px;
+   --padding-start:20px !important;
-    --background: #e0e9ee;
+   --padding-end:20px !important;
-    --color:#061b52;
 }
-.button-options {
+.arrow-right{
-    height: 44px;
+    display: none;
-    --color: #42b9fe;
+    margin-bottom: 20px;
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
 }
-.button-approve {
+.buttons{
-    /* width: 140px; */
+    display: flex;
-    height: 44px;
+    flex-wrap: wrap;
-    border-radius: 22.5px;
+    justify-content: space-around;
-    --background: #42b9fe;
+    align-items: center;
 }
-.button-discart-event {
+.solid {
-    /* width: 140px; */
+    display: none;
-     height: 44px;
+    width: 90%;
-    border-radius: 22.5px;
+    border-top: 5px solid #bbb;
-    --background: #d30a0a;
+    margin: 0 auto !important;
-    --color:#fff;
+  }
+  .btn-ok, .btn-cancel{
+    //width: 50% !important;
+    justify-content: center;
+    margin-bottom: 10px !important;
+    margin-top: 10px !important;
+}
+@media only screen and (max-width: 800px) {
+    .btn-ok, .btn-cancel, .btn-delete{
+        width: 47% !important;
+    }
+}
+@media only screen and (min-width: 1024px) {
+    .arrow-right{
+        display: flex;
+        justify-content: flex-end;
+    }
+    .btn-cancel{
+        display: none;
+        width: 100% !important;
+        margin-bottom: 10px !important;
+    }
+    .btn-delete, .btn-ok{
+        width: 100% !important;
+        margin-bottom: 10px !important;
+        margin-top: 10px !important;
+    }
+   /*  .solid{
+        display: block;
+    } */
 }

src/app/pages/agenda/event-actions-popover/event-actions-popover.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { ProcessesService } from 'src/app/services/processes.service';
+import { EditEventToApproveComponent } from 'src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page';
 
 @Component({
   selector: 'app-event-actions-popover',
@@ -9,16 +10,25 @@ import { ProcessesService } from 'src/app/services/processes.service';
   styleUrls: ['./event-actions-popover.page.scss'],
 })
 export class EventActionsPopoverPage implements OnInit {
+  serialNumber:string;
+  instanceId: string;
 
-  constructor(private navParams: NavParams,
+  constructor(
+    private navParams: NavParams,
     private processes:ProcessesService,
     private router:Router,
     private modalController: ModalController,
     private popoverController: PopoverController,) {
-      /* this.serialNumber = this.navParams.get('serialNumber'); */
+      this.serialNumber = this.navParams.get('serialNumber');
+      this.instanceId = this.navParams.get('InstanceId');
      }
 
   ngOnInit() {
+    window.onresize = (event) => {
+      if( window.innerWidth >= 800){
+        this.popoverController.dismiss();
+      }
+    };
   }
   closePopover(){
     this.popoverController.dismiss();
@@ -41,5 +51,25 @@ export class EventActionsPopoverPage implements OnInit {
   deleteTask(){
 
   }
+  async editTask() {
+    console.log(this.serialNumber);
+    console.log(this.instanceId);
+    const modal = await this.modalController.create({
+      component: EditEventToApproveComponent,
+      componentProps: {
+        serialNumber: this.serialNumber,
+        InstanceId: this.instanceId
+      },
+      cssClass: 'modal modal-desktop',
+      // backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(res => {
+    });
+
+  } 
+  
 
 }

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html

@@ -41,7 +41,11 @@
   <div class="upper-content d-flex width-100">
     <div class="content-location d-flex justify-between width-100">
       <div class="location-detail flex-grow-1">
-        <ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
+        <div *ngIf="loadedEvent.workflowInstanceDataFields.Location">
+          <ion-label>
+            {{loadedEvent.workflowInstanceDataFields.Location}}
+          </ion-label>
+        </div>
         <div class="content-details">
           <ion-label>
             <p>1 {{customDate}}</p>
@@ -57,14 +61,15 @@
     </div>
 
   </div>
-  <div class="middle-content">
+  <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants" class="middle-content">
     <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants">
       <h5>Intervenientes</h5>
       <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
         <ion-label>{{att.Name}}</ion-label>
       </div>
     </div>
-    
+    </div>
+    <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
     <h5>Detalhes</h5>
     <ion-item lines="none" class="ion-no-padding ion-no-margin">
       <div [innerHTML]="loadedEvent.workflowInstanceDataFields.Body"></div>
@@ -74,17 +79,16 @@
 
   <div class="d-flex container-div width-100"  > 
     <ion-list class="width-100 " >
+      <h5>Documentos Anexados</h5>
       <ion-item class="width-100"   *ngFor="let document of loadedAttachments">
-        <ion-label class="width-100 d-block list">
+        <ion-label 
+          (click)="viewDocument(document.SourceId, document.ApplicationId)"
+          class="width-100 d-block list">
           <p class="d-flex ion-justify-content-between"> 
             <span class="attach-title-item">{{document.SourceName}}</span> 
             <span class="app-name" *ngIf="document.ApplicationId  == 8"> Correspondencia </span>
             <span class="app-name" *ngIf="document.ApplicationId == 386"> AccoesPresidenciais </span>
             <span class="app-name" *ngIf="document.ApplicationId == 361 "> ArquivoDespachoElect </span>
-            <span class="close-button text-black" >
-              <ion-icon class="font-20" src="assets/images/icons-delete-25.svg"></ion-icon>
-            </span>
-
           </p> 
           <p><span class="span-left">{{document.Stakeholders}}</span><span class="span-right"> {{document.CreateDate | date: 'dd-MM-yy'}} </span></p>
         </ion-label>

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.ts

@@ -8,7 +8,7 @@ import { ProcessesService } from 'src/app/services/processes.service';
 import { EditEventToApproveComponent } from 'src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page';
 import { EmendMessageModalPage } from '../../../agenda/emend-message-modal/emend-message-modal.page';
 import { EventActionsPopoverPage } from '../../../agenda/event-actions-popover/event-actions-popover.page';
-
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
 @Component({
   selector: 'app-approve-event-modal',
@@ -37,6 +37,7 @@ export class ApproveEventModalPage implements OnInit {
     private menu: MenuController,
     private alertService: AlertService,
     private activatedRoute: ActivatedRoute,
+    private iab: InAppBrowser,
   ) {
 
 
@@ -82,6 +83,14 @@ export class ApproveEventModalPage implements OnInit {
     })
   }
 
+  viewDocument(docId:string, applicationId:string){
+    this.processes.GetDocumentUrl(docId, applicationId).subscribe(res=>{
+      console.log(res);
+      const url: string = res.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+      const browser = this.iab.create(url,"_blank");
+      browser.show();
+    });
+  }
   
   approveTask(serialNumber:string){
     console.log('approveTask SERIALNUMBER: ', serialNumber)
@@ -111,6 +120,8 @@ export class ApproveEventModalPage implements OnInit {
   async getAttachments(){
 
     this.loadedAttachments = await this.attachmentsService.getAttachmentsById(this.InstanceId).toPromise();
+    console.log(this.loadedAttachments);
+    
 
   }
 

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html

@@ -42,6 +42,11 @@
         <div  (click)="editar(loadedEvent.serialNumber)" class="header-icon-right display-none-true">
           <ion-icon src="assets/images/icons-edit.svg"></ion-icon>
         </div>
+        <div class="menu-ptions">
+          <button class="btn-no-color" (click)="openOptions(loadedEvent)">
+            <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
+          </button>
+        </div>
       </div>
       <div class="upper-content d-flex flex-column">
         <div class="content-location">

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss

@@ -206,6 +206,9 @@ ion-menu{
   .div-icon{
     display: none;
   }
+  .menu-ptions{
+    display: none;
+  }
   .content{
     width: 65%;
     border-right: 1px solid #d8d8d8;

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.ts

@@ -73,7 +73,11 @@ export class ApproveEventPage implements OnInit {
           "eventos": true,
       }
     };
-    this.router.navigate(['/home/gabinete-digital'], navigationExtras);
+    if( window.innerWidth < 801){
+      this.router.navigate(['/home/gabinete-digital/event-list']);
+    } else {
+      this.router.navigate(['/home/gabinete-digital'], navigationExtras);
+    }
   }
 
   async getTask(){
@@ -135,9 +139,13 @@ export class ApproveEventPage implements OnInit {
   async openOptions(ev:any) {
     const popover = await this.popoverController.create({
       component: EventActionsPopoverPage,
-      cssClass: 'event-actions-popover',
+      cssClass: 'events-options',
       event: ev,
-      translucent: true
+      translucent: true,
+      componentProps:{
+        serialNumber: ev.serialNumber,
+        InstanceId: ev.workflowInstanceDataFields.InstanceId,
+      },
     });
     return await popover.present();
   }

src/app/pages/gabinete-digital/event-list/event-list.module.ts

@@ -7,12 +7,14 @@ import { IonicModule } from '@ionic/angular';
 import { EventListPageRoutingModule } from './event-list-routing.module';
 
 import { EventListPage } from './event-list.page';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    SharedModule,
     EventListPageRoutingModule
   ],
   declarations: [EventListPage]

src/app/pages/gabinete-digital/event-list/event-list.page.html

@@ -1,39 +1,41 @@
 <ion-header class="ion-no-border">
-  <div class="header-content">
+  <app-header></app-header>
-    <div class="header-icon-left">
-      <button class="btn-no-color cursor-pointer" (click)="close()">
-        <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-      </button>
-    </div>
-    <div class="header-title">
-      <label>Eventos para Aprovação</label>
-    </div>
-  <ion-toolbar>
-    <ion-segment [(ngModel)]="profile">
-      <ion-segment-button value="MDGPR">
-        Seu calendário
-      </ion-segment-button>
-      <ion-segment-button value="PR">
-        Presidente da República
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-</div>
 </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>
-  <div [ngSwitch]="profile"> 
+  <div class="main-content d-flex height-100" [ngSwitch]="segment">
+    <div class="content d-flex flex-column">
+      <div class="header-content">
+        <div class="header-icon-left">
+          <button class="btn-no-color cursor-pointer" (click)="goBack()">
+            <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+          </button>
+        </div>
+        <div class="header-title">
+          <label>Eventos para Aprovação</label>
+        </div>
+      <ion-toolbar>
+        <ion-segment [(ngModel)]="segment">
+          <ion-segment-button value="MDGPR">
+            Seu calendário
+          </ion-segment-button>
+          <ion-segment-button value="PR">
+            Presidente da República
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </div>
+
     <ion-list *ngSwitchCase="'MDGPR'">
       <div *ngIf="eventsMDGPRList">
         <ion-list>
           <ion-item-sliding>
             <ion-item class="Rectangle cursor-pointer" lines="none" 
-              *ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber, event)">
+              *ngFor="let event of eventsMDGPRList" (click)="goToEventDetail(event)">
               
               <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
                 <div class="approve-event-time">
@@ -72,4 +74,5 @@
       </div>
     </ion-list>
   </div>
+  </div>
 </ion-content>

src/app/pages/gabinete-digital/event-list/event-list.page.scss

@@ -1,7 +1,13 @@
-
+@import '~src/function.scss';
-:host{
+.main-content{
+  background-color: #fff !important;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+}
+.content{
   padding: 30px 20px 0 20px !important;
   margin: 0;
+  float: left;
 }
 .header-content{
   margin: 0 !important;

src/app/pages/gabinete-digital/event-list/event-list.page.ts

@@ -3,9 +3,9 @@ import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { Event } from 'src/app/models/event.model';
 import { ProcessesService } from 'src/app/services/processes.service';
-import { ModalController, NavParams } from '@ionic/angular';
+import { ModalController } from '@ionic/angular';
 import { ApproveEventModalPage } from './approve-event-modal/approve-event-modal.page';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, NavigationExtras, Router } from '@angular/router';
 
 @Component({
   selector: 'app-event-list',
@@ -14,6 +14,7 @@ import { NavigationEnd, Router } from '@angular/router';
 })
 export class EventListPage implements OnInit {
   profile:string;
+  segment:string;
   showLoader: boolean;
   eventsPRList: any;
   eventsMDGPRList: any;
@@ -27,18 +28,10 @@ export class EventListPage implements OnInit {
     private processes:ProcessesService,
     private modalController: ModalController,
     private router: Router,
-    private navParams: NavParams,
   ) { }
 
   ngOnInit() {
-    this.profile = this.navParams.get('profile');
+    this.segment =  'MDGPR';
-      
-    /* console.log(this.navParams.get('md')); */
-    if(this.profile == "mdgpr"){
-      this.profile = 'MDGPR'
-    } else {
-      this.profile = 'PR'
-    }
     
     this.LoadToApproveEvents();
 
@@ -71,8 +64,6 @@ export class EventListPage implements OnInit {
   }
 
   async openApproveModal(eventSerialNumber, event){
-
-
     const modal = await this.modalController.create({
       component: ApproveEventModalPage,
       componentProps:{
@@ -81,12 +72,30 @@ export class EventListPage implements OnInit {
       cssClass: 'event-list cal-modal  modal modal-desktop',
       backdropDismiss: false
     });
-
     await modal.present();
-
-
   }
 
+  goToEventDetail(eventToAprove){
+    let InstanceId;
+
+    if(!eventToAprove.workflowInstanceDataFields.hasOwnProperty('InstanceId')){
+      InstanceId = ''
+    } else {
+      InstanceId =eventToAprove.workflowInstanceDataFields.InstanceId
+    }
+
+    let navigationExtras: NavigationExtras = {
+      queryParams: {
+          "serialNumber": eventToAprove.serialNumber,
+      }
+    };
+    this.router.navigate(['/home/gabinete-digital/event-list/approve-event'], navigationExtras)
+  }
+
+
+
+
+
   doRefresh(event) {
     this.LoadToApproveEvents();
     console.log('refresh');
@@ -97,6 +106,9 @@ export class EventListPage implements OnInit {
   close(){
     this.modalController.dismiss(null);
   }
+  goBack(){
+    this.router.navigate(['/home/gabinete-digital']);
+  }
 
 
 }

src/app/pages/gabinete-digital/expediente/expediente.page.html

@@ -1,32 +1,40 @@
 <ion-header class="ion-no-border">
-  <div class="title">
+  <app-header></app-header>
-    <div class="thetitle"><ion-label >Expediente</ion-label></div>
-    <div class="theicon">
-      <button class="btn-no-color" (click)="doRefresh()">
-        <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
-      </button>
-    </div>
-  </div>
 </ion-header>
 <ion-content>
   <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-      <ion-refresher-content
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-        pullingIcon="chevron-down-circle-outline"
+     <ion-refresher-content>
-        pullingText="deslize para actualizar"
+    </ion-refresher-content>
-        refreshingSpinner="circles"
+  </ion-refresher>
-        refreshingText="A actualizar...">
+  <div class="main-content d-flex height-100" [ngSwitch]="segment">
-      </ion-refresher-content>
+    <div class="content d-flex flex-column width-100">
-    </ion-refresher>
+      <div class="header-content">
+        <div class="header-icon-left">
+          <button class="btn-no-color cursor-pointer" (click)="goBack()">
+            <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+          </button>
+        </div>
+        <div class="header-title">
+          <label>Expediente</label>
+        </div>
+        <div class="btn-refresh">
+          <button class="btn-no-color" (click)="doRefresh()">
+            <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
+          </button>
+        </div>
+    </div>
   
   <div class="width-100" *ngIf="taskslist">
+    
     <ion-list>
-      <ion-item 
+      <div 
-          class="expediente ion-no-padding cursor-pointer"  
+          class="expediente cursor-pointer"  
           *ngFor = "let task of taskslist"
           (click)="goToExpediente(task.SerialNumber)"
           >
             <div class="item width-100">
-              <div class="exp-top-detail">
+              <div class="exp-top-detail width-100">
                 <div class="exp-date">
                   <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
                 </div>
@@ -42,7 +50,7 @@
                 <ion-label>{{ task.Folio }}</ion-label>
               </div>
             </div>
-          </ion-item>
+          </div>
     </ion-list>
   </div>
   <div *ngIf="!taskslist">
@@ -70,5 +78,7 @@
       </ion-item>
     </ion-list>
   </div>
+</div>
+</div>
 </ion-content>
 

src/app/pages/gabinete-digital/expediente/expediente.page.scss

@@ -1,30 +1,42 @@
 @import '~src/function.scss';
-/* CONTENT */
+.main-content{
-:host{
+  background-color: #fff !important;
-    padding: 30px 20px 0 20px !important;
+  border-top-left-radius: 25px;
-    margin: 0;
+  border-top-right-radius: 25px;
 }
-.title{
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+}
+.header-content{
+  margin: 0 !important;
+  overflow: auto;
+
+  .header-icon-left{
+    width: 36px;
+    font-size: 33px;
+    color: #42b9fe;
+    float: left;
+  }
+  .header-title{
+    padding-top: 2.5px;
     font-family: Roboto;
     font-size: 25px;
     color:#000;
-    overflow: auto;
+    float: left;
   }
-.item-list-small{
+  .btn-refresh {
-    font-size: 11px;
+    width: fit-content;
-    overflow: auto;
+    float: right;
-  }
-  .ion-item-class{
-    padding: 0;
-  
-  }
-  .label-text{
-    width: 100%;
-    padding: 0;
-    margin: 0;
   }
+}
+
 //DIV
 ion-item{
+  border: 1px solid blue;
+  margin: 0 !important;
+  padding: 0 !important;
   --background: none;
 }
 .item {
@@ -92,6 +104,7 @@ ion-item{
 /* New CSS */
 .expediente{
   padding-top: 10px;
+  border-bottom: 1px solid #ebebeb;
 }
 .exp-list-item{
   //width: 368px;
@@ -100,7 +113,6 @@ ion-item{
   margin: 10px auto;
 }
 .exp-top-detail{
-  width: 100%;
   overflow: auto;
 }
 .exp-date{
@@ -126,7 +138,7 @@ ion-item{
 
 }
 .exp-icon{
-  width: 45px;
+  width: fit-content;
   float: right;
   font-size: 13px;
 }

src/app/pages/gabinete-digital/expediente/expediente.page.ts

@@ -6,7 +6,7 @@ import { DailyWorkTask } from '../../../models/dailyworktask.model';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { formatDate } from '@angular/common';
 import { LoadingService } from 'src/app/services/loading.service';
-import { ModalController, NavParams } from '@ionic/angular';
+import { ModalController } from '@ionic/angular';
 import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
 import { AlertService } from 'src/app/services/alert.service';
 
@@ -18,6 +18,7 @@ import { AlertService } from 'src/app/services/alert.service';
 export class ExpedientePage implements OnInit {
 
   segment:string;
+  showLoader: boolean;
   //profile:string;
 
   @ViewChild(CalendarComponent) myCal: CalendarComponent;
@@ -38,14 +39,6 @@ export class ExpedientePage implements OnInit {
     }
 
   ngOnInit() {
-    //Inicializar segment
-    this.segment = "expedientes";
-    this.LoadList();
-  }
-
-  segmentChanged(){
-    console.log(this.segment);
-    
     this.LoadList();
   }
 
@@ -59,16 +52,20 @@ export class ExpedientePage implements OnInit {
   }
 
   LoadList(){
+    this.showLoader = true;
     this.processes.GetTasksList("Expediente", false).subscribe(result => {
       console.log(result);
       this.taskslist = new Array();
       let res = result.reverse().filter(data => data.workflowInstanceDataFields.Status == "Active");
       res.forEach(element => {
+        let date = new Date(element.taskStartDate);
+        date.setMonth(date.getMonth() + 1);
+        let taskDate = date.getFullYear()+"-"+ date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+ ":"+date.getSeconds();
         let task: DailyWorkTask = {
           "SerialNumber": element.serialNumber,
           "Folio": element.workflowInstanceDataFields.Subject,
           "Senders": element.originator.email,
-          "CreateDate": formatDate(new Date(element.taskStartDate), 'yyyy-MM-dd HH:mm', 'pt'),
+          "CreateDate": taskDate,
           "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
           "Remetente": element.workflowInstanceDataFields.Remetente,
           "DocumentsQty": 0,
@@ -78,6 +75,7 @@ export class ExpedientePage implements OnInit {
         this.taskslist.push(task);
       });
       console.log(this.taskslist);
+      this.showLoader = false;
     });
   }
 
@@ -89,6 +87,10 @@ export class ExpedientePage implements OnInit {
     }, 2000);
   }
 
+  goBack(){
+    this.router.navigate(['/home/gabinete-digital']);
+  }
+
   goToExpediente(serialNumber:any){
     let navigationExtras: NavigationExtras = {
       queryParams: {

src/app/pages/gabinete-digital/gabinete-digital.page.html

@@ -20,7 +20,7 @@
         </div>
         
         <div class="aside overflow-y-auto d-flex  flex-wrap width-100">
-          <div [class.active]="selectedElement == 'approval'" (click)="openEventsToApprovePage('MDGPR');selectedElement='approval'"  class="exp-card d-flex flex-column" *ngIf="loggeduser.Profile == 'MDGPR'" >
+          <div (click)="openEventsToApprovePage('MDGPR');selectedElement='approval'" [class.active]="selectedElement == 'approval'"  class="exp-card d-flex flex-column" *ngIf="loggeduser.Profile == 'MDGPR'" >
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
             </div>

src/app/pages/gabinete-digital/gabinete-digital.page.ts

@@ -263,11 +263,12 @@ export class GabineteDigitalPage implements OnInit {
     console.log(profile);
     
     this.closeAllDesktopComponents();
+    let navigationExtras: NavigationExtras = { queryParams: {"eventos": true,}};
     if( window.innerWidth <= 800){
-      this.openEventsToApproveList(profile);
+      //this.openEventsToApproveList(profile);
+      this.router.navigate(['/home/gabinete-digital/event-list']);
     }
     else{
-      let navigationExtras: NavigationExtras = { queryParams: {"eventos": true,}};
       this.router.navigate(['/home/gabinete-digital'], navigationExtras);
       this.showEventsToApprove = true;
     }
@@ -296,7 +297,8 @@ export class GabineteDigitalPage implements OnInit {
   openExpedientListPage() {
     this.closeAllDesktopComponents();
     if( window.innerWidth <= 800) {
-      this.openExpedientList();
+      //this.openExpedientList();
+      this.router.navigate(['/home/gabinete-digital/expediente']);
     }
     else {
       this.selectedElement='Correspondence'

src/app/shared/popover/opts-expediente/opts-expediente.page.scss

@@ -30,6 +30,11 @@
     margin-bottom: 5px !important;
     margin-top: 5px !important;
 }
+@media only screen and (max-width: 800px) {
+    .btn-ok, .btn-cancel, .btn-delete{
+        width: 47% !important;
+    }
+}
 @media only screen and (min-width: 1024px) {
     .arrow-right{
         display: flex;

src/app/shared/popover/opts-expediente/opts-expediente.page.ts

@@ -34,8 +34,13 @@ export class OptsExpedientePage implements OnInit {
 
   ngOnInit() {
     console.log(this.task);
-    
     this.profile = "mdgpr";
+    
+    window.onresize = (event) => {
+      if( window.innerWidth >= 800){
+        this.popoverController.dismiss();
+      }
+    };
   }
 
   close(){

src/global.scss

@@ -297,6 +297,11 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
         border-bottom:none !important;
       }
 }
+@media only screen and (max-width: 800px){
+    .btn-refresh{
+        display: none;
+    }
+}
 
 .hideAsideOptions{
     @media only screen and (max-width: 800px) {

src/theme/variables.scss

@@ -291,6 +291,15 @@
   max-height: 90px;
   min-height: 90px;
 }
+.events-options .popover-content{
+  width: 100% !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  right: 0 !important;
+  top: calc(100% - 190px) !important;
+  max-height: 190px;
+  min-height: 190px;
+}
 .exp-options .popover-content{
   width: 100% !important;
   left: 0 !important;