Iss hipcms 1015 search suggestions for feature groups

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

app/feature-toggle/feature-groups/email-input/email-input.component.html

@@ -8,16 +8,20 @@
     <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>
-  <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 }}({{ item.id }})</span>
     </ng-template>
+
   </tag-input-dropdown>
 </tag-input>

app/feature-toggle/feature-groups/email-input/email-input.component.ts

@@ -20,11 +20,25 @@ import { UserService } from '../../../users/user.service';
       display: flex;
       align-items: center;
     }
+    .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
@@ -34,36 +48,50 @@ export class EmailInputComponent implements OnChanges, OnInit {
   @Input() readonly: false;
   @Output() usersChange = new EventEmitter<String[]>();
 
-  constructor(private userService: UserService) {}
+  constructor(private userService: UserService) {
+    console.log('this.users', this.users);
+  }
 
   ngOnInit() {
     Object.assign(this.users, this.readonly);
   }
 
   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;

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"

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(userIds: Array<string>, featureGroupId: Number) {
+    let featureGroup = this.featureGroups.find((iFeatureGroup) => {
+      return iFeatureGroup.id === featureGroupId;
+    });
+
+    if (featureGroup) {
+      featureGroup.members = userIds;
+    }
+  }
+
   editFeatureGroup(featureGroup: FeatureGroup) {
     this.featureGroupService.updateFeatureGroup(featureGroup)
       .then(

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) {

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,12 +179,23 @@ 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, {})
+  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) => User.extractPaginatedArrayData(response)
-      ).catch(
+      (response: any) => {
+        return User.extractPaginatedArrayData(response);
+      }).catch(
       (error: any) => this.handleError(error)
       );
   }