Improve generic component

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();
+    }
+
+  }
+