From 28dc0f3e2255390f673dc66e7f3c7f1c8a61c83f Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Mon, 29 Mar 2021 13:12:35 +0100
Subject: [PATCH 1/4] Improve Attendees component for agenda

---
 src/app/pages/agenda/agenda.page.html         | 17 ++----
 .../attendee-modal/attendee-modal.page.html   | 53 +++++++++++++-----
 .../attendee-modal/attendee-modal.page.scss   |  7 ++-
 .../attendee-modal/attendee-modal.page.ts     | 56 ++++++++++++++++---
 src/assets/images/icons-userprofile.svg       | 27 +++++++++
 src/global.scss                               |  2 +-
 6 files changed, 126 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/images/icons-userprofile.svg

diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index e6b055576..20181704c 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -380,22 +380,15 @@
       >
 
       </app-approve-event>
+    
       
-      <app-attendees
-        class="d-flex flex-column height-100" 
-        *ngIf="mobileComponent.showAttendees"
-        (openAttendeeModal)="openAttendeeModal()"
-        [eventAttendees]="contacts"
-        (openAddEvent)="openAddEvent($event)"
-        (GoBackEditOrAdd)="GoBackEditOrAdd()"
-      >
-      </app-attendees>
-      
-
       <app-attendee-modal
         class="d-flex flex-column height-100" 
-        *ngIf="mobileComponent.showAttendeeModal"
+        *ngIf="mobileComponent.showAttendees"
+        [eventAttendees]="contacts"
         (openAttendeesComponent)="openAttendeesComponent($event)"
+        (openAddEvent)="openAddEvent()"
+        (GoBackEditOrAdd)="GoBackEditOrAdd()"
       >
       </app-attendee-modal>
 
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.html b/src/app/shared/event/attendee-modal/attendee-modal.page.html
index d8fe8f3c3..07e98b94f 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.html
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.html
@@ -6,21 +6,46 @@
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
 </ion-header>
 
-<ion-content>
-  <ion-item-group>
-  <ion-list>
-    <ion-item-sliding>
-      <ion-item *ngFor="let attendee of contacts">
-        <ion-checkbox slot="end" (ionChange)="selectContact(attendee)"></ion-checkbox><!-- [disabled]="isCheckboxDisabled" -->
-        <ion-label>
-          <h3>{{ attendee.Name }}</h3>
-          <p>{{ attendee.EmailAddress }}</p>
-        </ion-label>
-      </ion-item>
-    </ion-item-sliding>
-  </ion-list>
-</ion-item-group>
+<ion-content class="height-100">
+  
+  <ion-item-group class="d-flex flex-column height-100">
+    <ion-list class="flex-grow-1 overflow-y-auto height-100" >
+      <ion-item-sliding>
+        <div *ngFor="let attendee of contacts;">
+          <ion-item (click)="selectContact(attendee)" *ngIf="checkbox(attendee)" >
+            <div class="pr-10">
+              <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+            </div>
+            <ion-label>
+              <h3>{{ attendee.Name }}</h3>
+              <p>{{ attendee.EmailAddress }}</p>
+            </ion-label>
+          </ion-item>
+        </div>
+
+      </ion-item-sliding>
+    </ion-list>
+    <hr/>
+    <ion-list lines="none" *ngIf="selectedContact.length >= 1" class="flex-grow-1 overflow-y-auto height-100" style="border-top:1px solid #ebebeb">
+      <ion-item-sliding>
+        <ion-item *ngFor="let attendee of selectedContact;" class="d-flex">
+          <div class="pr-10">
+            <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+          </div>
+          <ion-label>
+            <h3>{{ attendee.Name }}</h3>
+            <p>{{ attendee.EmailAddress }}</p>
+          </ion-label>
+          <div style="color:red" (click)="remove(attendee)">
+            X
+          </div>
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </ion-item-group>
+
 </ion-content>
+
 <ion-footer class="ion-no-border">
   <ion-toolbar class="width-100 d-flex justify-space-between px-20">
     <ion-buttons slot="start">
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.scss b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
index 9cee55e1d..a7688a8e7 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.scss
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
@@ -1,6 +1,9 @@
 ion-item-group{
-    margin: 15px;
+
   }
 ion-searchbar{
     --border-radius: 20px;
-}
\ No newline at end of file
+}
+.item-inner{
+  border-style: unset !important;
+  }
\ No newline at end of file
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.ts b/src/app/shared/event/attendee-modal/attendee-modal.page.ts
index 90c08513e..b99bd5059 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.ts
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { ContactsService } from 'src/app/services/contacts.service';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -12,22 +12,27 @@ export class AttendeeModalPage implements OnInit {
 
   contacts: EventPerson[];
   showLoader: boolean = false;
+  selectedContact: EventPerson[] =[];
   eventPersons: EventPerson[];
 
+  @Input() eventAttendees: EventPerson[];
+
   constructor(private modalCtrl: ModalController, private contactsService: ContactsService) { }
 
   @Output() openAttendeesComponent = new EventEmitter<any>();
+  @Output() GoBackEditOrAdd = new EventEmitter<any>();
   
   ngOnInit() {
     this.fetchContacts("");
+    this.selectedContact = this.eventAttendees;
   }
 
   save(){
-    
-    this.openAttendeesComponent.emit(this.contacts.filter(function(contact) {
-      return contact.IsRequired == true;
-    }));
 
+    // set data to agenda component
+    this.openAttendeesComponent.emit(this.selectedContact);
+    // got back
+    this.GoBackEditOrAdd.emit();
   }
 
   close(){
@@ -39,8 +44,45 @@ export class AttendeeModalPage implements OnInit {
     this.fetchContacts(evt.detail.value);
   }
 
-  selectContact(itm: EventPerson){
-    itm.IsRequired = !itm.IsRequired;
+
+  checkbox(itm: EventPerson): boolean {
+    const result = this.selectedContact.find((contact, index)=>{
+       
+      if(contact.Name == itm.Name && contact.EmailAddress == itm.EmailAddress){
+        index = index;
+        return contact;
+      }
+    });
+
+    return undefined == result;
+  }
+
+  remove(itm: EventPerson){
+
+    this.selectedContact = this.selectedContact.filter((contact, index) =>{
+
+      if(contact.Name != itm.Name && contact.EmailAddress != itm.EmailAddress){
+        return contact;
+      }
+      return false;
+
+    });
+  
+  }
+
+  async selectContact(itm: EventPerson){
+
+    const index = 0;
+    const findIndex = this.selectedContact.find((contact, index)=>{
+       
+      if(contact.Name == itm.Name && contact.EmailAddress == itm.EmailAddress){
+        index = index;
+        return contact;
+      }
+    });
+
+    this.selectedContact.push(itm);
+    
   }
 
   async fetchContacts(filter: string) {
diff --git a/src/assets/images/icons-userprofile.svg b/src/assets/images/icons-userprofile.svg
new file mode 100644
index 000000000..d02f18900
--- /dev/null
+++ b/src/assets/images/icons-userprofile.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
+    <defs>
+        <circle id="nbs0qtv3ga" cx="17.5" cy="17.5" r="17.5"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <g transform="translate(-20 -466) translate(0 99) translate(20 327) translate(0 35) translate(0 5)">
+                            <rect width="35" height="35" fill="#FFF" fill-opacity=".6" rx="17.5"/>
+                            <g>
+                                <mask id="413y7q8i5b" fill="#fff">
+                                    <use xlink:href="#nbs0qtv3ga"/>
+                                </mask>
+                                <path fill="#42B9FE" fill-opacity=".7" d="M17.5 8.167c4.51 0 8.167 3.917 8.167 8.75 0 3.035-1.443 5.71-3.634 7.279 4.85 1.914 8.3 6.813 8.3 12.554 0 7.41-5.745 13.417-12.833 13.417S4.667 44.16 4.667 36.75c0-5.741 3.45-10.64 8.3-12.556-2.191-1.567-3.634-4.242-3.634-7.277 0-4.833 3.657-8.75 8.167-8.75z" mask="url(#413y7q8i5b)"/>
+                            </g>
+                            <text fill="#FFF" fill-opacity=".7" font-family="Roboto-Light, Roboto" font-size="20" font-weight="300">
+                                <tspan x="5.889" y="21.778">SE</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/global.scss b/src/global.scss
index 9827908ce..c9f4d20a5 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -487,7 +487,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     .timeline-box{
         left: -13%;
         position: relative;
-        width: 115%;
+        width: 113%;
     }
 }
 

From 7020c668ab7851974f8e1b1f3f98415b866bbf7b Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Mon, 29 Mar 2021 13:44:48 +0100
Subject: [PATCH 2/4] Fixe bug for  Attendees component in agenda

---
 src/app/pages/agenda/agenda.page.html                      | 1 +
 src/app/pages/agenda/agenda.page.ts                        | 2 +-
 src/app/shared/event/attendee-modal/attendee-modal.page.ts | 6 ++++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 20181704c..a1f53fca9 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -389,6 +389,7 @@
         (openAttendeesComponent)="openAttendeesComponent($event)"
         (openAddEvent)="openAddEvent()"
         (GoBackEditOrAdd)="GoBackEditOrAdd()"
+        (setContact)="setContact($event)"
       >
       </app-attendee-modal>
 
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index ab46f0367..fafddf780 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -958,7 +958,7 @@ export class AgendaPage implements OnInit {
 
 
     if(Array.isArray(data)){
-      if(data.length != 0){
+      if(data.length >= 1){
        
         console.log('save!!!',data.length);
         console.log(data);
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.ts b/src/app/shared/event/attendee-modal/attendee-modal.page.ts
index b99bd5059..b26568c75 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.ts
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.ts
@@ -21,6 +21,7 @@ export class AttendeeModalPage implements OnInit {
 
   @Output() openAttendeesComponent = new EventEmitter<any>();
   @Output() GoBackEditOrAdd = new EventEmitter<any>();
+  @Output() setContact = new EventEmitter<any>();
   
   ngOnInit() {
     this.fetchContacts("");
@@ -30,14 +31,15 @@ export class AttendeeModalPage implements OnInit {
   save(){
 
     // set data to agenda component
-    this.openAttendeesComponent.emit(this.selectedContact);
+    this.setContact.emit(this.selectedContact);
     // got back
     this.GoBackEditOrAdd.emit();
   }
 
   close(){
     // this.modalCtrl.dismiss(null);
-    this.openAttendeesComponent.emit(false);
+    this.selectedContact = [];
+    this.GoBackEditOrAdd.emit();
   }
 
   onChange(evt: any) {

From 8dca7f3a8176920ef2f2ec63e708dc253db10aba Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Mon, 29 Mar 2021 13:49:00 +0100
Subject: [PATCH 3/4] Improve Attendees component for agenda

---
 .../shared/event/attendee-modal/attendee-modal.page.html  | 4 ++--
 .../shared/event/attendee-modal/attendee-modal.page.scss  | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.html b/src/app/shared/event/attendee-modal/attendee-modal.page.html
index 07e98b94f..423ba2fb6 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.html
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.html
@@ -2,7 +2,7 @@
   <ion-toolbar>
     <ion-title>Adicionar intervenientes</ion-title>
   </ion-toolbar>
-  <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
+  <ion-searchbar class="search-bar" (ionChange)="onChange($event)" placeholder="Pesquisar"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
 </ion-header>
 
@@ -56,7 +56,7 @@
     </ion-buttons>
     <ion-buttons slot="end">
       <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
-        <ion-label>Adicionar</ion-label>
+        <ion-label>Gravar</ion-label>
         <ion-icon name="checkmark" slot="start"></ion-icon>
       </ion-button>
     </ion-buttons>
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.scss b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
index a7688a8e7..29eca4517 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.scss
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
@@ -6,4 +6,10 @@ ion-searchbar{
 }
 .item-inner{
   border-style: unset !important;
-  }
\ No newline at end of file
+  }
+
+.search-bar{
+  border: 1px solid #cecece;
+  box-shadow: none;
+  border-radius: 3px;
+}  
\ No newline at end of file

From fd8aaaa84473d0cf87ebb7392b6ffbf8902d62a8 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Mon, 29 Mar 2021 14:08:20 +0100
Subject: [PATCH 4/4] Improve Attendees component for agenda

---
 .../attendee-modal/attendee-modal.page.html   | 14 +++++------
 .../attendee-modal/attendee-modal.page.scss   |  6 -----
 src/global.scss                               | 24 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.html b/src/app/shared/event/attendee-modal/attendee-modal.page.html
index 423ba2fb6..bc5583568 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.html
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.html
@@ -1,16 +1,16 @@
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Adicionar intervenientes</ion-title>
+<ion-header class="ion-no-border px-20">
+  <ion-toolbar class="px-10">
+    <ion-title class="pa-0">Adicionar intervenientes</ion-title>
   </ion-toolbar>
-  <ion-searchbar class="search-bar" (ionChange)="onChange($event)" placeholder="Pesquisar"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
+  <ion-searchbar class="attendee-search-bar" (ionChange)="onChange($event)" placeholder="Pesquisar"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
 </ion-header>
 
-<ion-content class="height-100">
+<ion-content class="height-100 ">
   
   <ion-item-group class="d-flex flex-column height-100">
     <ion-list class="flex-grow-1 overflow-y-auto height-100" >
-      <ion-item-sliding>
+      <ion-item-sliding class="px-20">
         <div *ngFor="let attendee of contacts;">
           <ion-item (click)="selectContact(attendee)" *ngIf="checkbox(attendee)" >
             <div class="pr-10">
@@ -27,7 +27,7 @@
     </ion-list>
     <hr/>
     <ion-list lines="none" *ngIf="selectedContact.length >= 1" class="flex-grow-1 overflow-y-auto height-100" style="border-top:1px solid #ebebeb">
-      <ion-item-sliding>
+      <ion-item-sliding class="px-20">
         <ion-item *ngFor="let attendee of selectedContact;" class="d-flex">
           <div class="pr-10">
             <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.scss b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
index 29eca4517..b8645df58 100644
--- a/src/app/shared/event/attendee-modal/attendee-modal.page.scss
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
@@ -7,9 +7,3 @@ ion-searchbar{
 .item-inner{
   border-style: unset !important;
   }
-
-.search-bar{
-  border: 1px solid #cecece;
-  box-shadow: none;
-  border-radius: 3px;
-}  
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index c9f4d20a5..d66c9c9a3 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -508,4 +508,26 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
             padding-left: 0px;
         }
     }
-}
\ No newline at end of file
+}
+
+
+// agenda attendee component
+.attendee-search-bar input{
+    border: 1px solid #cecece !important;
+    box-shadow: none !important;
+    border-radius: 3px !important;
+    -webkit-border-radius: 3px !important;
+    -moz-border-radius: 3px !important;
+    -ms-border-radius: 3px !important;
+    -o-border-radius: 3px !important;
+  }  
+  
+  .attendee-search-bar .searchbar-input {
+    border: 1px solid #cecece !important;
+    box-shadow: none !important;
+    border-radius: 3px !important;
+    -webkit-border-radius: 3px !important;
+    -moz-border-radius: 3px !important;
+    -ms-border-radius: 3px !important;
+    -o-border-radius: 3px !important;
+  }
\ No newline at end of file