feat: allow searching categories in ACP

NodeBB · Jul 20, 2020 · 1e7397b · 1e7397b
1 parent f06b1ce
commit 1e7397b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 10 deletions.
diff --git a/public/language/en-GB/admin/manage/categories.json b/public/language/en-GB/admin/manage/categories.json
@@ -79,5 +79,6 @@
 	"alert.not-enough-whitelisted-tags": "Whitelisted tags are less than minimum tags, you need to create more whitelisted tags!",
 	"collapse-all": "Collapse All",
 	"expand-all": "Expand All",
-	"disable-on-create": "Disable on create"
+	"disable-on-create": "Disable on create",
+	"no-matches": "No matches"
 }
diff --git a/public/src/admin/manage/categories.js b/public/src/admin/manage/categories.js
@@ -11,9 +11,9 @@ define('admin/manage/categories', [
 	var sortables;
 
 	Categories.init = function () {
-		socket.emit('admin.categories.getAll', function (error, payload) {
-			if (error) {
-				return app.alertError(error.message);
+		socket.emit('admin.categories.getAll', function (err, payload) {
+			if (err) {
+				return app.alertError(err.message);
 			}
 
 			Categories.render(payload);
@@ -63,8 +63,55 @@ define('admin/manage/categories', [
 			el.find('i').toggleClass('fa-minus', expand).toggleClass('fa-plus', !expand);
 			el.closest('[data-cid]').find('> ul[data-cid]').toggleClass('hidden', !expand);
 		}
+
+		$('#category-search').on('keyup', function () {
+			searchCategory();
+		});
 	};
 
+	function searchCategory() {
+		var container = $('#content .categories');
+		function revealParents(cid) {
+			var parentCid = container.find('li[data-cid="' + cid + '"]').attr('data-parent-cid');
+			if (parentCid) {
+				container.find('li[data-cid="' + parentCid + '"]').removeClass('hidden');
+				revealParents(parentCid);
+			}
+		}
+
+		function revealChildren(cid) {
+			var els = container.find('li[data-parent-cid="' + cid + '"]');
+			els.each(function (index, el) {
+				var $el = $(el);
+				$el.removeClass('hidden');
+				revealChildren($el.attr('data-cid'));
+			});
+		}
+
+		var categoryEls = container.find('li[data-cid]');
+		var val = $('#category-search').val().toLowerCase();
+		var noMatch = true;
+		var cids = [];
+		categoryEls.each(function () {
+			var liEl = $(this);
+			var isMatch = liEl.attr('data-name').toLowerCase().indexOf(val) !== -1;
+			if (noMatch && isMatch) {
+				noMatch = false;
+			}
+			if (isMatch && val) {
+				cids.push(liEl.attr('data-cid'));
+			}
+			liEl.toggleClass('hidden', !isMatch);
+		});
+
+		cids.forEach(function (cid) {
+			revealParents(cid);
+			revealChildren(cid);
+		});
+
+		$('[component="category/no-matches"]').toggleClass('hidden', !noMatch);
+	}
+
 	Categories.throwCreateModal = function () {
 		socket.emit('categories.getSelectCategories', {}, function (err, categories) {
 			if (err) {

diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl
@@ -1,5 +1,18 @@
-<button id="collapse-all" class="btn btn-default">[[admin/manage/categories:collapse-all]]</button> <button id="expand-all" class="btn btn-default">[[admin/manage/categories:expand-all]]</button>
+<div class="row">
+    <div class="col-lg-9">
+        <button id="collapse-all" class="btn btn-default">[[admin/manage/categories:collapse-all]]</button> <button id="expand-all" class="btn btn-default">[[admin/manage/categories:expand-all]]</button>
+    </div>
+    <div class="col-lg-3">
+        <div class="input-group">
+            <input type="text" class="form-control" placeholder="[[global:search]]" id="category-search">
+            <span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+        </div>
+    </div>
+</div>
+
+
 <hr/>
+<div component="category/no-matches" class="hidden">[[admin/manage/categories:no-matches]]</div>
 <div class="categories"></div>
 
 <button data-action="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">

diff --git a/src/views/admin/manage/groups.tpl b/src/views/admin/manage/groups.tpl
@@ -1,9 +1,13 @@
+<div class="row">
+	<div class="col-lg-3 pull-right">
+		<div class="input-group">
+			<input type="text" class="form-control" placeholder="[[admin/manage/groups:search-placeholder]]" id="group-search">
+			<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+		</div>
+	</div>
+</div>
 <div class="row groups">
 	<div class="col-xs-12">
-		<div>
-			<input id="group-search" type="text" class="form-control" placeholder="[[admin/manage/groups:search-placeholder]]" />
-		</div>
-
 		<table class="table table-striped groups-list">
 			<thead>
 				<tr>

diff --git a/src/views/admin/partials/categories/category-rows.tpl b/src/views/admin/partials/categories/category-rows.tpl
@@ -1,6 +1,6 @@
 <ul data-cid="{cid}">
 <!-- BEGIN categories -->
-    <li data-cid="{categories.cid}" <!-- IF categories.disabled -->class="disabled"<!-- ENDIF categories.disabled -->>
+    <li data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}" data-name="{categories.name}" <!-- IF categories.disabled -->class="disabled"<!-- ENDIF categories.disabled -->>
         <div class="row category-row">
             <div class="col-md-9">
                 <div class="clearfix">