Attendees Enhancments

src/app/pages/events/attendee-modal/attendee-modal.page.html

@@ -1,15 +1,26 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <ion-toolbar>
-    <ion-title>attendee-modal</ion-title>
+    <ion-title>Adicionar intervenientes</ion-title>
   </ion-toolbar>
+  <ion-searchbar [(ngModel)]="searchCountryString" (ionChange)="onChange($event)" placeholder="Search"></ion-searchbar>
+  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
 </ion-header>
 
 <ion-content>
-  <ion-searchbar [(ngModel)]="searchCountryString" (input)="searchCountry($event)" placeholder="Search"></ion-searchbar>
   <ion-list>
-      <button ion-item *ngFor="let attendee of eventAttendees">
-          {{attendee.Name}}
-      </button>
+    <ion-item-sliding>
+      <ion-item lines="none" *ngFor="let attendee of contacts">
+        <ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectContact(attendee)"></ion-checkbox>
+        <div class="div-item">
+          <div class="div-up">
+            <div class="div-content-attachment">
+              <h3>{{ attendee.Name }}</h3>
+              <p>{{ attendee.EmailAddress }}</p>
+            </div>
+          </div>
+        </div>
+      </ion-item>
+    </ion-item-sliding>
   </ion-list>
 </ion-content>
 <ion-footer class="ion-no-border">

src/app/pages/events/attendee-modal/attendee-modal.page.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { ContactsService } from 'src/app/services/contacts.service';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { ThrowStmt, removeSummaryDuplicates } from '@angular/compiler';
 
 @Component({
   selector: 'app-attendee-modal',
@@ -8,42 +11,51 @@ import { ModalController } from '@ionic/angular';
 })
 export class AttendeeModalPage implements OnInit {
 
-  constructor(private modalCtrl: ModalController) { }
+  contacts: EventPerson[];
+  showLoader: boolean = false;
+  eventPersons: EventPerson[];
+
+  constructor(private modalCtrl: ModalController, private contactsService: ContactsService) { }
 
   ngOnInit() {
+    this.fetchContacts("");
   }
 
   save(){
-    //this.eventService.postEvent(this.postEvent, this.postEvent.CalendarName).subscribe();
-    this.modalCtrl.dismiss();
+    this.modalCtrl.dismiss(this.contacts.filter(function(contact) {
+      return contact.IsRequired == true;
+    }));
   }
 
   close(){
-    this.modalCtrl.dismiss();
+    this.modalCtrl.dismiss(null);
   }
 
   onChange(evt: any) {
-    console.log(evt);  
+    this.fetchContacts(evt.detail.value);
   }
 
-  searchCountry(searchbar) {
-    // reset countries list with initial call
-    //this.eventAttendees = this.eventAttendeesInitial;
+  selectContact(itm: EventPerson){
+    itm.IsRequired = !itm.IsRequired;
+  }
 
-    // set q to the value of the searchbar
-    var q = searchbar.value;
+  async fetchContacts(filter: string) {
+    this.showLoader = true;
 
-    // if the value is an empty string don't filter the items
-    // if (q.trim() == '') {
-    //     return;
-    // }
+    this.contactsService.getContacts(filter).subscribe(result =>
+      {
+        this.eventPersons.forEach(attendee => {
+          const index: number = result.findIndex((cont) => {
+            return cont.EmailAddress == attendee.EmailAddress
+          });
 
-    // this.eventAttendees = this.eventAttendees.filter((v) => {
-    //     if (v.Name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
-    //         return true;
-    //     }
-    //     return false;
-    // })
+          result.splice(index, 1);
+        });
+
+        this.contacts = result;
+        this.showLoader = false;
+      }
+    );
   }
 
 }

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

@@ -1,9 +1,10 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <ion-toolbar>
-    <ion-title>attendees</ion-title>
+    <ion-title>Intervenientes</ion-title>
   </ion-toolbar>
-</ion-header>
-<ion-content>
+  <ion-button (click)="addAttendees()" expand="block">
+    <ion-label>Adicionar intervenientes</ion-label>
+  </ion-button>
   <ion-toolbar>
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="required">
@@ -14,10 +15,12 @@
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
+</ion-header>
+<ion-content>
   <div [ngSwitch]="segment">
     <ion-list>
       <ion-item-sliding>
-        <ion-item lines="none" *ngFor="let attendee of eventAttendees">
+        <ion-item lines="none" *ngFor="let attendee of showAttendees">
           <div class="div-item">
             <div class="div-up">
               <div class="div-content-attachment">
@@ -32,7 +35,18 @@
   </div>
 </ion-content>
 <ion-footer class="ion-no-border">
-  <ion-button (click)="addAttendees()" expand="block">
-    <ion-lable>Adicionar intervenientes</ion-lable>
-  </ion-button>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-button (click)="close()">
+        <ion-label>Cancelar</ion-label>
+        <ion-icon name="close" slot="start"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button (click)="save()">
+        <ion-label>Gravar</ion-label>
+        <ion-icon name="checkmark" slot="start"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
 </ion-footer>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { EventsService } from 'src/app/services/events.service';
-import { ModalController } from '@ionic/angular';
+import { ModalController, NavController } from '@ionic/angular';
 import { AttendeeModalPage } from '../attendee-modal/attendee-modal.page';
 
 @Component({
@@ -11,14 +11,15 @@ import { AttendeeModalPage } from '../attendee-modal/attendee-modal.page';
 })
 export class AttendeesPage implements OnInit {
 
-  eventAttendeesInitial: EventPerson[];
   eventAttendees: EventPerson[];
   segment:string = "required";
   shouldShowCancel:boolean = true;
+  showAttendees: EventPerson[];
 
   searchCountryString = ''; // initialize your searchCountryString string empty
 
-  constructor(private eventService: EventsService, private modalCtrl: ModalController) { 
+  constructor(private eventService: EventsService, private modalCtrl: ModalController, 
+    private navCtrl: NavController) { 
   }
 
 
@@ -31,22 +32,49 @@ export class AttendeesPage implements OnInit {
   }
 
   loadAttendees(){
-    let isRequired: boolean = (this.segment == "required");
-    this.eventAttendees = this.eventService.lastloadedevent.Attendees.filter(function(person) {
-      return person.IsRequired == isRequired;
+    let isrequired: boolean = (this.segment == "required");
+    this.showAttendees = this.eventAttendees.filter(function(person) {
+      return person.IsRequired == isrequired;
     });
-    this.eventAttendeesInitial = this.eventAttendees;
+  }
+
+  save(){
+    this.modalCtrl.dismiss(this.eventAttendees);
+  }
+
+  close(){
+    this.modalCtrl.dismiss(null);
   }
   
   async addAttendees()
   {
     const modal = await this.modalCtrl.create({
       component: AttendeeModalPage,
+      componentProps: {
+        eventPersons: this.eventAttendees
+      },
       cssClass: 'attendee-modal',
       backdropDismiss: false
     });
+
     await modal.present();
-    modal.onDidDismiss();
+
+    modal.onDidDismiss().then((data) => {
+      let newattendees: EventPerson[] = data['data'];
+      
+      if (newattendees != null)
+      {
+        newattendees.forEach(newattendee => {
+          let att = {
+            "EmailAddress": newattendee.EmailAddress,
+            "Name": newattendee.Name,
+            "IsRequired": (this.segment == "required")
+          };
+          this.eventAttendees.push(att);
+          this.showAttendees.push(att);
+        });
+      }
+    });
   }
 
 }

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

@@ -23,8 +23,7 @@
       <ion-input [(ngModel)]='loadedEvent.Location'></ion-input>
     </ion-item>
     <ion-item-sliding>
-      <ion-item
-        [routerLink]="['/home/attendees']">
+      <ion-item (click)="openAttendees()">
         <ion-label position="stacked">Pessoas</ion-label>
       </ion-item>
     </ion-item-sliding>

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

@@ -4,8 +4,9 @@ import { EventsService } from 'src/app/services/events.service';
 import { Router } from '@angular/router';
 import { Event } from '../../../models/event.model';
 import { EventBody } from 'src/app/models/eventbody.model';
-import { AlertController } from '@ionic/angular';
+import { AlertController, ModalController } from '@ionic/angular';
 import { EventPerson } from 'src/app/models/eventperson.model';
+import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
 
 @Component({
   selector: 'app-event-detail',
@@ -16,7 +17,7 @@ export class EventDetailPage implements OnInit {
 
   loadedEvent: Event;
 
-  constructor(public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService) { 
+  constructor(public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService, private modalCtrl: ModalController) { 
     this.loadedEvent = new Event();
     this.loadedEvent.Body = new EventBody();
   }
@@ -37,12 +38,32 @@ export class EventDetailPage implements OnInit {
         this.eventsService.getEvent(paramMap.get('eventId')).subscribe(response => 
           {
             this.loadedEvent = response;
-            this.eventsService.lastloadedevent = this.loadedEvent;
+            //this.eventsService.lastloadedevent = this.loadedEvent;
           });
       }
     );
   }
 
+  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) => {
+      let newattendees: EventPerson[] = data['data'];
+      this.loadedEvent.Attendees = newattendees;
+      console.log(this.loadedEvent.Attendees);
+    });
+}
+
   getEventAttendees(): EventPerson[]
   {
     return this.loadedEvent.Attendees;