Merge branch 'developer' of https://bitbucket.org/equilibriumito/gabinete-digital into developer

src/app/app-routing.module.ts

@@ -139,6 +139,10 @@ const routes: Routes = [
   {
     path: 'edit-event-to-approve',
     loadChildren: () => import('./shared/agenda/edit-event-to-approve/edit-event-to-approve.module').then( m => m.EditEventToApprovePageModule)
+  },
+  {
+    path: 'actions-options',
+    loadChildren: () => import('./shared/popover/actions-options/actions-options.module').then( m => m.ActionsOptionsPageModule)
   },
 
 

src/app/pages/agenda/agenda.page.html

@@ -417,7 +417,7 @@
       >
       </app-event-list>
 
-      
+      <!-- Edit event to approve -->
       <app-approve-event  class="d-flex flex-column" 
         *ngIf="mobileComponent.showEventToApprove" 
         [class.transparent]="mobileComponent.transparentEventToApprove"
@@ -437,6 +437,7 @@
         *ngIf="mobileComponent.showEditEventToApprove"
         [taskParticipants]="taskParticipants"
         [taskParticipantsCc]="taskParticipantsCc"
+        [saveData] = "eventToaprove.saveData"
         [serialNumber] = "eventToaprove.serialNumber"
         [saveData] = "eventToaprove.saveData"
         (setContact)="setContact($event)"

src/app/pages/agenda/agenda.page.ts

@@ -114,7 +114,7 @@ export class AgendaPage implements OnInit {
   eventsListOficial: Event[];
 
   // this will make  toggle add event and.
-  showEventEditOrOpen:  "edit" | "add" | "" = ""
+  showEventEditOrOpen:  "edit" | "add" | "" | "eventoToApprove" = ""
   prEventList: Event[];
   mdEventList: Event[];
 
@@ -232,8 +232,6 @@ export class AgendaPage implements OnInit {
     this.eventSelectedDate =  event.start;
     this.selectedEventId = event.id;
 
-    // this.viewEventDetail(event.id);
-
     this.cloneAllmobileComponent();
 
     
@@ -1190,11 +1188,11 @@ export class AgendaPage implements OnInit {
   }
 
   // open component
-  async viewEventDetailDismiss(data){
+  async viewEventDetailDismiss(data) {
     
     await this.cloneAllmobileComponent()
 
-    if (data.type == 'edit'){
+    if (data.type == 'edit') {
       
       this.selectedEvent = data.event;
       this.postEvent = data.event;
@@ -1221,7 +1219,6 @@ export class AgendaPage implements OnInit {
     }
   }
 
-
   approveEventDismissGoBack() {
 
     window['temp.path:/shared/agenda/edit-event-to-approve.ts'] = {}
@@ -1231,33 +1228,42 @@ export class AgendaPage implements OnInit {
 
   }
 
-
-  approveEventDismiss({saveData, serialNumber, action}){
+  approveEventDismiss({saveData, serialNumber, action}) {
 
     window['temp.path:/shared/agenda/edit-event-to-approve.ts'] = {}
     
-    if(action == 'Aprovar'){
+    if(action == 'Aprovar') {
       this.eventToaprove = {
         back: true,
         saveData: saveData,
         serialNumber:serialNumber,
+        action: action,
         InstanceId: saveData.workflowInstanceDataFields.InstanceId || ""
       }
-      // this.mobileComponent.showEventList = false;
+
       this.mobileComponent.transparentEventList = true;
       this.mobileComponent.showEventToApprove = true;
+
     }
 
-
+    this.showEventEditOrOpen = "eventoToApprove"
   }
 
   closeEventToApprove() {
-    
-    this.mobileComponent.showEventToApprove = false;
-    this.mobileComponent.showEventList = true;
+    if (this.eventToaprove.back ==true && this.mobileComponent.showEventList ==true) {
+      this.mobileComponent.transparentEventList = false;
+      this.mobileComponent.showEventToApprove = false;
+      this.eventToaprove.back = false;
+
+    }
+    else {
+
+      this.mobileComponent.showEventToApprove = false;
+      this.mobileComponent.showEventList = false;
+    }
 
   }
-
+    
   closeEventToApproveGoBack() {
     if( window.innerWidth <= 801){
       this.router.navigate(['/home/agenda/event-list']);
@@ -1269,12 +1275,14 @@ export class AgendaPage implements OnInit {
     }
   }
 
-  EditApproveEventDismiss(){
+  // called from emitters
+  /** @description open component to edit event to approve */
+  EditApproveEventDismiss() {
     this.cloneAllmobileComponent();
     this.mobileComponent.showEditEventToApprove = true;
   }
 
-  async cloneAllmobileComponent(){
+  async cloneAllmobileComponent() {
 
     this.mobileComponent.showAddNewEvent = false;
     this.mobileComponent.showEditEvent = false;
@@ -1288,7 +1296,7 @@ export class AgendaPage implements OnInit {
     this.closeEventToApprove();
   }
 
-  async AproveEventEditEvent(data){
+  async AproveEventEditEvent(data) {
     this.postEvent =data;
     this.mobileComponent.transparentEventToApprove= true;
     this.mobileComponent.showAddNewEvent = true;
@@ -1303,11 +1311,11 @@ export class AgendaPage implements OnInit {
     this.mobileComponent.showAttendees = true;
   }
 
-  async clearContact(){
+  async clearContact() {
     this.contacts = [];
   }
 
-  async setContact(data:EventPerson[]){
+  async setContact(data:EventPerson[]) {
     this.contacts = data;
   }
 
@@ -1319,7 +1327,7 @@ export class AgendaPage implements OnInit {
 
   async GoBackEditOrAdd() {
     
-    if(this.showEventEditOrOpen == "edit"){
+    if(this.showEventEditOrOpen == "edit") {
       this.cloneAllmobileComponent();
 
       this.mobileComponent.showEditEvent = true;
@@ -1327,7 +1335,11 @@ export class AgendaPage implements OnInit {
       this.cloneAllmobileComponent();
 
       this.mobileComponent.showAddNewEvent = true;
-    } else {
+    } else if(this.showEventEditOrOpen == "eventoToApprove") {
+      this.cloneAllmobileComponent();
+      this.mobileComponent.showEditEventToApprove = true
+    }
+    else {
       // do Nothings
     }
 

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

@@ -104,17 +104,11 @@ ion-content{
       width: 173px;
       height: 200px;
       margin: 7px;
-      //margin: 8px;
       padding: 30px 5px 30px 5px;
       border-radius: 15px;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
       background: white;
-      //border: solid 1px #e9e9e9;
-      /* --background-color: #ffffff !important; */
-      // background-color: #ffffff !important;
       float: left;
-      //border: 1px solid red;
-      //justify-content: center;
     }
     .exp-card-long{
       cursor: pointer;
@@ -125,7 +119,6 @@ ion-content{
       width: 360px;
       margin: 7px 20px;
       border-radius: 15px;
-      // background-color: #ffffff !important;
       padding: 7px;
       border: blue !important;
 
@@ -229,7 +222,6 @@ ion-content{
       width: 35%;
       justify-content: flex-start !important;
       border-right: 1px solid #d8d8d8;
-      border: 1px solid red;
 
       .aside{
         background:transparent;

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -66,7 +66,7 @@ export class NewPublicationPage implements OnInit {
     this.clear();
     // this.takePicture();
   }
-  takePicture(){
+  takePicture() {
     const options: CameraOptions = {
       quality: 90,
       destinationType: this.camera.DestinationType.DATA_URL,

src/app/pages/publications/publications.page.html

@@ -34,17 +34,19 @@
       <!-- Content -->
   
       <div class="aside overflow-y-auto d-flex  flex-wrap width-100">
-        <div class="item d-flex" 
-          *ngFor="let viagem of publicationsTravelFolderList"
-          (click)="goToPublicationsList(viagem.ProcessId)">
-          <div class="item-icon">
-            <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
-          </div>
-          <div class="item-content">
-              <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
-              <p class="item-content-title my-10">{{viagem.Description}}</p>
-              <p class="item-content-detail my-5">{{viagem.Detail}}</p>
-          </div>
+        <div class="item width-100 d-flex" 
+          *ngFor="let viagem of publicationsTravelFolderList">
+            <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-icon cursor-pointer">
+              <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
+            </div>
+            <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-content flex-grow-1 cursor-pointer">
+                <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
+                <p class="item-content-title my-10">{{viagem.Description}}</p>
+                <p class="item-content-detail my-5">{{viagem.Detail}}</p>
+            </div>
+            <div (click)="openOptions(viagem.ProcessId)" class="item-options cursor-pointer" autoHide="false">
+              <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
+            </div>
         </div>
         <div class="item width-100 d-flex"
           *ngFor="let evento of publicationsEventFolderList"
@@ -52,12 +54,15 @@
           <div class="item-icon2">
             <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
           </div>
-          <div class="item-content">
+          <div class="item-content flex-grow-1">
             <ion-label>
               <p class="item-content-date">{{evento.DateBegin}}</p>
               <p class="item-content-title">{{evento.Description}}</p>
             </ion-label>
           </div>
+          <div (click)="openOptions(evento.ProcessId)" class="item-options cursor-pointer" autoHide="false">
+            <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
+          </div>
         </div>
       </div>  
     </div>

src/app/pages/publications/publications.page.scss

@@ -104,44 +104,64 @@ ion-toolbar{
     width: 100% !important;
     padding: 0 0px 0 0px !important;
     border-bottom: 1px solid #ebebeb;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+
+    .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;
+
+      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: #0d89d1;
+        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{
+      width: 25px;
+      font-size: 20px;
+    }
   }
-  .item-icon{
-    margin-top: 28px;
-    width: 45px;
-    float: left;
-    font-size: 40px;
-  }
-  .item-icon2{
-    margin-top: 23px;
-    width: 45px;
-    float: left;
-    font-size: 40px;
-  }
-  .item-icon ion-icon{
-    color: #061b52;
-  }
-  .item-content{
-    float: left;
-    padding: 15px 0 15px 10px;
-  }
-  .item-content-date{
-    color: #797979;
-    font-size: 13px;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-  .item-content-title{
-    color: #0d89d1;
-    font-size: 15px;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-  .item-content-detail{
-    color: #000000;
-    font-size: 13px;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
+  
 
 
 

src/app/pages/publications/publications.page.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { ModalController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
 import { PublicationFolder } from 'src/app/models/publicationfolder';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { PublicationsService } from 'src/app/services/publications.service';
@@ -11,6 +11,7 @@ import { Animation, AnimationController } from '@ionic/angular';
 import { LoadingController } from '@ionic/angular';
 import { LoadingService } from 'src/app/services/loading.service';
 import { Publication } from 'src/app/models/publication';
+import { ActionsOptionsPage } from 'src/app/shared/popover/actions-options/actions-options.page';
 
 
 @Component({
@@ -56,6 +57,7 @@ export class PublicationsPage implements OnInit {
     private animationController: AnimationController,
     private loading: LoadingService,
     private publications: PublicationsService,
+    private popoverController:PopoverController,
     ) {
       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"];
@@ -275,4 +277,20 @@ export class PublicationsPage implements OnInit {
     }
   }
 
+  async openOptions(taskAction?: any) {
+    
+    const popover = await this.modalController.create({
+      component: ActionsOptionsPage,
+      cssClass: 'model aside-modal',
+      componentProps: {
+        /* task: this.task,
+        fulltask: this.fulltask, */
+        taskAction: taskAction,
+        showEnviarPendentes: false
+      },
+      //translucent: true
+    });
+    return await popover.present();
+  }
+
 }

src/app/shared/agenda/approve-event/approve-event.page.ts

@@ -55,7 +55,6 @@ export class ApproveEventPage implements OnInit {
     this.getTask();
     this.getAttachments();
     
-    // console.log(this.showAside);
   }
 
   notImplemented() {
@@ -79,7 +78,7 @@ export class ApproveEventPage implements OnInit {
     })
   }
 
-  async approveTask(serialNumber:string){
+  async approveTask(serialNumber:string) {
     let body = { "serialNumber": serialNumber, "action": "Aprovar" }
 
     try {
@@ -101,8 +100,6 @@ export class ApproveEventPage implements OnInit {
     }); */
   }
 
-  
-
   async rejectTask(serialNumber:string) {
   
     let body = { "serialNumber": serialNumber, "action": "Rejeitar" }
@@ -117,13 +114,13 @@ export class ApproveEventPage implements OnInit {
     }
 
   }
-  
-  async getAttachments(){
+   
+  async getAttachments() {
     this.loadedAttachments = await this.attachmentsService.getAttachmentsById(this.InstanceId).toPromise();
 
   }
 
-  viewDocument(sourceId){
+  viewDocument(sourceId) {
     this.processes.GetDocumentUrl(sourceId, '8').subscribe(res=>{
       /* console.log(res); */
       const url: string = res.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
@@ -143,7 +140,7 @@ export class ApproveEventPage implements OnInit {
     return await popover.present();
   }
 
-  async emendTask(serialNumber:string){
+  async emendTask(serialNumber:string) {
     console.log('Desktop');
 
     const modal = await this.modalController.create({
@@ -186,7 +183,7 @@ export class ApproveEventPage implements OnInit {
     //this.goBack();
   }
 
-  goToEventsToApprove(){
+  goToEventsToApprove() {
     let navigationExtras: NavigationExtras = {
       queryParams: {
           "eventos": true,
@@ -196,32 +193,10 @@ export class ApproveEventPage implements OnInit {
   }
 
 
+  /** @description edit event to aprove */
   async editar(serialNumber: string) {
-    if(window.innerWidth > 800){
-      console.log('DESTOP');
-      
-      this.EditApproveEventDismiss.emit();
-    }
-    else{
-    /* const modal = await this.modalController.create({
-      component: EditEventToApproveComponent,
-      componentProps: {
-        serialNumber: serialNumber,
-        InstanceId:this.InstanceId
-      },
-      cssClass: 'modal modal-desktop',
-      // backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(res => {
-      this.getTask();
-      this.getAttachments();
-    }); */
-    }
+
+    this.EditApproveEventDismiss.emit();
 
   }
-
-
-
-
 }

src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.html

@@ -13,7 +13,7 @@
           </div>
         </ion-header>
       </div>
-      <ion-item-sliding class="overflow-y-auto">
+      <ion-item-sliding class="overflow-y-auto" >
         <div class="px-20">
           <div class="ion-item-container width-100">
             <ion-input  placeholder="Assunto*" [(ngModel)]="eventProcess.workflowInstanceDataFields.Subject"></ion-input>

src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.ts

@@ -41,7 +41,6 @@ export class EditEventToApprovePage implements OnInit {
   public stepHour = 1;
   public stepMinute = 5;
   public stepSecond = 5;
-
   public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
   public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
 
@@ -88,7 +87,6 @@ export class EditEventToApprovePage implements OnInit {
   show = false
   isRecurring:string;
   isEventEdited: boolean;
-  segment:string = "true";
   profile:string;
   eventAttendees: EventPerson[];
 
@@ -101,7 +99,7 @@ export class EditEventToApprovePage implements OnInit {
 
   showAttendees = false;
 
-  InstanceId: string
+  InstanceId: string;
 
   @Output() openAttendeesComponent = new EventEmitter<any>();
   @Output() clearContact = new EventEmitter<any>();
@@ -109,6 +107,8 @@ export class EditEventToApprovePage implements OnInit {
   @Output() setIntervenientCC = new EventEmitter<any>();
   @Output() closeComponent = new EventEmitter<any>();
 
+  @Input() saveData: any;
+
   constructor(
     private modalController: ModalController,
     private eventsService: EventsService,
@@ -117,9 +117,6 @@ export class EditEventToApprovePage implements OnInit {
     private processes:ProcessesService,
     private toastService: ToastService,
   ) {
-
-   /*  this.serialNumber = this.navParams.get('serialNumber'); */
-
     this.isEventEdited = false;
 
   }
@@ -127,8 +124,6 @@ export class EditEventToApprovePage implements OnInit {
   ngOnInit() {
 
     if(!this.restoreTemporaryData()){ 
-
-    } else {
       alert('restore!!')
     }
 
@@ -223,7 +218,6 @@ export class EditEventToApprovePage implements OnInit {
       ReviewUserComment: ''
     }
 
-    console.log(event);
     
     this.eventsService.postEventToApproveEdit(event).subscribe(()=>{
       this.toastService.successMessage('Evento editado');
@@ -231,7 +225,6 @@ export class EditEventToApprovePage implements OnInit {
       this.toastService.badRequest('Evento não editado');
     })
 
-
     this.loadedAttachments.forEach((document:any)=>{
       if(document['action'] == 'add') {
         delete document.action
@@ -251,7 +244,6 @@ export class EditEventToApprovePage implements OnInit {
 
     })
 
-
     this.modalController.dismiss();
 
   }
@@ -283,21 +275,21 @@ export class EditEventToApprovePage implements OnInit {
   }
 
 
-  async addParticipants() {
+  // async addParticipants() {
 
-    //this.saveTemporaryData();
+  //   //this.saveTemporaryData();
 
-    this.openAttendeesComponent.emit({
-      type: "intervenient"
-    });
+  //   this.openAttendeesComponent.emit({
+  //     type: "intervenient"
+  //   });
 
-    this.clearContact.emit();
-  }
+  //   this.clearContact.emit();
+  // }
 
 
   async addParticipantsCC() {
 
-    //this.saveTemporaryData();
+  //   //this.saveTemporaryData();
 
     this.openAttendeesComponent.emit({
       type: "CC"
@@ -333,6 +325,8 @@ export class EditEventToApprovePage implements OnInit {
   }
   
 
+  //   this.clearContact.emit();
+  // }
 
   async getAttachments() {
 

src/app/shared/agenda/edit-event/edit-event.page.ts

@@ -20,7 +20,6 @@ import * as moment from 'moment';
 })
 export class EditEventPage implements OnInit {
 
-
   stEvent: Event;
   isRecurring:string;
   isEventEdited: boolean;
@@ -86,7 +85,6 @@ export class EditEventPage implements OnInit {
   public stepMinutes = [1, 5, 10, 15, 20, 25];
   public stepSeconds = [1, 5, 10, 15, 20, 25];
 
-
   constructor(
     private modalController: ModalController,
     private eventsService: EventsService,
@@ -96,12 +94,11 @@ export class EditEventPage implements OnInit {
   }
 
   ngOnInit() {
-    
 
-    if(!this.restoreTemporaryData()){
+    if(!this.restoreTemporaryData()) {
       // clear
  
-      if(this.postEvent){
+      if(this.postEvent) {
         if( this.postEvent.Body){
           if(typeof(this.postEvent.Body.Text) == 'string'){
             this.postEvent.Body.Text = this.postEvent.Body.Text.replace(/<[^>]+>/g, '');
@@ -128,7 +125,7 @@ export class EditEventPage implements OnInit {
   
       this.isEventEdited = false;
   
-      if(this.postEvent.IsRecurring == false){
+      if(this.postEvent.IsRecurring == false) {
         this.isRecurring = "Não se repete";
       }
       else{
@@ -139,7 +136,6 @@ export class EditEventPage implements OnInit {
     this.getAttachments(this.postEvent.EventId);
 
     this.restoreDatepickerData()
-   
   }
   
   close() {
@@ -190,7 +186,6 @@ export class EditEventPage implements OnInit {
     this.clearContact.emit();
   }
 
-
   async addParticipantsCc() {
 
     this.saveTemporaryData();
@@ -245,7 +240,6 @@ export class EditEventPage implements OnInit {
       return false;
     }
     
-    
   }
 
   deleteTemporaryData(){

src/app/shared/agenda/event-list/event-list.page.ts

@@ -15,8 +15,8 @@ export class EventListPage implements OnInit {
   // [desktop] event list to approve
 
   showLoader: boolean;
-  eventsPRList: any;
-  eventsMDGPRList: any;
+  eventsPRList: any = []
+  eventsMDGPRList: any = []
   eventPerson: EventPerson;
   eventBody: EventBody;
   categories: string[];

src/app/shared/popover/actions-options/actions-options-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ActionsOptionsPage } from './actions-options.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ActionsOptionsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ActionsOptionsPageRoutingModule {}

src/app/shared/popover/actions-options/actions-options.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ActionsOptionsPageRoutingModule } from './actions-options-routing.module';
+
+import { ActionsOptionsPage } from './actions-options.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ActionsOptionsPageRoutingModule
+  ],
+  declarations: [ActionsOptionsPage]
+})
+export class ActionsOptionsPageModule {}

src/app/shared/popover/actions-options/actions-options.page.html

@@ -0,0 +1,14 @@
+<ion-content class="container">
+  <div class="arrow-right" (click)="close()">
+    <button class="btn-no-color">
+      <ion-icon slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
+    </button>
+  </div>
+
+  <div class="buttons">
+    <button (click)="editAction()" class="btn-cancel" shape="round" >Editar</button>
+    <div class="solid"></div>
+    <button (click)="deleteAction()" class="btn-delete" shape="round" >Eliminar</button>
+  </div>
+
+</ion-content>

src/app/shared/popover/actions-options/actions-options.page.scss

@@ -0,0 +1,59 @@
+.container{
+    --padding-top:20px !important;
+   --padding-bottom:20px !important;
+   --padding-start:20px !important;
+   --padding-end:20px !important;
+}
+.arrow-right {
+    display: none;
+    margin-bottom: 20px;
+    .arrow-right-icon {
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+}
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.solid {
+    display: none;
+    width: 90%;
+    border-top: 1px solid #bbb;
+    margin: 0 auto !important;
+  }
+  .btn-ok, .btn-cancel{
+    //width: 50% !important;
+    margin-bottom: 5px !important;
+    margin-top: 5px !important;
+}
+.btn-cancel:hover, .btn-delete:hover{
+    color: #ffffff !important;
+    background-color: #42b9fe;
+}
+@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{
+        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/shared/popover/actions-options/actions-options.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ActionsOptionsPage } from './actions-options.page';
+
+describe('ActionsOptionsPage', () => {
+  let component: ActionsOptionsPage;
+  let fixture: ComponentFixture<ActionsOptionsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionsOptionsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ActionsOptionsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/popover/actions-options/actions-options.page.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, PopoverController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-actions-options',
+  templateUrl: './actions-options.page.html',
+  styleUrls: ['./actions-options.page.scss'],
+})
+export class ActionsOptionsPage implements OnInit {
+
+  constructor(
+    private popoverController: PopoverController,
+    private modalController: ModalController,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  close () {
+    this.modalController.dismiss();
+  }
+
+  editAction(){}
+
+  deleteAction(){
+    
+  }
+
+}