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>