From af632615cf11d199200ea720b261936295605342 Mon Sep 17 00:00:00 2001
From: McMatts <matt@documize.com>
Date: Thu, 3 May 2018 12:48:45 +0100
Subject: [PATCH] Change UX for user group member management

Placed search results below existing members list.
---
 gui/app/components/customize/user-groups.js     | 10 +++++++---
 .../components/customize/user-groups.hbs        | 17 ++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/gui/app/components/customize/user-groups.js b/gui/app/components/customize/user-groups.js
index 9c6a0276..bf9b9555 100644
--- a/gui/app/components/customize/user-groups.js
+++ b/gui/app/components/customize/user-groups.js
@@ -12,6 +12,7 @@
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import { debounce } from '@ember/runloop';
+import { A } from '@ember/array';
 import Component from '@ember/component';
 import AuthProvider from '../../mixins/auth';
 import ModalMixin from '../../mixins/modal';
@@ -56,9 +57,11 @@ export default Component.extend(AuthProvider, ModalMixin, {
 				this.get('userSvc')
 					.matchUsers(searchText)
 					.then(users => {
+						let filteredUsers = A([]);
 						users.forEach(user => {
 							let m = members.findBy('userId', user.get('id'));
-							user.set('isMember', is.not.undefined(m));
+							if (is.undefined(m)) filteredUsers.pushObject(user);
+							// user.set('isMember', is.not.undefined(m));
 						});
 
 						if (this.get('showMembers') && members.length === 0) {
@@ -66,7 +69,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
 							this.set('showUsers', true);
 						}
 
-						this.set('users', users);
+						this.set('users', filteredUsers);
 					});
 			});
 	},
@@ -179,6 +182,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
 			this.set('users', null);
 			this.set('showMembers', true);
 			this.set('showUsers', false);
+			this.set('searchText', '');
 			this.loadGroupInfo();
 		},
 
@@ -197,7 +201,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
 						this.set('showUsers', false);
 					}
 				},
-				250
+				450
 			);
 		},
 
diff --git a/gui/app/templates/components/customize/user-groups.hbs b/gui/app/templates/components/customize/user-groups.hbs
index 61e182d5..3263f458 100644
--- a/gui/app/templates/components/customize/user-groups.hbs
+++ b/gui/app/templates/components/customize/user-groups.hbs
@@ -121,17 +121,16 @@
 							</div>
 							<div class="view-customize">
 								<div class="group-users-members my-5">
-									{{#if showMembers}}
-										{{#each members as |member|}}
-											<div class="row item">
-												<div class="col-10 fullname">{{member.fullname}}</div>
-												<div class="col-2 text-right">
-													<button class="btn btn-danger" {{action 'onLeaveGroup' member.userId}}>Remove</button>
-												</div>
+									{{#each members as |member|}}
+										<div class="row item">
+											<div class="col-10 fullname">{{member.fullname}}</div>
+											<div class="col-2 text-right">
+												<button class="btn btn-danger" {{action 'onLeaveGroup' member.userId}}>Remove</button>
 											</div>
-										{{/each}}
-									{{/if}}
+										</div>
+									{{/each}}
 									{{#if showUsers}}
+										<hr />
 										{{#each users as |user|}}
 											<div class="row item">
 												<div class="col-10 fullname">{{user.firstname}} {{user.lastname}}</div>