Improve generic component

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

@@ -16,6 +16,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { NewEventPage } from "src/app/shared/agenda/new-event/new-event.component"
 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";
 
 registerLocaleData(localeDe);
 
@@ -40,7 +41,8 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     AgendaPage, 
     NewEventPage,
     EditEventComponent,
-    ViewEventPage
+    ViewEventPage,
+    EventListComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [

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

@@ -284,11 +284,21 @@
     </div>
 
     <div class="event-details  bg-blue ">
+
+      <div *ngIf="(
+        mobileComponent.showAddNewEvent == false &&
+        mobileComponent.showEditEvent == false &&
+        mobileComponent.showEventDitails == false &&
+        mobileComponent.showEventList == false
+        )
+        "
+      class="text-black nothing-to-show">
+          Nenhum evento selecionado
+      </div>
       
       <!-- New -->
       <app-new-event  *ngIf="mobileComponent.showAddNewEvent"
 
-
         [profile]="profile"
         [selectedSegment]=segment
         [selectedDate]="eventSelectedDate"
@@ -313,6 +323,13 @@
         (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
       ></app-view-event>
 
+      <app-event-list *ngIf="mobileComponent.showEventList"
+        [segment]="segment"
+        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
+      >
+
+      </app-event-list>
+
     </div>
 
   </div>

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

@@ -557,9 +557,9 @@ app-view-event{
 }
 
 app-edit-even{
-  height: 100%;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  height: 100%;
 }
 
 app-new-event{
@@ -567,4 +567,19 @@ app-new-event{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
+}
+
+app-event-list{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  height: 100%;
+  flex-wrap: wrap-reverse;
+}
+
+.nothing-to-show{
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  height: 100%;
 }

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

@@ -107,6 +107,7 @@ export class AgendaPage implements OnInit {
     showAddNewEvent: false,
     showEditEvent: false,
     showEventDitails: false,
+    showEventList: false
   }
 
   constructor( 
@@ -174,6 +175,8 @@ export class AgendaPage implements OnInit {
 
     // this.viewEventDetail(event.id);
 
+    this.cloneAllmobileComponent()
+
     if( window.innerWidth <= 1024){
       this.router.navigate(["/home/agenda", event.id, 'agenda']);
     } else {
@@ -606,6 +609,8 @@ export class AgendaPage implements OnInit {
 
   async openAddEvent() {
 
+    await this.cloneAllmobileComponent()
+
     if( window.innerWidth <= 1024){
       const modal = await this.modalCtrl.create({
         component: NewEventPage,
@@ -687,15 +692,24 @@ export class AgendaPage implements OnInit {
   }
 
   async viewEventsToApprove(){
-    const modal = await this.modalCtrl.create({
-      component: EventListPage,
-      componentProps:{
-      },
-      cssClass: 'modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
+    await this.cloneAllmobileComponent()
+
+    if( window.innerWidth <= 1024){
+      const modal = await this.modalCtrl.create({
+        component: EventListPage,
+        componentProps:{
+        },
+        cssClass: 'modal',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+    } else {
+      // hide all components
+      this.cloneAllmobileComponent();
+      this.mobileComponent.showEventList = true;
+    }
+
   } 
 
   async cloneAllmobileComponent(){
@@ -704,6 +718,7 @@ export class AgendaPage implements OnInit {
       showAddNewEvent: false,
       showEditEvent: false,
       showEventDitails: false,
+      showEventList: false
     }
 
   }

src/app/pages/agenda/approve-event-modal/approve-event-modal.page.html

@@ -4,7 +4,7 @@
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
     <div class="header-title">
-      <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+      <label>""{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
     </div>
     <div class="header-icon-right">
       <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>

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

@@ -4,7 +4,7 @@
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
     <div class="header-title">
-      <label>Eventos para Aprovação</label>
+      <label>""Eventos para Aprovação</label>
     </div>
   
   <!-- <ion-toolbar>

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

@@ -11,7 +11,7 @@
 
 
 
-  <div class="main-content" style=" height: calc(100% - (69px + 68px));">
+  <div class="main-content" >
     <div class="ion-item-container">
       <ion-input class="text-black"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>

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

@@ -0,0 +1,80 @@
+<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>Eventos para Aprovação</label>
+    </div>
+  
+  <!-- <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button (click) ="close()"></ion-back-button>
+    </ion-buttons>
+    <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    <ion-title>Eventos para Aprovação</ion-title>
+  </ion-toolbar> -->
+  <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-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]="segment"> 
+    <ion-list *ngSwitchCase="'MDGPR'">
+      <div *ngIf="eventsMDGPRList">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item class="Rectangle" lines="none" 
+              *ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber)">
+              <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}}">
+                <div class="approve-event-time">
+                  <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-list>
+    <ion-list *ngSwitchCase="'PR'">
+      <div *ngIf="eventsPRList">
+        <ion-item-sliding>
+          <ion-item class="Rectangle" lines="none" 
+              *ngFor="let event of eventsPRList" (click)="openApproveModal(event.serialNumber)">
+              <div class="content-pr-{{event.workflowInstanceDataFields.Agenda}}">
+                <div class="approve-event-time">
+                  <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+        </ion-item-sliding>
+      </div>
+    </ion-list>
+  </div>
+</ion-content>

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

@@ -0,0 +1,107 @@
+.header-content{
+    width: 360px;
+    overflow: auto;
+    margin: 0 auto;
+    padding-top: 25px;
+  }
+  .header-icon-left{
+    width: 36px;
+    font-size: 33px;
+    color: #42b9fe;
+    float: left;
+  }
+  .header-title{
+    width: 300px;
+    font-family: Roboto;
+    font-size: 25px;
+    margin: 0 5px 0 5px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+  ion-item-sliding{
+    margin-top: 5px;
+  }
+  .Rectangle {
+    width: 360px;
+    border-radius: 15px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    border: solid 1px #e9e9e9;
+    background-color: var(--white);
+    margin: 0 auto;
+    padding: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
+  .content-mdgpr-Oficial{
+    width: 340px;
+    border-radius: 5px;
+    border-right: 5px solid #99e47b;
+    overflow: auto;
+  }
+  .content-mdgpr-Pessoal{
+    width: 340px;
+    border-radius: 5px;
+    border-right: 5px solid #958bfc;
+    overflow: auto;
+  }
+  .content-pr-Oficial{
+    width: 340px;
+    border-radius: 5px;
+    border-right: 5px solid #ffb703;
+    overflow: auto;
+  }
+  .content-pr-Pessoal{
+    width: 340px;
+    border-radius: 5px;
+    border-right: 5px solid #f05d5e;
+    overflow: auto;
+  }
+  
+  .approve-event-time{
+    float: left;
+  }
+  .approve-event-time p{
+    width: 33px;
+    font-family: Roboto;
+    font-size: 13px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: var(--Antartic-grey);
+    margin: 0;
+    padding: 0;
+  }
+  .approve-event-detail{
+    float: left;
+    margin-left: 10px;
+  }
+  .approve-event-detail p{
+    width: 250px;
+    font-family: Roboto;
+    font-size: 13px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: var(--black);
+    margin: 0;
+    padding: 0;
+  }
+  .approve-event-detail h3{
+    width: 250px;
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #0d89d1;
+    margin: 0;
+    padding: 0;
+  }
+  

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

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

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

@@ -0,0 +1,86 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+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 { ApproveEventModalPage } from 'src/app/pages/agenda/approve-event-modal/approve-event-modal.page';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-event-list',
+  templateUrl: './event-list.component.html',
+  styleUrls: ['./event-list.component.scss'],
+})
+export class EventListComponent implements OnInit {
+
+  showLoader: boolean;
+  eventsPRList: any;
+  eventsMDGPRList: any;
+  eventPerson: EventPerson;
+  eventBody: EventBody;
+  categories: string[];
+  serialnumber:string;
+
+  @Input() segment:string;
+  @Output() cloneAllmobileComponent = new EventEmitter<any>();
+
+
+  constructor(
+    private processes:ProcessesService,
+    private modalController: ModalController,
+    private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+      console.log(this.segment);
+      this.LoadToApproveEvents();
+  
+      this.router.events.forEach((event) => {
+        if(event instanceof NavigationEnd && event.url == this.router.url) {
+          this.LoadToApproveEvents();
+        }
+      });
+    }
+
+    LoadToApproveEvents(){
+      this.showLoader = true;
+      
+      this.processes.GetToApprovedEvents('PR','false').subscribe(res=>{
+        this.showLoader = false;
+        this.eventsPRList = res;
+      });
+      this.processes.GetToApprovedEvents('MDGPR','false').subscribe(res=>{
+        this.showLoader = false;
+        this.eventsMDGPRList = res;
+      });
+    }
+    async openApproveModal(eventSerialNumber){
+      const modal = await this.modalController.create({
+        component: ApproveEventModalPage,
+        componentProps:{
+          serialNumber: eventSerialNumber,
+        },
+        cssClass: 'cal-modal',
+        backdropDismiss: false
+      });
+  
+      await modal.present();
+  
+      modal.onDidDismiss();
+    }
+    doRefresh(event) {
+      this.LoadToApproveEvents();
+      console.log('refresh');
+      setTimeout(() => {
+         event.target.complete();
+       }, 2000);
+    }
+    close(){
+      console.log('close')
+      this.cloneAllmobileComponent.emit();
+    }
+
+  }
+