add/remove group membership

gui/app/components/customize/user-list.js

@@ -10,12 +10,14 @@
 // https://documize.com
 
 import $ from 'jquery';
-import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 import { schedule, debounce } from '@ember/runloop';
+import Component from '@ember/component';
 import AuthProvider from '../../mixins/auth';
 import ModalMixin from '../../mixins/modal';
 
 export default Component.extend(AuthProvider, ModalMixin, {
+	groupSvc: service('group'),
 	editUser: null,
 	deleteUser: null,
 	filter: '',
@@ -25,13 +27,16 @@ export default Component.extend(AuthProvider, ModalMixin, {
 	init() {
 		this._super(...arguments);
 		this.password = {};
-		this.filteredUsers = [];
 		this.selectedUsers = [];	
 	},
 
 	didReceiveAttrs() {
 		this._super(...arguments);
 
+		this.get('groupSvc').getAll().then((groups) => {
+			this.set('groups', groups);
+		});
+
 		let users = this.get('users');
 
 		users.forEach(user => {
@@ -40,7 +45,6 @@ export default Component.extend(AuthProvider, ModalMixin, {
 		});
 
 		this.set('users', users);
-		this.set('filteredUsers', users);
 	},
 
 	onKeywordChange: function () {
@@ -48,17 +52,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
 	}.observes('filter'),
 
 	filterUsers() {
-		let users = this.get('users');
-		let filteredUsers = [];
-		let filter = this.get('filter').toLowerCase();
-
-		users.forEach(user => {
-			if (user.get('fullname').toLowerCase().includes(filter) || user.get('email').toLowerCase().includes(filter)) {
-				filteredUsers.pushObject(user);
-			}
-		});
-
-		this.set('filteredUsers', filteredUsers);
+		this.get('onFilter')(this.get('filter'));
 	},
 
 	actions: {
@@ -184,6 +178,44 @@ export default Component.extend(AuthProvider, ModalMixin, {
 			this.set('hasSelectedUsers', false);
 
 			this.modalClose('#admin-user-delete-modal');
-		}
+		},
+
+		onShowGroupsModal(userId) {
+			let user = this.get('users').findBy('id', userId);
+			this.set('selectedUser', user);
+
+			let userGroups = user.get('groups');
+
+			// mark up groups user belongs to...
+			let groups = this.get('groups');
+			groups.forEach((g) => {
+				console.log(userGroups);
+				let hasGroup = userGroups.findBy('roleId', g.get('id'));
+				g.set('isMember', is.not.undefined(hasGroup));
+			})
+			this.set('groups', groups);
+
+			this.modalOpen("#group-member-modal", {"show": true});
+		},
+
+		onLeaveGroup(groupId) {
+			let userId = this.get('selectedUser.id');
+			let group = this.get('groups').findBy('id', groupId);
+			group.set('isMember', false);
+
+			this.get('groupSvc').leave(groupId, userId).then(() => {
+				this.filterUsers();
+			});			
+		},
+
+		onJoinGroup(groupId) {
+			let userId = this.get('selectedUser.id');
+			let group = this.get('groups').findBy('id', groupId);
+			group.set('isMember', true);
+
+			this.get('groupSvc').join(groupId, userId).then(() => {
+				this.filterUsers();
+			});			
+		}		
 	}
 });

gui/app/models/user.js

@@ -12,7 +12,6 @@
 import { computed } from '@ember/object';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
-// import { belongsTo, hasMany } from 'ember-data/relationships';
 
 export default Model.extend({
 	firstname: attr('string'),
@@ -25,6 +24,7 @@ export default Model.extend({
 	viewUsers: attr('boolean', { defaultValue: false }),
 	global: attr('boolean', { defaultValue: false }),
 	accounts: attr(),
+	groups: attr(),
 	created: attr(),
 	revised: attr(),
 

gui/app/pods/customize/users/controller.js

@@ -15,8 +15,8 @@ import Controller from '@ember/controller';
 export default Controller.extend({
 	userService: service('user'),
 
-	loadUsers() {
-		this.get('userService').getComplete().then((users) => {
+	loadUsers(filter) {
+		this.get('userService').getComplete(filter).then((users) => {
 			this.set('model', users);
 		});
 	},
@@ -30,26 +30,28 @@ export default Controller.extend({
 		
 		onAddUsers(list) {
 			return this.get('userService').addBulk(list).then(() => {
-				this.loadUsers();
+				this.loadUsers('');
 			});
 		},
 
 		onDelete(userId) {
 			this.get('userService').remove(userId).then( () => {
-				this.loadUsers();
+				this.loadUsers('');
 			});
 		},
 
 		onSave(user) {
 			this.get('userService').save(user).then(() => {
-				this.get('userService').getComplete().then((users) => {
-					this.set('model', users);
-				});
+				this.loadUsers('');
 			});
 		},
 
 		onPassword(user, password) {
 			this.get('userService').updatePassword(user.id, password);
+		},
+
+		onFilter(filter) {
+			this.loadUsers(filter);
 		}
 	}
 });

gui/app/pods/customize/users/route.js

@@ -30,12 +30,12 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		return new EmberPromise((resolve) => {
 			if (this.get('appMeta.authProvider') == constants.AuthProvider.Keycloak) {
 				this.get('global').syncExternalUsers().then(() => {
-					this.get('userService').getComplete().then((users) =>{
+					this.get('userService').getComplete('').then((users) =>{
 						resolve(users);
 					});
 				});
 			} else {
-				this.get('userService').getComplete().then((users) => {
+				this.get('userService').getComplete('').then((users) => {
 					resolve(users);
 				});
 			}

gui/app/pods/customize/users/template.hbs

@@ -1,8 +1,9 @@
-{{customize/user-admin 
+{{customize/user-admin users=model
 	onAddUser=(action 'onAddUser')
 	onAddUsers=(action 'onAddUsers')}}
 
 {{customize/user-list users=model
+	onFilter=(action "onFilter")
 	onDelete=(action "onDelete")
 	onSave=(action "onSave")
 	onPassword=(action "onPassword")}}

gui/app/services/user.js

@@ -64,8 +64,13 @@ export default Service.extend({
 	},
 
 	// Returns all active and inactive users for organization.
-	getComplete() {
-		return this.get('ajax').request(`users?active=0`).then((response) => {
+	// Only available for admins and limits results to max. 100 users.
+	// Takes filter for user search criteria.
+	getComplete(filter) {
+		filter = filter.trim();
+		if (filter.length > 0) filter = encodeURIComponent(filter);
+
+		return this.get('ajax').request(`users?active=0&filter=${filter}`).then((response) => {
 			return response.map((obj) => {
 				let data = this.get('store').normalize('user', obj);
 				return this.get('store').push(data);

gui/app/styles/view/customize.scss

@@ -11,16 +11,37 @@
 	}
 
 	.user-table {
-		.name {
-			font-size: 1rem;
-			color: $color-off-black;
-			margin: 0 0 0 30px;
+		tbody tr td, thead tr th {
+			border-top: none !important;
+			border-bottom: none !important;
 		}
 
-		.email {
-			font-size: 0.9rem;
+		.name {
+			font-size: 1.2rem;
+			font-weight: bold;
+			color: $color-link;
+			margin: 0 0 0 10px;
+			display: inline-block;
+			cursor: pointer;
+
+			> .email {
+				font-size: 0.9rem;
+				color: $color-off-black;
+				margin: 0;
+				display: inline-block;
+				font-weight: normal;
+			}
+		}
+
+		.groups {
+			cursor: pointer;
+			margin: 5px 0 0 10px;
+			font-size: 1rem;
 			color: $color-gray;
-			margin: 0 0 0 30px;
+
+			&:hover {
+				color: $color-link;
+			}
 		}
 
 		.inactive-user
@@ -76,6 +97,7 @@
 		}
 	}
 
+	// used for group admin
 	> .group-users-members {
 		> .item {
 			margin: 10px 0;
@@ -86,4 +108,20 @@
 			}
 		}
 	}
+
+	// used for user admin
+	> .group-membership {
+		> .item {
+			margin: 10px 0;
+
+			> .group-name {
+				color: $color-primary;
+				font-size: 1.2rem;
+
+				> .group-purpose {
+					font-size: 0.9rem;
+				}
+			}
+		}
+	}
 }

gui/app/templates/components/customize/user-admin.hbs

@@ -2,7 +2,7 @@
 	<div class="col">
 		<div class="view-customize">
 			<h1 class="admin-heading">Users</h1>
-			<h2 class="sub-heading">Set basic information, passwords and permissions for {{model.length}} users</h2>
+			<h2 class="sub-heading">Set basic information, passwords and permissions for {{users.length}} users</h2>
 
 			{{#if isAuthProviderDocumize}}
 				<div class="btn btn-success mt-3 mb-3" {{action 'onOpenUserModal'}}>Add user</div>

gui/app/templates/components/customize/user-groups.hbs

@@ -115,7 +115,7 @@
 							<div class="form-group">
 								<label for="group-members-search">Search for group members, non-members</label>
 								{{input id="group-members-search" type="text" class="form-control mousetrap" placeholder="Search members and users..." value=searchText key-up=(action 'onSearch')}}
-								<small class="form-text text-muted">matches firstname, lastname, email</small>
+								<small class="form-text text-muted">search firstname, lastname, email</small>
 							</div>
 							<div class="view-customize">
 								<div class="group-users-members my-5">
@@ -124,7 +124,7 @@
 											<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}}>Leave</button>
+													<button class="btn btn-danger" {{action 'onLeaveGroup' member.userId}}>Remove</button>
 												</div>
 											</div>
 										{{/each}}
@@ -135,9 +135,9 @@
 												<div class="col-10 fullname">{{user.firstname}} {{user.lastname}}</div>
 												<div class="col-2 text-right">
 													{{#if user.isMember}}
-														<button class="btn btn-danger" {{action 'onLeaveGroup' user.id}}>Leave</button>
+														<button class="btn btn-danger" {{action 'onLeaveGroup' user.id}}>Remove</button>
 													{{else}}
-														<button class="btn btn-success" {{action 'onJoinGroup' user.id}}>Join</button>
+														<button class="btn btn-success" {{action 'onJoinGroup' user.id}}>Add</button>
 													{{/if}}
 												</div>
 											</div>

gui/app/templates/components/customize/user-list.hbs

@@ -1,37 +1,45 @@
-<div class="view-customize mb-5">
-	<h3>Users</h3>
-	<table class="table table-hover table-responsive user-table">
+<div class="view-customize my-5">
+	
+	<div class="my-2">
+		<span class="font-weight-bold">Spaces</span>
+		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can add spaces, both personal and shared with others</span>
+	</div>
+	<div class="my-2">
+		<span class="font-weight-bold">Visible</span>
+		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can see names of users and groups, can disable for external users like customers/partners</span>
+	</div>
+	<div class="my-2">
+		<span class="font-weight-bold">Admin</span>
+		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can manage all aspects of Documize, like this screen</span>
+	</div>
+	<div class="mt-2 mb-4">
+		<span class="font-weight-bold">Active</span>
+		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can login and use Documize</span>
+	</div>
+
+	<div class="form-group mt-5 mb-3">
+		{{focus-input type="text" class="form-control" placeholder="filter users" value=filter}}
+		<small class="form-text text-muted">search firstname, lastname, email</small>
+	</div>
+
+	<table class="table table-responsive table-borderless user-table">
 		<thead>
 			<tr>
-				<th>{{input type="text" class="form-control" placeholder="filter users" value=filter}}</th>
-				<th class="no-width">Add Space</th>
-				<th class="no-width">View Users</th>
+				<th class="text-muted">
+					{{#if hasSelectedUsers}}
+						<button id="bulk-delete-users" type="button" class="btn btn-danger" data-toggle="modal" data-target="#admin-user-delete-modal" data-backdrop="static">Delete selected users</button>
+					{{/if}}					
+				</th>
+				<th class="no-width">Spaces</th>
+				<th class="no-width">Visible</th>
 				<th class="no-width">Admin</th>
 				<th class="no-width">Active</th>
 				<th class="no-width">
-					{{#if hasSelectedUsers}}
-						<button  id="bulk-delete-users" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#admin-user-delete-modal" data-backdrop="static">Delete</button>
-
-						<div id="admin-user-delete-modal" class="modal" tabindex="-1" role="dialog">
-							<div class="modal-dialog" role="document">
-								<div class="modal-content">
-									<div class="modal-header">Delete Users</div>
-									<div class="modal-body">
-										<p>Are you sure you want to delete selected users?</p>
-									</div>
-									<div class="modal-footer">
-										<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-										<button type="button" class="btn btn-success" onclick={{action 'onBulkDelete'}}>Delete</button>
-									</div>
-								</div>
-							</div>
-						</div>
-					{{/if}}
 				</th>
 			</tr>
 		</thead>
 		<tbody>
-			{{#each filteredUsers key="id" as |user|}}
+			{{#each users key="id" as |user|}}
 				<tr>
 					<td class="{{unless user.active 'inactive-user'}} {{if user.admin 'admin-user'}}">
 						<div class="d-inline-block align-top">
@@ -44,8 +52,16 @@
 							{{/if}}
 						</div>
 						<div class="d-inline-block">
-							<div class="name d-inline-block">{{ user.fullname }}</div>
-							<div class="email">{{ user.email }}</div>
+							<div class="name" {{action "onShowEdit" user.id}}>{{user.fullname}}<div class="email">&nbsp;&nbsp;({{user.email}})</div></div>
+							<div class="groups" {{action "onShowGroupsModal" user.id}}>
+								{{#each user.groups as |group|}}
+									<span class="group">
+										{{group.name}}{{#if (not-eq group user.groups.lastObject)}}, {{/if}}
+									</span>
+								{{else}}
+									<span class="group">&lt;no groups&gt;</span>
+								{{/each}}
+							</div>
 						</div>
 					</td>
 					<td class="no-width text-center">
@@ -81,19 +97,11 @@
 						{{/if}}
 					</td>
 					<td class="no-width text-center">
-						{{#if user.me}}
-							<div class="edit-button-{{user.id}} button-icon-gray" title="Edit" {{action "onShowEdit" user.id}}>
-								<i class="material-icons">edit</i>
-							</div>
-						{{else}}
-							<div class="edit-button-{{user.id}} button-icon-gray" title="Edit" {{action "onShowEdit" user.id}}>
-								<i class="material-icons">edit</i>
-							</div>
-							<div class="button-icon-gap"></div>
-							<div class="delete-button-{{user.id}} button-icon-danger" title="Delete" {{action "onShowDelete" user.id}}>
+						{{#unless user.me}}
+							<div class="delete-button-{{user.id}} button-icon-red button-icon-small" title="Delete" {{action "onShowDelete" user.id}}>
 								<i class="material-icons">delete</i>
 							</div>
-						{{/if}}
+						{{/unless}}
 					</td>
 				</tr>
 			{{/each}}
@@ -151,3 +159,50 @@
 	<p>Are you sure you want to delete {{deleteUser.fullname}}?</p>
 {{/ui/ui-dialog}}
 
+<div id="admin-user-delete-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Delete Users</div>
+			<div class="modal-body">
+				<p>Are you sure you want to delete selected users?</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+				<button type="button" class="btn btn-success" onclick={{action 'onBulkDelete'}}>Delete</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div id="group-member-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog modal-lg" role="document">
+		<div class="modal-content">
+			<div class="modal-header">{{selectedUser.fullname}}</div>
+			<div class="modal-body">
+				<div class="view-customize">
+					<div class="group-membership my-5">
+						{{#each groups as |group|}}
+							<div class="row item">
+								<div class="col-10 group-name">{{group.name}}
+									{{#if group.purpose}}
+										<span class="text-muted group-purpose">&nbsp;&nbsp;&mdash;&nbsp;{{group.purpose}}</span>
+									{{/if}}
+								</div>
+								<div class="col-2 text-right">
+									{{#if group.isMember}}
+										<button class="btn btn-danger" {{action 'onLeaveGroup' group.id}}>Leave</button>
+									{{else}}
+										<button class="btn btn-success" {{action 'onJoinGroup' group.id}}>Join</button>
+									{{/if}}
+								</div>
+							</div>
+						{{/each}}
+					</div>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+			</div>
+		</div>
+	</div>
+</div>