Improve agenda

src/app/home/home.page.html

@@ -1,12 +1,12 @@
 
 
-<ion-tabs class="tab">
+<ion-tabs class="tab" >
     <ion-tab-bar class="bottoms" slot="bottom">
       <ion-tab-button tab="events">
         <!-- <ion-icon name="home"></ion-icon> -->
         <ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
         <ion-badge color="danger">{{totalEvent}}</ion-badge>
-        <ion-label>Início</ion-label>
+        <ion-label>Iníci1o</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="agenda">

src/app/home/home.page.scss

@@ -33,4 +33,11 @@ ion-badge {/*  */
     display: flex;
     justify-content: space-around;
   }
+}
+
+
+@media only screen and (min-width: 1024px) {
+  ion-tabs.tab .bottoms{
+    // display: none;
+  }
 }

src/app/home/home.page.ts

@@ -1,9 +1,7 @@
 import { Component, OnInit, NgZone } from '@angular/core';
 import { EventsService } from '../services/events.service';
-import { formatDate } from '@angular/common';
 import { Event } from '../models/event.model';
 import { ProcessesService } from '../services/processes.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { ModalController } from '@ionic/angular';
 import { PublicationDetailPage } from '../../app/pages/publications/view-publications/publication-detail/publication-detail.page';
 import { ViewPublicationsPage } from '../../app/pages/publications/view-publications/view-publications.page';
@@ -11,11 +9,10 @@ import { ExpedienteDetailPage } from '../../app/pages/gabinete-digital/expedient
 import { ViewEventPage } from '../../app/pages/agenda/view-event/view-event.page'
 import { ApproveEventModalPage } from '../../app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
 
-import { Plugins, PushNotification, PushNotificationToken, PushNotificationActionPerformed, Modals } from '@capacitor/core';
+import { Plugins, PushNotificationActionPerformed } from '@capacitor/core';
 import { Router } from '@angular/router';
-import { MethodCall } from '@angular/compiler';
 
-const { PushNotifications, LocalNotifications, LocalNotificationAction } = Plugins;
+const { PushNotifications, LocalNotificationAction } = Plugins;
 
 @Component({
   selector: 'app-home',
@@ -31,6 +28,8 @@ export class HomePage implements OnInit {
   totalExpediente = 0;
   profile: string;
 
+  windowsWidth =  window.innerWidth;
+
   constructor(private ngZone: NgZone,private eventService: EventsService, private processesbackend: ProcessesService, private router: Router, private modalController: ModalController,) { }
 
   ngOnInit() {
@@ -179,6 +178,9 @@ export class HomePage implements OnInit {
     );
   }
 
+
+
+
   async localNotificationPresent(notification) {
 
     LocalNotificationAction.
@@ -277,4 +279,7 @@ export class HomePage implements OnInit {
     modal.onDidDismiss();
   }
 
+
+
+
 }

src/app/pages/agenda/agenda.module.ts

@@ -17,6 +17,8 @@ import { NewEventPage } from "src/app/shared/agenda/new-event/new-event.componen
 import { EditEventComponent } from 'src/app/shared/agenda/edit-event/edit-event.component';
 import { ViewEventPage } from 'src/app/shared/agenda/view-event/view-event.page';
 import { EventListComponent } from "src/app/shared/agenda/event-list/event-list.component";
+import { ApproveEventComponent } from "src/app/shared/agenda/approve-event/approve-event.component";
+
 
 registerLocaleData(localeDe);
 
@@ -42,7 +44,8 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     NewEventPage,
     EditEventComponent,
     ViewEventPage,
-    EventListComponent
+    EventListComponent,
+    ApproveEventComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [

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

@@ -289,7 +289,8 @@
         mobileComponent.showAddNewEvent == false &&
         mobileComponent.showEditEvent == false &&
         mobileComponent.showEventDitails == false &&
-        mobileComponent.showEventList == false
+        mobileComponent.showEventList == false &&
+        mobileComponent.showEventToApprove == false
         )
         "
       class="text-black nothing-to-show">
@@ -323,13 +324,25 @@
         (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
       ></app-view-event>
 
-      <app-event-list *ngIf="mobileComponent.showEventList"
+
+      <app-event-list [class.transparent]="mobileComponent.transparentEventList" *ngIf="mobileComponent.showEventList"
         [segment]="segment"
+        (approveEventDismiss) = "approveEventDismiss($event)"
         (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
       >
 
       </app-event-list>
 
+      <app-approve-event  class="d-flex flex-column" *ngIf="mobileComponent.showEventToApprove"
+        [serialNumber] = "eventToaprove.serialNumber"
+        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
+        (closeEventToApprove)="closeEventToApprove($event)"
+      >
+
+      </app-approve-event>
+
+
+
     </div>
 
   </div>

src/app/pages/agenda/agenda.page.scss

@@ -554,12 +554,14 @@ app-view-event{
   display: flex;
   flex-wrap: wrap-reverse;
   flex-direction: column;
+  z-index: 1000;
 }
 
 app-edit-event{
   display: flex;
   flex-direction: column;
   height: 100%;
+  z-index: 1000;
 }
 
 app-new-event{
@@ -567,6 +569,7 @@ app-new-event{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
+  z-index: 1000;
 }
 
 app-event-list{
@@ -575,6 +578,21 @@ app-event-list{
   height: 100%;
   height: 100%;
   flex-wrap: wrap-reverse;
+  z-index: 1000;
+}
+
+app-approve-event{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.transparent{
+  position: absolute;
+  z-index: 0;
+  opacity: 0;
 }
 
 .nothing-to-show{

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

@@ -9,7 +9,7 @@ import { AlertService } from 'src/app/services/alert.service';
 import { NewEventPage } from './new-event/new-event.page';
 import { ViewEventPage } from './view-event/view-event.page';
 import { momentG }  from 'src/plugin/momentG';
-import {DomSanitizer} from "@angular/platform-browser";
+import { DomSanitizer } from "@angular/platform-browser";
 
 // showTimeline
 import { setHours, setMinutes } from 'date-fns';
@@ -20,7 +20,6 @@ import {
   DAYS_OF_WEEK,
 } from 'angular-calendar';
 import { CustomDateFormatter } from './custom-date-formatter.provider';
-import { ApproveEventModalPage } from './approve-event-modal/approve-event-modal.page';
 import { EventListPage } from '../gabinete-digital/event-list/event-list.page';
 
 @Component({
@@ -107,7 +106,15 @@ export class AgendaPage implements OnInit {
     showAddNewEvent: false,
     showEditEvent: false,
     showEventDitails: false,
-    showEventList: false
+    showEventList: false,
+    transparentEventList: false,
+    showEventToApprove: false
+  }
+
+  eventToaprove: any = {
+    back: false,
+    serialNumber: "",
+    saveData: {}
   }
 
   constructor( 
@@ -722,15 +729,45 @@ export class AgendaPage implements OnInit {
 
   } 
 
+  approveEventDismiss({saveData, serialNumber, action}){
+
+    if(action == 'Aprovar'){
+      this.eventToaprove = {
+        back: true,
+        saveData: saveData,
+        serialNumber:serialNumber
+      }
+      // this.mobileComponent.showEventList = false;
+      this.mobileComponent.transparentEventList = true;
+      this.mobileComponent.showEventToApprove = true;
+    }
+  }
+
+  closeEventToApprove(){
+    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;
+    }
+    
+  }
+
   async cloneAllmobileComponent(){
     
     this.mobileComponent= {
       showAddNewEvent: false,
       showEditEvent: false,
       showEventDitails: false,
-      showEventList: false
+      showEventList: false,
+      showEventToApprove: false
     }
 
+    this.closeEventToApprove();
+
   }
 
 }

src/app/pages/search/search.page.html

@@ -96,7 +96,7 @@
 
 <ion-content class="main-content">
 
-
+  
 
     <div style="height: calc(100% - 0px)">
       <div class="d-flex seach-wrapper height-100 flex-row justify-space-between">

src/app/shared/agenda/approve-event/approve-event.component.html

@@ -0,0 +1,107 @@
+<ion-header class="ion-no-border">
+  <div class="header-content">
+    <div class="header-icon-left">
+      <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+    <div class="header-title">
+      <label>""{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+    </div>
+    <div class="header-icon-right">
+      <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
+    </div>
+  </div>
+</ion-header>
+<ion-menu autoHide="false" side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar translucent>
+      <ion-title>Ações</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item (click)="approveTask(loadedEvent.serialNumber)">
+        <ion-icon name="checkmark-sharp"></ion-icon>
+        <ion-label>Aprovar</ion-label>
+      </ion-item>
+      <ion-item (click)="emendTask(loadedEvent.serialNumber)">
+        <ion-icon name="create-outline"></ion-icon>
+        <ion-label>Emendar</ion-label>
+      </ion-item>
+      <ion-item (click)="rejectTask(loadedEvent.serialNumber)">
+        <ion-icon name="close-sharp"></ion-icon>
+        <ion-label>Rejeitar</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-content id="main-content">
+  <div class="upper-content">
+    <div class="content-location">
+      <div class="location-detail">
+        <ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
+      </div>
+      <div class="button-calendar-type">
+        <ion-button  class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
+      </div>
+    </div>
+    <div class="content-details">
+      <ion-label>
+        <p>{{customDate}}</p>
+        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+        <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
+        <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
+      </ion-label>
+    </div>
+  </div>
+  <div class="middle-content">
+    <ion-item>
+      <ion-label>
+        <h3>Intervenientes</h3>
+        <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h3>Detalhes</h3>
+        <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
+      </ion-label>
+    </ion-item>
+  </div>
+
+  <div *ngIf="loadedAttachments" class="bottom-content">
+    <ion-list>
+      <h3>Documentos Anexados</h3>
+      <ion-item>
+      <ion-label>
+        <p class="attach-title-item">Receita por Natureza</p>
+        <p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
+      </ion-label>
+    </ion-item>
+    </ion-list>
+  </div>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="buttons">
+    <ion-item lines="none">
+      <p>
+        <ion-button class="button-edit-event" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</ion-button>
+      </p>
+      <p>
+       <ion-menu-button autoHide="false">
+        <ion-icon  (click)="openMenu()" name="ellipsis-vertical-outline"></ion-icon>
+      </ion-menu-button>
+      </p>
+      <p>
+        <ion-button class="button-approve" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</ion-button>
+      </p>
+    </ion-item>
+    <ion-item hidden>
+      <p>
+        <ion-button class="button-reject" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</ion-button>
+      </p>
+    </ion-item>
+  </div>
+  </ion-toolbar>
+</ion-footer>

src/app/shared/agenda/approve-event/approve-event.component.scss

@@ -0,0 +1,142 @@
+ion-content{
+    --padding-top:0px;
+    --padding-start: 20px;
+    --padding-end: 20px;
+    font-size: 18px;
+  }
+  ion-menu{
+    --height: 225px;
+  }
+  .header-content{
+    width: 360px;
+    overflow: auto;
+    margin: 25px auto;
+  }
+  .header-icon-left{
+    width: 36px;
+    font-size: 33px;
+    color: #42b9fe;
+    float: left;
+  }
+  .header-title{
+    width: 264px;
+    font-family: Roboto;
+    font-size: 25px;
+    margin: 0 5px 0 5px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+  .header-icon-right{
+    width: 45px;
+    font-size: 45px;
+    float: left;
+    overflow: auto;
+  }
+  .upper-content{
+    margin-left: 50px;
+    overflow: auto;
+    font-size: 18px;
+  
+    .content-location{
+      width: 360px;
+      margin: 0 auto;
+      padding: 0;
+      overflow: auto;
+    }
+  
+    .location-detail{
+      width: 210px;
+      font-weight: 700;
+      font-size: 18px;
+      float: left;
+      margin: 5px 5px 5px 0px;
+    }
+    .button-calendar-type{
+        width: 91px;
+        --border-radius: 12.5px;
+        --background: #ffb703;
+        margin-left: 5px;
+        float: left;
+    }
+    .button-calendar-type ion-button{
+      height: 25px;
+    }
+    .button-edit-event {
+        width: 140px;
+        height: 44px;
+        border-radius: 22.5px;
+        --background: #e0e9ee;
+        --color:#061b52;
+    }
+    .content-details p{
+        font-size: 16px;
+    }
+  }
+  .middle-conten{
+    .middle-content h3, .middle-content p{
+      font-size: 16px;
+    }
+  }
+  
+  .bottom-content{
+    width: 360px;
+    margin: 0 auto;
+    
+    .bottom-content h3{
+      font-size: 16px;
+      margin: 0 0 0 10px;
+    }
+    .attach-document{
+      font-size: 15px;
+      color: #0d89d1;
+      margin: 5px 5px 5px 10px;
+      padding: 5px;
+      float: left;
+    }
+    .attach-icon{
+      width: 37px;
+      font-size: 35px;
+      float: left;
+    }
+    .attach-title-item{
+      width: 100%;
+      font-size: 15px;
+      color:#0d89d1;
+    }
+    /* SPAN */
+    .span-left{
+      float: left;
+      font-size: 15x;
+    }
+    .span-right{
+    text-align: right;
+    float: right;
+    font-size: 13px;
+    }
+  }
+  
+  .buttons{
+    width: 360px;
+    margin: 0 auto;
+  }
+  
+  .button-options {
+      height: 44px;
+       --color: #42b9fe;
+       /* opacity: 0; */
+  }
+  .button-approve {
+    width: 140px;
+    height: 44px;
+    border-radius: 22.5px;
+    --background: #42b9fe;
+  }
+  .button-reject {
+    width: 140px;
+    height: 44px;
+    --color: #d30a0a;
+    border-radius: 22.5px;
+    --background: #ffe0e0;
+  }
+  

src/app/shared/agenda/approve-event/approve-event.component.spec.ts

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

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

@@ -0,0 +1,148 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Event } from 'src/app/models/event.model';
+import { AlertService } from 'src/app/services/alert.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { EmendMessageModalPage } from 'src/app/pages/agenda/emend-message-modal/emend-message-modal.page';
+import { EventActionsPopoverPage } from 'src/app/pages/agenda/event-actions-popover/event-actions-popover.page';
+
+
+@Component({
+  selector: 'app-approve-event',
+  templateUrl: './approve-event.component.html',
+  styleUrls: ['./approve-event.component.scss'],
+})
+export class ApproveEventComponent implements OnInit {
+
+  event: Event;
+  loadedEvent:any;
+  loadedAttachments:any;
+  customDate:any;
+  today:any;
+  
+  months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+  days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
+
+  @Input() serialNumber:string;
+
+  @Output() approveEventDismiss = new EventEmitter<any>();
+  @Output() closeEventToApprove = new EventEmitter<any>();
+
+  constructor(
+    private router:Router,
+    private modalController: ModalController,
+    private processes:ProcessesService,
+    private attachmentsService: AttachmentsService,
+    private popoverController: PopoverController,
+    private menu: MenuController,
+    private alertService: AlertService
+  ) { }
+
+  ngOnInit() {
+    this.getTask();
+    this.getAttachments();
+  }
+
+  notImplemented(){
+    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
+  }
+
+  close(){
+    /* this.router.navigate(['/home/gabinete-digital/event-list']); */
+    this.closeEventToApprove.emit();
+  }
+
+  getTask(){
+    this.processes.GetTask(this.serialNumber).subscribe(res => {
+      console.log(res);
+      this.loadedEvent = res;
+      this.today = new Date(res.workflowInstanceDataFields.StartDate);
+      console.log(new Date(this.today));
+      this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
+      
+    })
+  }
+  approveTask(serialNumber:string){
+
+    this.approveEventDismiss.emit({ 
+      "serialNumber": serialNumber,
+      "action": "Aprovar", 
+      "saveData": {
+        loadedEvent: this.loadedEvent,
+        today: this.today,
+        customDate: this.customDate
+      }
+    });
+  }
+
+  emendTask(serialNumber:string){
+    /* console.log('Emendar'); */
+    this.menu.close();
+    this.openEmendMessageModal(serialNumber);
+    this.modalController.dismiss(null);
+  }
+
+  rejectTask(serialNumber:string){
+  
+    let body = { "serialNumber": serialNumber, "action": "Rejeitar" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.modalController.dismiss(null);
+  }
+  
+  getAttachments(){
+    this.attachmentsService.getAttachmentsBySerial(this.serialNumber).subscribe(res=>{
+      this.loadedAttachments = res;
+      console.log(res);
+    });
+  }
+
+  async openOptions(ev:any) {
+    const popover = await this.popoverController.create({
+      component: EventActionsPopoverPage,
+      cssClass: 'event-actions-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+  
+  openMenu() {
+    this.menu.open();
+  }
+  async openEmendMessageModal(serialNumber:string) {
+    const modal = await this.modalController.create({
+      component: EmendMessageModalPage,
+      componentProps:{
+        
+      },
+      cssClass: 'emend-message-modal',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(res => {
+      if(res.data !== ''){
+        let body = { "serialNumber": serialNumber, 
+        "action": "Emendar",
+        "dataFields": {
+        "ReviewerComments": res.data,
+        }
+        }
+      console.log(body);
+      this.processes.PostTaskAction(body);
+      this.router.navigate(['/home/gabinete-digital/event-list']);
+      this.alertService.presentAlert('Operação realizada com sucesso!');
+      }
+      else{
+        this.alertService.presentAlert('Operação cancelada!');
+      }
+    });
+  }
+
+}

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

@@ -24,6 +24,8 @@ export class EventListComponent implements OnInit {
 
   @Input() segment:string;
   @Output() cloneAllmobileComponent = new EventEmitter<any>();
+  @Output() approveEventDismiss = new EventEmitter<any>();
+
 
 
   constructor(
@@ -57,18 +59,15 @@ export class EventListComponent implements OnInit {
       });
     }
     async openApproveModal(eventSerialNumber){
-      const modal = await this.modalController.create({
+
-        component: ApproveEventModalPage,
+      debugger
-        componentProps:{
+
-          serialNumber: eventSerialNumber,
+      this.approveEventDismiss.emit({ 
-        },
+        "serialNumber": eventSerialNumber,
-        cssClass: 'cal-modal',
+        "action": "Aprovar", 
-        backdropDismiss: false
+        "saveData": {}
       });
-  
+
-      await modal.present();
-  
-      modal.onDidDismiss();
     }
     doRefresh(event) {
       this.LoadToApproveEvents();

src/style/main.scss

@@ -254,4 +254,6 @@
 
 .flex-1{
     flex: 1;
-}
+}
+
+