From 440660c864cdc3884ede68fceb58fc17dce947d0 Mon Sep 17 00:00:00 2001
From: Melkis Hengue <henguemelkispro@yahoo.com>
Date: Sun, 27 May 2018 17:36:14 +0200
Subject: [PATCH 1/5] Added emails suggestions for feature toggle groups

---
 app/feature-toggle/feature-toggle.component.html |  8 ++++++--
 app/feature-toggle/feature-toggle.component.ts   | 11 +++++++++++
 app/users/user.service.ts                        |  8 +++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/feature-toggle/feature-toggle.component.html b/app/feature-toggle/feature-toggle.component.html
index c4e2b6cdc..831b79ae6 100644
--- a/app/feature-toggle/feature-toggle.component.html
+++ b/app/feature-toggle/feature-toggle.component.html
@@ -14,8 +14,12 @@ <h1>{{ 'feature toggles' | translate }}</h1>
           <h2 md-line>{{ featureGroup.name }}</h2>
           <div md-line class="tag-input" *ngIf="!featureGroup.isProtected">
             <label>{{ 'members' | translate }}</label>
-            <hip-email-input [(users)]="featureGroup.members" [(usersIds)]="featureGroup.members"
-                             [placeholder]="('add member' | translate)" [secondaryPlaceholder]="('members' | translate)">
+            <hip-email-input
+              [(users)]="featureGroup.members"
+              [(usersIds)]="featureGroup.members"
+              [placeholder]="('add member' | translate)"
+              (usersChange)="onFeatureGroupMembersChange($event, featureGroup.id)"
+              [secondaryPlaceholder]="('members' | translate)">
             </hip-email-input>
           </div>
           <button md-icon-button color="primary" *ngIf="!featureGroup.isProtected"
diff --git a/app/feature-toggle/feature-toggle.component.ts b/app/feature-toggle/feature-toggle.component.ts
index d4a49a1a0..f64c23436 100644
--- a/app/feature-toggle/feature-toggle.component.ts
+++ b/app/feature-toggle/feature-toggle.component.ts
@@ -97,6 +97,17 @@ export class FeatureToggleComponent implements OnInit, OnDestroy {
     );
   }
 
+  // called when the list of members of a feature group is changed
+  onFeatureGroupMembersChange(emails: Array<string>, featureGroupId: Number) {
+    let featureGroup = this.featureGroups.find((featureGroup) => {
+      return featureGroup.id == featureGroupId;
+    });
+
+    if (featureGroup) {
+      featureGroup.members = emails;
+    }
+  }
+
   editFeatureGroup(featureGroup: FeatureGroup) {
     this.featureGroupService.updateFeatureGroup(featureGroup)
       .then(
diff --git a/app/users/user.service.ts b/app/users/user.service.ts
index dbc179156..a33009d1d 100644
--- a/app/users/user.service.ts
+++ b/app/users/user.service.ts
@@ -173,11 +173,13 @@ export class UserService {
    * @returns a Promise for a Student object
    */
   public getUsers(emailId: string, role: string): Promise<User[]> {
-    return this.userStoreApiService.getUrl('/api/Users/ByEmail/' + emailId + '&role=' + role, {})
+    // return this.userStoreApiService.getUrl('/api/Users/ByEmail/' + emailId + '&role=' + role, {})
+    return this.userStoreApiService.getUrl('/api/Users?emailBeginning=' + emailId, {})
       .toPromise()
       .then(
-      (response: any) => User.extractPaginatedArrayData(response)
-      ).catch(
+      (response: any) => {
+        return User.extractPaginatedArrayData(response)
+      }).catch(
       (error: any) => this.handleError(error)
       );
   }

From ce091f2bd17ed76c2e2e7a0e103b2c46b75b5c97 Mon Sep 17 00:00:00 2001
From: Melkis Hengue <henguemelkispro@yahoo.com>
Date: Sun, 27 May 2018 17:44:12 +0200
Subject: [PATCH 2/5] user is added to feature group when the add button gets
 clicked

---
 .../email-input/email-input.component.html          | 13 ++++++++-----
 .../email-input/email-input.component.ts            |  6 +++++-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/feature-toggle/feature-groups/email-input/email-input.component.html b/app/feature-toggle/feature-groups/email-input/email-input.component.html
index 0f4fbd15f..67152edcc 100644
--- a/app/feature-toggle/feature-groups/email-input/email-input.component.html
+++ b/app/feature-toggle/feature-groups/email-input/email-input.component.html
@@ -12,12 +12,15 @@
       </span>
     </div>
   </ng-template>
-  <tag-input-dropdown [identifyBy]="'identity'" [displayBy]="'email'"
-                      [autocompleteObservable]="requestAutoCompleteItems">
+  <tag-input-dropdown [displayBy]="'email'"
+                      [showDropdownIfEmpty]="false"
+                      [keepOpen]="false"
+                      [identifyBy]="'id'"
+                      [autocompleteObservable]="requestAutoCompleteItems" >
+
     <ng-template let-item="item">
-      <div class="tag">
-        <span>{{ item.email }}</span>
-      </div>
+      <span class="list-item">{{ item.email }}</span>
     </ng-template>
+
   </tag-input-dropdown>
 </tag-input>
diff --git a/app/feature-toggle/feature-groups/email-input/email-input.component.ts b/app/feature-toggle/feature-groups/email-input/email-input.component.ts
index a8fe06b7e..cd06ba8bb 100644
--- a/app/feature-toggle/feature-groups/email-input/email-input.component.ts
+++ b/app/feature-toggle/feature-groups/email-input/email-input.component.ts
@@ -20,6 +20,9 @@ import { UserService } from '../../../users/user.service';
       display: flex;
       align-items: center;
     }
+    .list-item {
+      font-size: 15px;
+    }
 `]
 })
 export class EmailInputComponent implements OnChanges, OnInit {
@@ -34,7 +37,8 @@ export class EmailInputComponent implements OnChanges, OnInit {
   @Input() readonly: false;
   @Output() usersChange = new EventEmitter<String[]>();
 
-  constructor(private userService: UserService) {}
+  constructor(private userService: UserService) {
+  }
 
   ngOnInit() {
     Object.assign(this.users, this.readonly);

From 593d58dc2430e26967f313bba3de91318d070175 Mon Sep 17 00:00:00 2001
From: Melkis Hengue <henguemelkispro@yahoo.com>
Date: Sun, 27 May 2018 17:52:47 +0200
Subject: [PATCH 3/5] fixed linting errors

---
 app/feature-toggle/feature-toggle.component.ts | 4 ++--
 app/users/user.service.ts                      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/feature-toggle/feature-toggle.component.ts b/app/feature-toggle/feature-toggle.component.ts
index f64c23436..97accdc88 100644
--- a/app/feature-toggle/feature-toggle.component.ts
+++ b/app/feature-toggle/feature-toggle.component.ts
@@ -99,8 +99,8 @@ export class FeatureToggleComponent implements OnInit, OnDestroy {
 
   // called when the list of members of a feature group is changed
   onFeatureGroupMembersChange(emails: Array<string>, featureGroupId: Number) {
-    let featureGroup = this.featureGroups.find((featureGroup) => {
-      return featureGroup.id == featureGroupId;
+    let featureGroup = this.featureGroups.find((iFeatureGroup) => {
+      return iFeatureGroup.id === featureGroupId;
     });
 
     if (featureGroup) {
diff --git a/app/users/user.service.ts b/app/users/user.service.ts
index a33009d1d..a41af558c 100644
--- a/app/users/user.service.ts
+++ b/app/users/user.service.ts
@@ -178,7 +178,7 @@ export class UserService {
       .toPromise()
       .then(
       (response: any) => {
-        return User.extractPaginatedArrayData(response)
+        return User.extractPaginatedArrayData(response);
       }).catch(
       (error: any) => this.handleError(error)
       );

From 62bd7de7b96db48b90c3469d64fe1c1a7f422a56 Mon Sep 17 00:00:00 2001
From: Melkis Hengue <henguemelkispro@yahoo.com>
Date: Mon, 3 Sep 2018 07:02:44 +0200
Subject: [PATCH 4/5] added suggestions dropdown for feature toggles

---
 app/app.component.css                         |  8 +++
 .../email-input/email-input.component.html    |  9 +--
 .../email-input/email-input.component.ts      | 55 +++++++++++++------
 .../feature-toggle.component.ts               |  4 +-
 .../user-tag-input.component.ts               |  5 +-
 app/users/user.service.ts                     | 22 +++++++-
 6 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/app/app.component.css b/app/app.component.css
index c8e3a034c..5f6db5169 100644
--- a/app/app.component.css
+++ b/app/app.component.css
@@ -167,3 +167,11 @@ footer a {
   background-color: #fafafa;
   color: rgba(0, 0, 0, 0.87);
 }
+
+.md-chips .md-chip-input-container {
+width: 100%;
+}
+
+.md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
+width: 100%;
+}
diff --git a/app/feature-toggle/feature-groups/email-input/email-input.component.html b/app/feature-toggle/feature-groups/email-input/email-input.component.html
index 67152edcc..eefa5d81f 100644
--- a/app/feature-toggle/feature-groups/email-input/email-input.component.html
+++ b/app/feature-toggle/feature-groups/email-input/email-input.component.html
@@ -8,7 +8,7 @@
     <div class="tag">
       <span>{{ item.email }}</span>
       <span (click)="input.removeItem(item, index)" *ngIf="!readonly">
-          <md-icon>close</md-icon>
+          <md-icon class="close">close</md-icon>
       </span>
     </div>
   </ng-template>
@@ -16,10 +16,11 @@
                       [showDropdownIfEmpty]="false"
                       [keepOpen]="false"
                       [identifyBy]="'id'"
-                      [autocompleteObservable]="requestAutoCompleteItems" >
+                      [autocompleteObservable]="requestAutoCompleteItems"
+                      >
 
-    <ng-template let-item="item">
-      <span class="list-item">{{ item.email }}</span>
+    <ng-template width="6" let-item="item">
+      <span class="list-item">{{ item.email }} ({{ item.id }})</span>
     </ng-template>
 
   </tag-input-dropdown>
diff --git a/app/feature-toggle/feature-groups/email-input/email-input.component.ts b/app/feature-toggle/feature-groups/email-input/email-input.component.ts
index cd06ba8bb..25e372a19 100644
--- a/app/feature-toggle/feature-groups/email-input/email-input.component.ts
+++ b/app/feature-toggle/feature-groups/email-input/email-input.component.ts
@@ -23,11 +23,22 @@ import { UserService } from '../../../users/user.service';
     .list-item {
       font-size: 15px;
     }
+    .close {
+      padding-top: 12px;
+    }
+    ng2-dropdown-menu {
+      width: 420px !important;
+    }
+
+    .ng2-menu-item {
+      width: 420px !important;
+    }
+
 `]
 })
 export class EmailInputComponent implements OnChanges, OnInit {
   public errorMessage: any;       // Handling error message
-  public onlyEmails: string[] = [];
+  public onlyIds: string[] = [];
 
   @Input() users: User[];         // List of Users added to tag-input
   @Input() usersIds: string[] = []; // ids
@@ -45,29 +56,41 @@ export class EmailInputComponent implements OnChanges, OnInit {
   }
 
   ngOnChanges() {
-    if (this.usersIds) {
-      let users: User[] = [];
-      for (let userId of this.usersIds) {
-        let user = User.getEmptyUser();
-        user.id = userId;
-        user.email = userId;
-        users.push(user);
-      }
-      this.users = users;
+    this.users = [];
+    if (this.usersIds.length) {
+      this.userService.getUsers({
+        includeOnly: this.usersIds
+      }).then((fetchedUsers: User[]) => {
+        this.usersIds.forEach((userId) => {
+          let _user = fetchedUsers.find((user) => {
+            return user.id === userId;
+          });
+          if (_user === undefined) {
+            let emptyUser = User.getEmptyUser();
+            emptyUser.id = userId;
+            emptyUser.email = userId;
+            this.users.push(emptyUser);
+          } else {
+            this.users.push(_user);
+          }
+        });
+      });
     }
   }
 
   updateData() {
-    this.onlyEmails = [];
-    for (let k = 0; k < this.users.length; k++) {
-      this.onlyEmails.push(this.users[k].email);
-    }
-    this.usersChange.emit(this.onlyEmails);
+    this.onlyIds = [];
+    this.users.forEach((user) => {
+      this.onlyIds.push(user.id);
+    });
+    this.usersChange.emit(this.onlyIds);
     Object.assign(this.users, this.readonly);
   }
 
   requestAutoCompleteItems = (search: string): Observable<User[]> => {
-    return Observable.fromPromise(this.userService.getUsers(search, '')
+    return Observable.fromPromise(this.userService.getUsers({
+      emailId: search
+    })
       .then(
         (users: User[]) => {
           return users;
diff --git a/app/feature-toggle/feature-toggle.component.ts b/app/feature-toggle/feature-toggle.component.ts
index 97accdc88..38512ba7b 100644
--- a/app/feature-toggle/feature-toggle.component.ts
+++ b/app/feature-toggle/feature-toggle.component.ts
@@ -98,13 +98,13 @@ export class FeatureToggleComponent implements OnInit, OnDestroy {
   }
 
   // called when the list of members of a feature group is changed
-  onFeatureGroupMembersChange(emails: Array<string>, featureGroupId: Number) {
+  onFeatureGroupMembersChange(userIds: Array<string>, featureGroupId: Number) {
     let featureGroup = this.featureGroups.find((iFeatureGroup) => {
       return iFeatureGroup.id === featureGroupId;
     });
 
     if (featureGroup) {
-      featureGroup.members = emails;
+      featureGroup.members = userIds;
     }
   }
 
diff --git a/app/topics/shared/user-tag-input/user-tag-input.component.ts b/app/topics/shared/user-tag-input/user-tag-input.component.ts
index ebfb98944..992871eb0 100644
--- a/app/topics/shared/user-tag-input/user-tag-input.component.ts
+++ b/app/topics/shared/user-tag-input/user-tag-input.component.ts
@@ -72,7 +72,10 @@ export class UserTagInputComponent implements OnInit, OnChanges {
   }
 
   requestAutoCompleteItems = (search: string): Observable<User[]> => {
-    return Observable.fromPromise(this.userService.getUsers(search, this.role)
+    return Observable.fromPromise(this.userService.getUsers({
+      emailId: search,
+      role: this.role
+    })
       .then(
         (users: User[]) => {
           for (let user of users) {
diff --git a/app/users/user.service.ts b/app/users/user.service.ts
index a41af558c..c358f5b8e 100644
--- a/app/users/user.service.ts
+++ b/app/users/user.service.ts
@@ -20,6 +20,13 @@ import { errCode } from '../authentication/auth.service';
  * );
  * </code>
  */
+
+ interface GetUsersParameters {
+  emailId?: string;
+  includeOnly?: string[];
+  role?: string;
+}
+
 @Injectable()
 export class UserService {
   private currentUserPromise: Promise<User>;
@@ -172,9 +179,18 @@ export class UserService {
    * @param role the role of the user
    * @returns a Promise for a Student object
    */
-  public getUsers(emailId: string, role: string): Promise<User[]> {
-    // return this.userStoreApiService.getUrl('/api/Users/ByEmail/' + emailId + '&role=' + role, {})
-    return this.userStoreApiService.getUrl('/api/Users?emailBeginning=' + emailId, {})
+  public getUsers({emailId, includeOnly, role}: GetUsersParameters): Promise<User[]> {
+    let url = "/api/Users?";
+
+    if (emailId !== undefined) url += "emailBeginning=" + emailId;
+    if (includeOnly !== undefined) {
+      includeOnly.forEach((userId) => {
+        url += "&includeOnly=" + userId;
+      });
+    }
+    if (role !== undefined) url += "&role=" + role;
+
+    return this.userStoreApiService.getUrl(url, {})
       .toPromise()
       .then(
       (response: any) => {

From 89b274ce789e0c89ef46ec283656842c0ec22945 Mon Sep 17 00:00:00 2001
From: Melkis Hengue <henguemelkispro@yahoo.com>
Date: Mon, 3 Sep 2018 10:46:44 +0200
Subject: [PATCH 5/5] features toggles working properly

---
 .../feature-groups/email-input/email-input.component.html       | 2 +-
 .../feature-groups/email-input/email-input.component.ts         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/feature-toggle/feature-groups/email-input/email-input.component.html b/app/feature-toggle/feature-groups/email-input/email-input.component.html
index 67152edcc..20ed0fdaa 100644
--- a/app/feature-toggle/feature-groups/email-input/email-input.component.html
+++ b/app/feature-toggle/feature-groups/email-input/email-input.component.html
@@ -19,7 +19,7 @@
                       [autocompleteObservable]="requestAutoCompleteItems" >
 
     <ng-template let-item="item">
-      <span class="list-item">{{ item.email }}</span>
+      <span class="list-item">{{ item.email }}({{ item.id }})</span>
     </ng-template>
 
   </tag-input-dropdown>
diff --git a/app/feature-toggle/feature-groups/email-input/email-input.component.ts b/app/feature-toggle/feature-groups/email-input/email-input.component.ts
index cd06ba8bb..a89d7263d 100644
--- a/app/feature-toggle/feature-groups/email-input/email-input.component.ts
+++ b/app/feature-toggle/feature-groups/email-input/email-input.component.ts
@@ -38,6 +38,7 @@ export class EmailInputComponent implements OnChanges, OnInit {
   @Output() usersChange = new EventEmitter<String[]>();
 
   constructor(private userService: UserService) {
+    console.log('this.users', this.users);
   }
 
   ngOnInit() {