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