feat: add ability to search groups in group details page

public/src/admin/manage/group.js

@@ -7,7 +7,8 @@ define('admin/manage/group', [
 	'admin/modules/colorpicker',
 	'translator',
 	'categorySelector',
-], function (memberList, iconSelect, colorpicker, translator, categorySelector) {
+	'groupSearch',
+], function (memberList, iconSelect, colorpicker, translator, categorySelector, groupSearch) {
 	var Groups = {};
 
 	Groups.init = function () {
@@ -60,6 +61,8 @@ define('admin/manage/group', [
 			navigateToCategory(selectedCategory.cid);
 		});
 
+		groupSearch.init($('[component="group-selector"]'));
+
 		colorpicker.enable(changeGroupLabelColor, function (hsb, hex) {
 			groupLabelPreview.css('background-color', '#' + hex);
 		});

public/src/modules/groupSearch.js

@@ -0,0 +1,60 @@
+'use strict';
+
+define('groupSearch', function () {
+	var groupSearch = {};
+
+	groupSearch.init = function (el) {
+		if (utils.isTouchDevice()) {
+			return;
+		}
+		var searchEl = el.find('[component="group-selector-search"]');
+		if (!searchEl.length) {
+			return;
+		}
+		var toggleVisibility = searchEl.parent('[component="group-selector"]').length > 0;
+
+		var groupEls = el.find('[component="group-list"] [data-name]');
+		el.on('show.bs.dropdown', function () {
+			function updateList() {
+				var val = searchEl.find('input').val().toLowerCase();
+				var noMatch = true;
+				groupEls.each(function () {
+					var liEl = $(this);
+					var isMatch = liEl.attr('data-name').toLowerCase().indexOf(val) !== -1;
+					if (noMatch && isMatch) {
+						noMatch = false;
+					}
+
+					liEl.toggleClass('hidden', !isMatch);
+				});
+
+				el.find('[component="group-list"] [component="group-no-matches"]').toggleClass('hidden', !noMatch);
+			}
+			if (toggleVisibility) {
+				el.find('.dropdown-toggle').addClass('hidden');
+				searchEl.removeClass('hidden');
+			}
+
+			searchEl.on('click', function (ev) {
+				ev.preventDefault();
+				ev.stopPropagation();
+			});
+			searchEl.find('input').val('').on('keyup', updateList);
+			updateList();
+		});
+
+		el.on('shown.bs.dropdown', function () {
+			searchEl.find('input').focus();
+		});
+
+		el.on('hide.bs.dropdown', function () {
+			if (toggleVisibility) {
+				el.find('.dropdown-toggle').removeClass('hidden');
+				searchEl.addClass('hidden');
+			}
+			searchEl.off('click').find('input').off('keyup');
+		});
+	};
+
+	return groupSearch;
+});

src/views/admin/manage/group.tpl

@@ -108,12 +108,25 @@
 			</div>
 		</div>
 		<div class="col-md-3">
-			<select id="group-selector" class="form-control">
+			<div component="group-selector" class="btn-group">
-				<!-- BEGIN groupNames -->
+				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-				<option value="{groupNames.encodedName}" <!-- IF groupNames.selected -->selected<!-- ENDIF groupNames.selected -->>{groupNames.displayName}</option>
+					<span component="group-selector-selected">{group.displayName}</span> <span class="caret"></span>
-				<!-- END groupNames -->
+				</button>
-			</select>
+				<div component="group-selector-search" class="hidden">
-			<br />
+					<input type="text" class="form-control" autocomplete="off">
+				</div>
+				<ul component="group-list" class="dropdown-menu group-dropdown-menu" role="menu">
+					<li component="group-no-matches" role="presentation" class="group hidden">
+						<a role="menu-item">[[search:no-matches]]</a>
+					</li>
+					<!-- BEGIN groupNames -->
+					<li role="presentation" class="group" data-name="{groupNames.displayName}">
+						<a href="{config.relative_path}/admin/manage/groups/{groupNames.encodedName}" role="menu-item">{groupNames.displayName}</a>
+					</li>
+					<!-- END groupNames -->
+				</ul>
+			</div>
+			<hr />
 			<div class="well">
 				<strong class="pull-left">[[admin/manage/privileges:edit-privileges]]</strong><br />
 				<!-- IMPORT partials/category-selector.tpl -->

src/views/admin/partials/menu.tpl

@@ -16,9 +16,9 @@
 			{{{ if user.privileges.admin:privileges }}}<li><a href="{relative_path}/admin/manage/privileges">[[admin/menu:manage/privileges]]</a></li>{{{ end }}}
 			{{{ if user.privileges.admin:users }}}<li><a href="{relative_path}/admin/manage/users">[[admin/menu:manage/users]]</a></li>{{{ end }}}
 			{{{ if user.privileges.superadmin }}}
-			<li><a href="{relative_path}/admin/manage/registration">[[admin/menu:manage/registration]]</a></li>
-			<li><a href="{relative_path}/admin/manage/admins-mods">[[admin/menu:manage/admins-mods]]</a></li>
 			<li><a href="{relative_path}/admin/manage/groups">[[admin/menu:manage/groups]]</a></li>
+			<li><a href="{relative_path}/admin/manage/admins-mods">[[admin/menu:manage/admins-mods]]</a></li>
+			<li><a href="{relative_path}/admin/manage/registration">[[admin/menu:manage/registration]]</a></li>
 			<li><a href="{relative_path}/admin/manage/tags">[[admin/menu:manage/tags]]</a></li>
 			<li><a href="{relative_path}/admin/manage/uploads">[[admin/menu:manage/uploads]]</a></li>
 			<li><a href="{relative_path}/admin/manage/digest">[[admin/menu:manage/digest]]</a></li>
@@ -183,9 +183,9 @@
 					{{{ if user.privileges.admin:privileges }}}<li><a href="{relative_path}/admin/manage/privileges">[[admin/menu:manage/privileges]]</a></li>{{{ end }}}
 					{{{ if user.privileges.admin:users }}}<li><a id="manage-users" href="{relative_path}/admin/manage/users">[[admin/menu:manage/users]]</a></li>{{{ end }}}
 					{{{ if user.privileges.superadmin }}}
-					<li><a href="{relative_path}/admin/manage/registration">[[admin/menu:manage/registration]]</a></li>
-					<li><a href="{relative_path}/admin/manage/admins-mods">[[admin/menu:manage/admins-mods]]</a></li>
 					<li><a href="{relative_path}/admin/manage/groups">[[admin/menu:manage/groups]]</a></li>
+					<li><a href="{relative_path}/admin/manage/admins-mods">[[admin/menu:manage/admins-mods]]</a></li>
+					<li><a href="{relative_path}/admin/manage/registration">[[admin/menu:manage/registration]]</a></li>
 					<li><a href="{relative_path}/admin/manage/tags">[[admin/menu:manage/tags]]</a></li>
 					<li><a href="{relative_path}/admin/manage/uploads">[[admin/menu:manage/uploads]]</a></li>
 					<li><a href="{relative_path}/admin/manage/digest">[[admin/menu:manage/digest]]</a></li>