Attendee Modal

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

@@ -3,18 +3,8 @@
     <ion-title>attendees</ion-title>
   </ion-toolbar>
 </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-list>
-
-
-  <!-- 
-  <ion-toolbar >
+  <ion-toolbar>
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="required">
         Necessários
@@ -25,10 +15,6 @@
     </ion-segment>
   </ion-toolbar>
   <div [ngSwitch]="segment">
-    <ion-searchbar
-      [showCancelButton]=""
-      (ionChange)="onChange($event)">
-    </ion-searchbar>
     <ion-list>
       <ion-item-sliding>
         <ion-item lines="none" *ngFor="let attendee of eventAttendees">
@@ -43,5 +29,10 @@
         </ion-item>
       </ion-item-sliding>
     </ion-list>
-  </div>TABS -->
+  </div>
 </ion-content>
+<ion-footer class="ion-no-border">
+  <ion-button (click)="addAttendees()" expand="block">
+    <ion-lable>Adicionar intervenientes</ion-lable>
+  </ion-button>
+</ion-footer>

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

@@ -1,6 +1,8 @@
 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 { AttendeeModalPage } from '../attendee-modal/attendee-modal.page';
 
 @Component({
   selector: 'app-attendees',
@@ -16,7 +18,7 @@ export class AttendeesPage implements OnInit {
 
   searchCountryString = ''; // initialize your searchCountryString string empty
 
-  constructor(private eventService: EventsService) { 
+  constructor(private eventService: EventsService, private modalCtrl: ModalController) { 
   }
 
 
@@ -28,26 +30,6 @@ export class AttendeesPage implements OnInit {
     this.loadAttendees();
   }
 
-  searchCountry(searchbar) {
-    // reset countries list with initial call
-    this.eventAttendees = this.eventAttendeesInitial;
-
-    // set q to the value of the searchbar
-    var q = searchbar.value;
-
-    // if the value is an empty string don't filter the items
-    // if (q.trim() == '') {
-    //     return;
-    // }
-
-    this.eventAttendees = this.eventAttendees.filter((v) => {
-        if (v.Name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
-            return true;
-        }
-        return false;
-    })
-  }
-
   loadAttendees(){
     let isRequired: boolean = (this.segment == "required");
     this.eventAttendees = this.eventService.lastloadedevent.Attendees.filter(function(person) {
@@ -55,8 +37,16 @@ export class AttendeesPage implements OnInit {
     });
     this.eventAttendeesInitial = this.eventAttendees;
   }
-
-  onChange(evt: any) {
-    console.log(evt);  
+  
+  async addAttendees()
+  {
+    const modal = await this.modalCtrl.create({
+      component: AttendeeModalPage,
+      cssClass: 'attendee-modal',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
   }
-}
+
+}