save

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/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/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" 
+        <div class="item width-100 d-flex" 
-          *ngFor="let viagem of publicationsTravelFolderList"
+          *ngFor="let viagem of publicationsTravelFolderList">
-          (click)="goToPublicationsList(viagem.ProcessId)">
+            <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-icon cursor-pointer">
-          <div class="item-icon">
+              <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
-            <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
+            </div>
-          </div>
+            <div (click)="goToPublicationsList(viagem.ProcessId)" class="item-content flex-grow-1 cursor-pointer">
-          <div class="item-content">
+                <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
-              <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-title my-10">{{viagem.Description}}</p>
+                <p class="item-content-detail my-5">{{viagem.Detail}}</p>
-              <p class="item-content-detail my-5">{{viagem.Detail}}</p>
+            </div>
-          </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/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(){
+    
+  }
+
+}