User picker for permission admin

gui/app/components/folder/permission-admin.js

@@ -11,6 +11,7 @@
 
 import { inject as service } from '@ember/service';
 import { A } from "@ember/array"
+import { debounce } from '@ember/runloop';
 import ModalMixin from '../../mixins/modal';
 import Component from '@ember/component';
 
@@ -21,6 +22,8 @@ export default Component.extend(ModalMixin, {
 	appMeta: service(), 
 	store: service(),
 	spacePermissions: null,
+	users: null,
+	searchText: '',
 	
 	didReceiveAttrs() {
 		let spacePermissions = A([]);
@@ -32,9 +35,12 @@ export default Component.extend(ModalMixin, {
 
 			groups.forEach((g) => {
 				let pr = this.permissionRecord(constants.WhoType.Group, g.get('id'), g.get('name'));
+				pr.set('members', g.get('members'));
 				spacePermissions.pushObject(pr);
 			});
 
+			let hasEveryoneId = false;
+
 			// get space permissions
 			this.get('spaceSvc').getPermissions(this.get('folder.id')).then((permissions) => {
 				permissions.forEach((perm, index) => { // eslint-disable-line no-unused-vars
@@ -48,13 +54,25 @@ export default Component.extend(ModalMixin, {
 						});
 					} else {
 						// user permission
+						if (perm.get('whoId') === constants.EveryoneUserId) {
+							perm.set('name', ' ' + perm.get('name'));
+							hasEveryoneId = true;
+						}
 						spacePermissions.pushObject(perm);
 					}
 				});
 
+				// always show everyone
+				if (!hasEveryoneId) {
+					let pr = this.permissionRecord(constants.WhoType.User, constants.EveryoneUserId, ' ' + constants.EveryoneUserName);
+					spacePermissions.pushObject(pr);					
+				}
+
 				this.set('spacePermissions', spacePermissions.sortBy('who', 'name'));
 			});
 		});
+
+		this.set('searchText', '');
 	},
 
 	permissionRecord(who, whoId, name) {
@@ -85,6 +103,24 @@ export default Component.extend(ModalMixin, {
 		return "Hey there, I am sharing the " + this.get('folder.name') + " space (in " + this.get("appMeta.title") + ") with you so we can both collaborate on documents.";
 	},
 
+	matchUsers(s) {
+		let spacePermissions = this.get('spacePermissions');
+		let filteredUsers = A([]);
+
+		this.get('userSvc').matchUsers(s).then((users) => {
+
+			users.forEach((user) => {
+				let exists = spacePermissions.findBy('whoId', user.get('id'));
+
+				if (is.undefined(exists)) {
+					filteredUsers.pushObject(user);
+				}
+			});
+
+			this.set('filteredUsers', filteredUsers);
+		});
+	},
+
 	actions: {
 		setPermissions() {
 			let message = this.getDefaultInvitationMessage();
@@ -122,6 +158,31 @@ export default Component.extend(ModalMixin, {
 			this.get('spaceSvc').savePermissions(folder.get('id'), payload).then(() => {
 				this.modalClose('#space-permission-modal');
 			});
+		},
+
+		onSearch() {
+			debounce(this, function() {
+				let searchText = this.get('searchText').trim();
+
+				if (searchText.length === 0) {
+					this.set('filteredUsers', A([]));
+					return;
 				}
+
+				this.matchUsers(searchText);
+			}, 250);
+		},
+
+		onAdd(user) {
+			let spacePermissions = this.get('spacePermissions');
+			let constants = this.get('constants');
+
+			let exists = spacePermissions.findBy('whoId', user.get('id'));
+			if (is.undefined(exists)) {
+				spacePermissions.pushObject(this.permissionRecord(constants.WhoType.User, user.get('id'), user.get('fullname')));
+				this.set('spacePermissions', spacePermissions);
+				// this.set('spacePermissions', spacePermissions.sortBy('who', 'name'));
+			}
+		},
 	}
 });

gui/app/constants/constants.js

@@ -59,7 +59,8 @@ let constants = EmberObject.extend({
         Group:          'role'
     },
 
-    EveryoneUserId: "0"
+    EveryoneUserId: "0",
+    EveryoneUserName: "Everyone"
 });
 
 export default { constants }

gui/app/models/space-permission.js

@@ -27,5 +27,6 @@ export default Model.extend({
 	documentCopy: attr('boolean'),
 	documentTemplate: attr('boolean'),
 	documentApprove: attr('boolean'),
-	name: attr('string') // read-only
+	name: attr('string'), 	// read-only
+	members: attr('number') // read-only
 });

gui/app/styles/color.scss

@@ -72,6 +72,9 @@ $color-stroke: #e1e1e1;
 .color-gray {
 	color: $color-gray !important;
 }
+.color-gold {
+	color: $color-goldy !important;
+}
 
 .background-color-white {
 	background-color: $color-white !important;

gui/app/templates/components/folder/permission-admin.hbs

@@ -3,9 +3,9 @@
 		<div class="modal-content">
 			<div class="modal-header">Space Permissions</div>
 			<div class="modal-body" style="overflow-x: auto;">
-
 				<div class="space-admin table-responsive">
-					<table class="table table-hover permission-table">
+					
+					<table class="table table-hover permission-table mb-3">
 						<thead>
 							<tr>
 								<th></th>
@@ -31,15 +31,28 @@
 								<tr>
 									<td>
 										{{#if (eq permission.who "role")}}
-											<span class="button-icon-gray button-icon-small align-middle">
+											<span class="button-icon-blue button-icon-small align-middle">
 												<i class="material-icons">people</i>
 											</span>
-											&nbsp;<b>{{permission.name}}</b>
+											<span class="color-blue">&nbsp;{{permission.name}}
+												<small class="form-text text-muted d-inline-block">({{permission.members}})</small>
+											</span>
+										{{else}}
+												{{#if (eq permission.whoId constants.EveryoneUserId)}}
+													<span class="button-icon-green button-icon-small align-middle">
+														<i class="material-icons">language</i>
+													</span>
+													<span class="color-green">&nbsp;{{permission.name}}</span>
 												{{else}}
 													<span class="button-icon-gray button-icon-small align-middle">
 														<i class="material-icons">person</i>
 													</span>
-											&nbsp;<b>{{permission.name}}</b> {{if (eq permission.whoId session.user.id) '(you)'}}
+													<span class="">&nbsp;{{permission.name}} 
+														{{#if (eq permission.whoId session.user.id)}}
+															<small class="form-text text-muted d-inline-block">(you)</small>
+														{{/if}}
+													</span>
+												{{/if}}
 										{{/if}}
 									</td>
 									<td>
@@ -76,9 +89,28 @@
 							{{/each}}
 						</tbody>
 					</table>
+
+					<div class="container-fluid">
+						<div class="row justify-content-center">
+							<div class="col-6">
+								<div class="form-group">
+									{{focus-input id="user-search" type="text" class="form-control mousetrap" placeholder="Search users..." value=searchText key-up=(action 'onSearch')}}
+									<small class="form-text text-muted">firstname, lastname, email</small>
+								</div>
+								{{#each filteredUsers as |user|}}
+									<div class="row my-3">
+										<div class="col-10">{{user.fullname}}</div>
+										<div class="col-2 text-right">
+											<button class="btn btn-primary" {{action 'onAdd' user}}>Add</button>
+										</div>
+									</div>
+								{{/each}}
+							</div>
+						</div>
 					</div>
 				
 				</div>
+			</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 'setPermissions'}}>Save</button>