Many changes

Edit event

src/app/pages/events/event-detail-modal/event-detail-modal-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventDetailModalPage } from './event-detail-modal.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventDetailModalPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventDetailModalPageRoutingModule {}

src/app/pages/events/event-detail-modal/event-detail-modal.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 { EventDetailModalPageRoutingModule } from './event-detail-modal-routing.module';
+
+import { EventDetailModalPage } from './event-detail-modal.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventDetailModalPageRoutingModule
+  ],
+  declarations: [EventDetailModalPage]
+})
+export class EventDetailModalPageModule {}

src/app/pages/events/event-detail-modal/event-detail-modal.page.html

@@ -0,0 +1,215 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="{{ backURL }}"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Visualizar Evento</ion-title>
+    <ion-buttons slot="end">
+      <button (click)="deleteConfirm()" class="ion-icon-delete">
+        <ion-icon name="trash"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <div *ngIf="loadedEvent">
+    <ion-item-group>
+      <ion-item-sliding>
+        <form [formGroup]="ionicForm" novalidate>
+          <ion-item>
+            <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
+            <ion-input class="capitalizeText"  [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
+          </ion-item>
+          <!-- Error messages -->
+          <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
+            Campo obrigatório
+          </span>          
+        </form>
+        <ion-item>
+          <ion-label position="stacked">Descrição</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Localização</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Location'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Calendário</ion-label>
+          <ion-select class="capitalizeText" placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+            <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Tipo do evento</ion-label>
+          <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option value="Reunião">Reunião</ion-select-option>
+            <ion-select-option value="Viagem">Viagem</ion-select-option>
+            <ion-select-option value="Conferência">Conferência</ion-select-option>
+            <ion-select-option value="Encontro">Encontro</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Data Início</ion-label>
+          <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
+            displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+        <ion-item>
+            <ion-label position="stacked">Data Fim</ion-label>
+            <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
+              displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+ 
+          <div class="div-attach" >
+            <ion-item>
+              <ion-buttons slot="end" (click)="openAttendees()">
+                <ion-label color="secondary">Editar</ion-label>
+              </ion-buttons>
+              <ion-label class="attach-label">Participantes</ion-label>
+            </ion-item>
+            <div *ngIf="loadedEvent.Attendees">
+            <div *ngFor="let attendee of loadedEvent.Attendees; let i=index">
+              <div *ngIf="i<1">
+                <ion-list >
+                  <ion-item class="attendees" lines="none" >
+                      <ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
+                      <ion-label class="capitalizeText" class="attendees-list">{{attendee.Name}}</ion-label> 
+                  </ion-item>
+                </ion-list>
+              </div>
+              
+            </div>
+            <div *ngIf="loadedEvent.Attendees.length > 1">
+              <ion-button class="see-more-button" fill="none" shape="round" (click)="openAttendees()">
+                <ion-label color="secondary">Ver mais...</ion-label>
+              </ion-button>
+            </div>
+          </div>
+          </div>
+        <div class="div-attach">
+          <ion-item>
+            <ion-buttons slot="end" (click)="showAlert()">
+              <ion-label color="secondary">Editar</ion-label>
+            </ion-buttons>
+            <ion-label class="attach-label">Anexos</ion-label>
+          </ion-item>
+          <div *ngIf="loadedEventAttachments">
+          <div *ngFor="let att of loadedEventAttachments; let j=index">
+            <div *ngIf="j<2">
+              <ion-list *ngIf="loadedEvent.HasAttachments">
+                <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+                <ion-item lines="none" (click)="viewDocument(att.Link)">
+                  <ion-icon name="attach" slot="start"></ion-icon>
+                  <ion-label>
+                      <p>{{ att.Description }}</p>
+                      <p>{{ att.CreateDate }}</p>
+                  </ion-label> 
+                </ion-item>
+              </ion-list>
+            </div>
+          </div>
+          <div *ngIf="loadedEventAttachments.length > 1">
+            <ion-button class="see-more-button" fill="none" shape="round" (click)="openAttachments()"><!-- [routerLink]="['/home/attachments', loadedEvent.EventId]" -->
+              <ion-label color="secondary">Ver mais...</ion-label>
+            </ion-button>
+          </div>
+        </div>
+          <!-- Skeleton Attachment -->
+        <ion-list *ngIf="!loadedEventAttachments">
+          <ion-item lines="none" >
+            <ion-icon name="attach" slot="start"></ion-icon>
+            <ion-label>
+                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
+                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
+            </ion-label> 
+          </ion-item>
+        </ion-list>
+        <!-- No attachment message -->
+          <ion-list *ngIf="!loadedEvent.HasAttachments">
+            <ion-item lines="none" >
+              <ion-label>
+                Sem anexos
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-item-sliding>
+    </ion-item-group>
+  </div>
+   <!-- Skeleton screen -->
+<div *ngIf="!loadedEvent">
+  <div class="ion-padding custom-skeleton">
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    <ion-skeleton-text animated></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+  </div>
+
+  <ion-list>
+    <ion-list-header>
+      <ion-label>
+        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
+      </ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="event-detail-buttons">
+      <ion-button shape="round" (click)="Save()">Gravar</ion-button>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+

src/app/pages/events/event-detail-modal/event-detail-modal.page.scss

@@ -0,0 +1,95 @@
+ion-item-group{
+  margin: 15px;
+}
+.div-item{
+  width: 100%;
+  overflow: auto;
+  border-bottom: 1px solid #ccc;
+  margin: 10px 0 5px 0;
+}
+.div-up{
+  width: 100%;
+  overflow: auto;
+}
+.div-up h3{
+  margin: 0;
+  padding: 0;
+  font-size: 17px;
+  width: 100%;
+}
+.div-icon{
+  width: 10%;
+  font-size: 22px;
+  float: left;
+  color: #808080;
+}
+.div-icon ion-icon{
+  display: block;
+  margin: 0 auto;
+
+}
+.div-content-attachment{
+  width: 85%;
+  float: left;
+  padding: 0 0 0 12px;
+}
+.ion-icon-attach{
+  color: #666666;
+  font-size: 20px;
+}
+
+.btn-attach{
+  margin: 15px 0 0 0;
+  --color: #333;
+  --border-color:#333;
+}
+.div-card-button{
+  width: 100%;
+  overflow: auto;
+  padding: 0 !important;
+}
+ion-card{
+  margin: 2.5% !important;
+  width: 45%;
+  float: left;
+}
+.center{
+  text-align: center;
+  float: center;
+}
+
+/* FFOTER */
+.event-detail-buttons{
+  width: 90%;
+  margin: 10px auto;
+}
+.event-detail-buttons ion-button{
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+  margin-bottom: 25px;
+}
+.ion-icon-delete{
+  font-size: 22px;
+  color: red;
+  background-color: white;
+  padding-right: 5px;
+}
+.error{
+  color:red;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 20px;
+}
+/* .event-detail-buttons{
+  margin-bottom: 80px;
+  margin-top: 10px;
+} */
+.attendees-icon{
+  font-size: 14px;
+}
+.see-more-button{
+  text-transform: initial;
+  font-size: 16px;
+}
+

src/app/pages/events/event-detail-modal/event-detail-modal.page.spec.ts

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

src/app/pages/events/event-detail-modal/event-detail-modal.page.ts

@@ -0,0 +1,227 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlertController, ModalController, NavParams } from '@ionic/angular';
+import { Attachment } from 'src/app/models/attachment.model';
+import { Event } from 'src/app/models/event.model';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { AlertService } from 'src/app/services/alert.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { EventsService } from 'src/app/services/events.service';
+import { AttachmentsPage } from '../attachments/attachments.page';
+import { AttendeesPage } from '../attendees/attendees.page';
+
+@Component({
+  selector: 'app-event-detail-modal',
+  templateUrl: './event-detail-modal.page.html',
+  styleUrls: ['./event-detail-modal.page.scss'],
+})
+export class EventDetailModalPage implements OnInit {
+
+  loadedEvent: Event;
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+  showLoader: boolean;
+  backURL: string;
+  ionicForm: FormGroup;
+  isSubmitted = false;
+
+  minDate: Date;
+
+  profile:string;
+
+  constructor(
+    public formBuilder: FormBuilder, 
+    public alertController: AlertController, 
+    private router: Router, 
+    private activatedRoute: ActivatedRoute, 
+    private eventsService: EventsService, 
+    private modalCtrl: ModalController,
+    private alertService: AlertService,
+    private attachamentsService: AttachmentsService,
+    private route: Router,
+    private iab: InAppBrowser) { 
+      this.loadedEvent = new Event();
+      this.loadedEvent.Body = new EventBody();
+    }
+  ngOnInit() {
+    this.loadEvent();
+    this.loadAttachments();
+    this.ionicForm = this.formBuilder.group({
+      subject: ['', [Validators.required]]
+    })
+  }
+
+  get errorControl() {
+    return this.ionicForm.controls;
+  }
+
+  loadEvent(){
+    let eventid: string;
+    this.activatedRoute.paramMap.subscribe(paramMap =>
+      {
+        if (!paramMap.has("eventId")){
+          return;
+        }
+        else{
+          this.pageId = paramMap.get('eventId');
+          eventid = paramMap.get('eventId');
+          console.log(eventid);
+          
+        }
+        if (paramMap.has("caller")){
+          this.backURL = "/home/" + paramMap.get('caller');
+        }
+      }
+    );
+    this.eventsService.getEvent(eventid).subscribe(response => {
+        this.loadedEvent = response;
+      });
+  }
+
+  async openAttendees(){
+    const modal = await this.modalCtrl.create({
+      component: AttendeesPage,
+       componentProps: {
+        eventAttendees: this.loadedEvent.Attendees
+      },
+      cssClass: 'attendee',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then((data) => {
+      if (data['data'] != null)
+      { 
+        let newattendees: EventPerson[] = data['data'];
+        this.loadedEvent.Attendees = newattendees;
+      }
+    });
+}
+
+  getEventAttendees(): EventPerson[]
+  {
+    return this.loadedEvent.Attendees;
+  }
+
+  setEventAttendees(newattendes: EventPerson[])
+  {
+     this.loadedEvent.Attendees = newattendes;
+  }
+
+  async deleteConfirm()
+  {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Apagar evento!',
+      message: 'Deseja <strong>apagar</strong> o evento da agenda ' + this.loadedEvent.CalendarName + '?',
+      buttons: [
+        {
+          text: 'Não',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => { }
+        }, {
+          text: 'Sim',
+          handler: () => {
+            this.Delete();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  Delete()
+  {
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento removido',
+          buttons: ['OK']
+        });
+    
+        await alert.present();
+
+        this.router.navigate(['/home/events']);
+      });  
+  }
+
+  Save()
+  {
+    if (this.ionicForm.valid) 
+    {
+
+     this.eventsService.putEvent(this.loadedEvent, 2, 3, "md").subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento actualizado',
+          buttons: ['OK']
+        });
+  
+        await alert.present();
+      });
+    }
+  }
+
+  showAlert(){
+    this.alertService.presentAlert("Funcionalidade em desenvolvimento");
+  }
+
+  loadAttachments()
+  { 
+    /* this.attachamentsService.getEventAttachments(this.pageId).subscribe(attachments => {
+      this.loadedEventAttachments = attachments;
+    }); */
+  }
+  async viewDocument(documenturl:string)
+  {
+    const url: string = documenturl.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    /* const browser = this.iab.create(url,"_blank");
+    browser.show(); */
+  }
+
+  back()
+  {
+    //this.back();
+  }
+  doRefresh(event){
+    /* this.RefreshEvents(); */
+    event.target.complete();
+     setTimeout(() => {
+       event.target.complete();
+     }, 2000);
+
+  }
+  navigateTo(ev){
+    this.route.navigate(['/home/events',ev]);
+  }
+  async openAttachments(){
+      const modal = await this.modalCtrl.create({
+        component: AttachmentsPage,
+         componentProps: {
+           eventId: this.pageId,
+          attachments: this.loadedEventAttachments
+        },
+        cssClass: 'attachments',
+        backdropDismiss: false
+      });
+  
+      await modal.present();
+  
+      modal.onDidDismiss().then((data) => {
+        if (data['data'] != null)
+        { 
+          let newattendees: EventPerson[] = data['data'];
+          this.loadedEvent.Attendees = newattendees;
+        }
+      });
+
+  }
+
+}

src/app/pages/events/event-detail/event-detail.page.html

@@ -19,7 +19,7 @@
         <form [formGroup]="ionicForm" novalidate>
           <ion-item>
             <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
-            <ion-input class="capitalizeText"  [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
+            <ion-input class="capitalizeText" [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
           </ion-item>
           <!-- Error messages -->
           <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">

src/app/pages/events/event-detail/event-detail.page.ts

@@ -32,8 +32,11 @@ export class EventDetailPage implements OnInit {
 
   minDate: Date;
 
+  profile:string;
 
-  constructor(public formBuilder: FormBuilder, 
+
+  constructor(
+    public formBuilder: FormBuilder, 
     public alertController: AlertController, 
     private router: Router, 
     private activatedRoute: ActivatedRoute, 
@@ -155,9 +158,16 @@ export class EventDetailPage implements OnInit {
 
   Save()
   {
-    if (this.ionicForm.valid) 
-    {
-     this.eventsService.putEvent(this.loadedEvent, 2, 3, "md").subscribe(async () => 
+    if (this.ionicForm.valid){
+
+      this.activatedRoute.paramMap.subscribe(paramMap =>{
+        if (paramMap.has("profile")){
+          console.log(paramMap.get('profile'));
+          
+        }
+      });
+
+     this.eventsService.editEvent(this.loadedEvent, 2, 3).subscribe(async () => 
       {
         const alert = await this.alertController.create({
           cssClass: 'my-custom-class',
@@ -176,9 +186,11 @@ export class EventDetailPage implements OnInit {
 
   loadAttachments()
   { 
-    /* this.attachamentsService.getEventAttachments(this.pageId).subscribe(attachments => {
+    console.log(this.pageId);
+    
+    this.attachamentsService.getEventAttachments(this.pageId).subscribe(attachments => {
       this.loadedEventAttachments = attachments;
-    }); */
+    });
   }
   async viewDocument(documenturl:string)
   {

src/app/pages/events/events-routing.module.ts

@@ -1,33 +1,37 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { EventsPage } from './events.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: EventsPage
-  },
-  {
-    path: 'event-detail',
-    loadChildren: () => import('./event-detail/event-detail.module').then( m => m.EventDetailPageModule)
-  },
-  {
-    path: 'attachments',
-    loadChildren: () => import('./attachments/attachments.module').then( m => m.AttachmentsPageModule)
-  },
-  {
-    path: 'attendees',
-    loadChildren: () => import('./attendees/attendees.module').then( m => m.AttendeesPageModule)
-  },
-  {
-    path: 'attendee-modal',
-    loadChildren: () => import('./attendee-modal/attendee-modal.module').then( m => m.AttendeeModalPageModule)
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventsPage } from './events.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventsPage
+  },
+  {
+    path: 'event-detail',
+    loadChildren: () => import('./event-detail/event-detail.module').then( m => m.EventDetailPageModule)
+  },
+  {
+    path: 'attachments',
+    loadChildren: () => import('./attachments/attachments.module').then( m => m.AttachmentsPageModule)
+  },
+  {
+    path: 'attendees',
+    loadChildren: () => import('./attendees/attendees.module').then( m => m.AttendeesPageModule)
+  },
+  {
+    path: 'attendee-modal',
+    loadChildren: () => import('./attendee-modal/attendee-modal.module').then( m => m.AttendeeModalPageModule)
+  },
+  {
+    path: 'event-detail-modal',
     loadChildren: () => import('./event-detail-modal/event-detail-modal.module').then( m => m.EventDetailModalPageModule)
-];
   }
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class EventsPageRoutingModule {}
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})

src/app/pages/events/events.page.html

@@ -97,7 +97,7 @@
     <ion-list *ngSwitchCase="'Oficial'">
       <ion-item-group>
         <ion-item-sliding>
-          <ion-item lines="none" 
+          <ion-item lines="none"
           *ngFor="let event of officialeventsList"
           [routerLink]="['/home/events', event.EventId, 'events']">
             <div class="div-item-{{event.CalendarName}}">

src/app/pages/events/events.page.ts

@@ -7,6 +7,11 @@ import { ActivatedRoute, NavigationEnd } from '@angular/router';
 import { formatDate } from '@angular/common';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
+import { StorageService } from 'src/app/services/storage.service';
+import { AuthConnstants } from 'src/app/config/auth-constants';
+import { ModalController } from '@ionic/angular';
+import { EventDetailPage } from './event-detail/event-detail.page';
+import { EventDetailModalPage } from './event-detail-modal/event-detail-modal.page';
 
 @Component({
   selector: 'app-events',
@@ -46,8 +51,10 @@ export class EventsPage implements OnInit {
 
   constructor(private eventService: EventsService, 
     private router: Router, 
+    private storageService:StorageService,
     public activatedRoute: ActivatedRoute,
     private alertController: AlertService,
+    private modalController: ModalController,
     private authService: AuthService) {
       this.prEventList = null;
      }
@@ -57,6 +64,8 @@ export class EventsPage implements OnInit {
     this.segment = "Combinada";
     //Initialize profile as mdgpr
     this.profile = "mdgpr";
+    console.log(this.profile);
+    
 
     this.showGreeting();
 
@@ -65,6 +74,10 @@ export class EventsPage implements OnInit {
         this.RefreshEvents();
       }
     });
+    /* this.storageService.get(AuthConnstants.PROFILE).then(res=>{
+      this.profile = res;
+    }); */
+
   }
 
 
@@ -93,7 +106,6 @@ export class EventsPage implements OnInit {
               this.eventsList = res;
               console.log(this.eventsList);
               this.showLoader = false;
-           
           });
         }
         
@@ -163,5 +175,31 @@ export class EventsPage implements OnInit {
     this.router.navigate(['/home/login']);
   }
 
+  async openEventDetail1(id:any){
+    console.log(id);
+    
+    const modal = await this.modalController.create({
+      component: EventDetailPage,
+       componentProps: {
+        eventId: id,
+      },
+      cssClass: 'event-detail',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+
+  }
+  async openEventDetail(id:any) {
+    const modal = await this.modalController.create({
+      component: EventDetailModalPage,
+      componentProps: {
+        eventId: id,
+      },
+      cssClass: 'my-custom-class'
+    });
+    return await modal.present();
+  }
+
 }