updated acp category privilege settings so that not all groups are shown in privilege table, closes #3036

public/less/admin/admin.less

@@ -283,6 +283,11 @@
 	#taskbar {
 		display: none; /* not sure why I have to do this, but it only seems to show up on prod */
 	}
+
+	/* Allows the autocomplete dropbox to appear on top of a modal's backdrop */
+	.ui-autocomplete {
+		z-index: @zindex-popover;
+	}
 }
 
 // Allowing text to the right of an image-type brand

public/src/admin/manage/category.js

@@ -158,26 +158,6 @@ define('admin/manage/category', [
 	};
 
 	Category.setupPrivilegeTable = function() {
-		var searchEl = $('.privilege-search'),
-			searchObj = autocomplete.user(searchEl);
-
-		// User search + addition to table
-		searchObj.on('autocompleteselect', function(ev, ui) {
-			socket.emit('admin.categories.setPrivilege', {
-				cid: ajaxify.variables.get('cid'),
-				privilege: 'read',
-				set: true,
-				member: ui.item.user.uid
-			}, function(err) {
-				if (err) {
-					return app.alertError(err.message);
-				}
-
-				Category.refreshPrivilegeTable();
-				searchEl.val('');
-			});
-		});
-
 		// Checkbox event capture
 		$('.privilege-table-container').on('change', 'input[type="checkbox"]', function() {
 			var checkboxEl = $(this),
@@ -205,6 +185,9 @@ define('admin/manage/category', [
 			}
 		});
 
+		$('.privilege-table-container').on('click', '[data-action="search.user"]', Category.addUserToPrivilegeTable);
+		$('.privilege-table-container').on('click', '[data-action="search.group"]', Category.addGroupToPrivilegeTable);
+
 		Category.exposeAssumedPrivileges();
 	};
 
@@ -292,5 +275,65 @@ define('admin/manage/category', [
 		});
 	};
 
+	Category.addUserToPrivilegeTable = function() {
+		var modal = bootbox.dialog({
+			title: 'Find a User',
+			message: '<input class="form-control input-lg" placeholder="Search for a user here..." />',
+			show: true
+		});
+
+		modal.on('shown.bs.modal', function() {
+			var inputEl = modal.find('input'),
+				searchObj = autocomplete.user(inputEl);
+
+			searchObj.on('autocompleteselect', function(ev, ui) {
+				socket.emit('admin.categories.setPrivilege', {
+					cid: ajaxify.variables.get('cid'),
+					privilege: ['find', 'read'],
+					set: true,
+					member: ui.item.user.uid
+				}, function(err) {
+					if (err) {
+						return app.alertError(err.message);
+					}
+
+					Category.refreshPrivilegeTable();
+					modal.modal('hide');
+				});
+			});
+		});
+	};
+
+	Category.addGroupToPrivilegeTable = function() {
+		var modal = bootbox.dialog({
+			title: 'Find a Group',
+			message: '<input class="form-control input-lg" placeholder="Search for a group here..." />',
+			show: true
+		});
+
+		modal.on('shown.bs.modal', function() {
+			var inputEl = modal.find('input'),
+				searchObj = autocomplete.group(inputEl);
+
+			searchObj.on('autocompleteselect', function(ev, ui) {
+				console.log(ui);
+				socket.emit('admin.categories.setPrivilege', {
+					cid: ajaxify.variables.get('cid'),
+					privilege: ['groups:find', 'groups:read'],
+					set: true,
+					member: ui.item.group.name
+				}, function(err) {
+					console.log(arguments);
+					if (err) {
+						return app.alertError(err.message);
+					}
+
+					Category.refreshPrivilegeTable();
+					modal.modal('hide');
+				});
+			});
+		});
+	};
+
 	return Category;
 });

public/src/modules/autocomplete.js

@@ -35,5 +35,36 @@ define('autocomplete', function() {
 		});
 	};
 
+	module.group = function(input) {
+		return input.autocomplete({
+			delay: 100,
+			source: function(request, response) {
+				socket.emit('groups.search', {
+					query: request.term,
+					options: {}
+				}, function(err, results) {
+					if (err) {
+						return app.alertError(err.message);
+					}
+
+					if (results && results.length) {
+						var names = results.map(function(group) {
+							return group && {
+								label: group.name,
+								value: group.name,
+								group: {
+									name: group.name,
+									slug: group.slug
+								}
+							};
+						});
+						response(names);
+					}
+					$('.ui-autocomplete a').attr('data-ajaxify', 'false');
+				});
+			}
+		});
+	};
+
 	return module;
 });

src/views/admin/manage/category.tpl

@@ -86,12 +86,12 @@
 						these settings.
 					</p>
 					<hr />
-					<input class="form-control privilege-search" type="text" placeholder="Add a user or group to this list..." />
+					<div class="privilege-table-container">
-					<hr />
 						<!-- IMPORT admin/partials/categories/privileges.tpl -->
 					</div>
 				</div>
 			</div>
+		</div>
 
 		<div class="col-md-3 options acp-sidebar">
 			<div class="panel panel-default hidden-sm">

src/views/admin/partials/categories/privileges.tpl

@@ -1,4 +1,3 @@
-					<div class="privilege-table-container">
 					<table class="table table-striped table-hover privilege-table">
 						<tr>
 							<th colspan="2">User</th>
@@ -14,10 +13,18 @@
 							{function.spawnPrivilegeStates, privileges.users.username, privileges}
 						</tr>
 						<!-- END privileges.users -->
+						<tr>
+							<td colspan="{privileges.columnCount}">
+								<button type="button" class="btn btn-primary btn-xs pull-right" data-ajaxify="false" data-action="search.user"><i class="fa fa-plus"></i> Add User</button>
+							</td>
+						</tr>
 						<!-- ELSE -->
 						<tr>
 							<td colspan="{privileges.columnCount}">
-									<div class="alert alert-info">No user-specific privileges in this category.</div>
+								<div class="alert alert-info">
+									<button type="button" class="btn btn-primary btn-xs pull-right" data-ajaxify="false" data-action="search.user"><i class="fa fa-plus"></i> Add User</button>
+									No user-specific privileges in this category.
+								</div>
 							</td>
 						</tr>
 						<!-- ENDIF privileges.users.length -->
@@ -25,11 +32,12 @@
 
 					<table class="table table-striped table-hover privilege-table">
 						<tr>
-								<th colspan="1">Group</th>
+							<th colspan="2">Group</th>
 							<!-- BEGIN privileges.labels.groups -->
 							<th class="text-center">{privileges.labels.groups.name}</th>
 							<!-- END privileges.labels.groups -->
 						</tr>
+						<!-- IF privileges.groups.length -->
 						<!-- BEGIN privileges.groups -->
 						<tr data-group-name="{privileges.groups.name}" data-private="<!-- IF privileges.groups.isPrivate -->1<!-- ELSE -->0<!-- ENDIF privileges.groups.isPrivate -->">
 							<td>
@@ -38,9 +46,25 @@
 								<!-- ENDIF privileges.groups.isPrivate -->
 								{privileges.groups.name}
 							</td>
+							<td></td>
 							{function.spawnPrivilegeStates, name, privileges}
 						</tr>
 						<!-- END privileges.groups -->
+						<tr>
+							<td colspan="{privileges.columnCount}">
+								<button type="button" class="btn btn-primary btn-xs pull-right" data-ajaxify="false" data-action="search.group"><i class="fa fa-plus"></i> Add Group</button>
+							</td>
+						</tr>
+						<!-- ELSE -->
+						<tr>
+							<td colspan="{privileges.columnCount}">
+								<div class="alert alert-info">
+									<button type="button" class="btn btn-primary btn-xs pull-right" data-ajaxify="false" data-action="search.group"><i class="fa fa-plus"></i> Add Group</button>
+									No group-specific privileges in this category.
+								</div>
+							</td>
+						</tr>
+						<!-- ENDIF privileges.groups.length -->
 					</table>
 					<div class="help-block">
 						If the <code>registered-users</code> group is granted a specific privilege, all other groups receive an
@@ -48,4 +72,3 @@
 						privilege is shown to you because all users are part of the <code>registered-users</code> user group,
 						and so, privileges for additional groups need not be explicitly granted.
 					</div>
-					</div>