feat: use category selector in category page

fix privilege shortcuts in group page after search

public/openapi/read.yaml

@@ -704,17 +704,60 @@ paths:
                                 type: string
                               parent:
                                 $ref: components/schemas/CategoryObject.yaml#/CategoryObject
-                      allCategories:
+                      categories:
                         type: array
                         items:
                           type: object
                           properties:
-                            text:
-                              type: string
-                            value:
+                            cid:
                               type: number
+                              description: A category identifier
+                            name:
+                              type: string
+                            icon:
+                              type: string
                             selected:
                               type: boolean
+                            level:
+                              type: string
+                            parentCid:
+                              type: number
+                              description: The category identifier for the category that is the immediate
+                                ancestor of the current category
+                            color:
+                              type: string
+                            bgColor:
+                              type: string
+                            imageClass:
+                              type: string
+                          required:
+                            - cid
+                            - name
+                            - icon
+                      selectedCategory:
+                        type: object
+                        properties:
+                          cid:
+                            type: number
+                            description: A category identifier
+                          name:
+                            type: string
+                          level:
+                            type: string
+                          icon:
+                            type: string
+                          parentCid:
+                            type: number
+                            description: The category identifier for the category that is the immediate
+                              ancestor of the current category
+                          color:
+                            type: string
+                          bgColor:
+                            type: string
+                          imageClass:
+                            type: string
+                          selected:
+                            type: boolean
                       customClasses:
                         type: array
                         items:

public/src/admin/manage/category.js

@@ -16,8 +16,8 @@ define('admin/manage/category', [
 			$this.val($this.attr('data-value'));
 		});
 
-		$('#category-selector').on('change', function () {
-			ajaxify.go('admin/manage/categories/' + $(this).val() + window.location.hash);
+		categorySelector.init($('[component="category-selector"]'), function (selectedCategory) {
+			ajaxify.go('admin/manage/categories/' + selectedCategory.cid);
 		});
 
 		function enableColorPicker(idx, inputEl) {

public/src/admin/manage/groups.js

@@ -2,8 +2,8 @@
 
 
 define('admin/manage/groups', [
-	'translator', 'benchpress', 'categorySelector',
-], function (translator, Benchpress, categorySelector) {
+	'categorySelector',
+], function (categorySelector) {
 	var	Groups = {};
 
 	var intervalId = 0;
@@ -78,13 +78,17 @@ define('admin/manage/groups', [
 			}
 		});
 
+		enableCategorySelectors();
+	};
+
+	function enableCategorySelectors() {
 		$('.groups-list [component="category-selector"]').each(function () {
 			var nameEncoded = $(this).parents('[data-name-encoded]').attr('data-name-encoded');
 			categorySelector.init($(this), function (selectedCategory) {
 				ajaxify.go('admin/manage/privileges/' + selectedCategory.cid + '?group=' + nameEncoded);
 			});
 		});
-	};
+	}
 
 	function handleSearch() {
 		var queryEl = $('#group-search');
@@ -105,13 +109,13 @@ define('admin/manage/groups', [
 					return app.alertError(err.message);
 				}
 
-				Benchpress.parse('admin/manage/groups', 'groups', {
+				app.parseAndTranslate('admin/manage/groups', 'groups', {
 					groups: groups,
+					categories: ajaxify.data.categories,
 				}, function (html) {
-					translator.translate(html, function (html) {
-						groupsEl.find('[data-groupname]').remove();
-						groupsEl.find('tbody').append(html);
-					});
+					groupsEl.find('[data-groupname]').remove();
+					groupsEl.find('tbody').append(html);
+					enableCategorySelectors();
 				});
 			});
 		}

src/controllers/admin/categories.js

@@ -11,7 +11,7 @@ categoriesController.get = async function (req, res, next) {
 	const [categoryData, parent, allCategories] = await Promise.all([
 		categories.getCategories([req.params.category_id], req.uid),
 		categories.getParents([req.params.category_id]),
-		categories.buildForSelectAll(['text', 'value']),
+		categories.buildForSelectAll(),
 	]);
 
 	const category = categoryData[0];
@@ -22,9 +22,10 @@ categoriesController.get = async function (req, res, next) {
 	category.parent = parent[0];
 	allCategories.forEach(function (category) {
 		if (category) {
-			category.selected = parseInt(category.value, 10) === parseInt(req.params.category_id, 10);
+			category.selected = parseInt(category.cid, 10) === parseInt(req.params.category_id, 10);
 		}
 	});
+	const selectedCategory = allCategories.find(c => c.selected);
 
 	const data = await plugins.fireHook('filter:admin.category.get', {
 		req: req,
@@ -38,7 +39,8 @@ categoriesController.get = async function (req, res, next) {
 
 	res.render('admin/manage/category', {
 		category: data.category,
-		allCategories: data.allCategories,
+		categories: data.allCategories,
+		selectedCategory: selectedCategory,
 		customClasses: data.customClasses,
 	});
 };

src/views/admin/manage/category.tpl

@@ -1,11 +1,7 @@
 <div class="category" data-cid="{category.cid}">
 	<div class="row">
 		<div class="col-md-3 pull-right">
-			<select id="category-selector" class="form-control">
-				<!-- BEGIN allCategories -->
-				<option value="{allCategories.value}" <!-- IF allCategories.selected -->selected<!-- ENDIF allCategories.selected -->>{allCategories.text}</option>
-				<!-- END allCategories -->
-			</select>
+			<!-- IMPORT partials/category-selector.tpl -->
 		</div>
 	</div>
 

src/views/admin/partials/categories/category-rows.tpl

@@ -17,7 +17,7 @@
                         ">
                             <i data-name="icon" value="{categories.icon}" class="fa {categories.icon}"></i>
                         </div>
-                        <h5 class="category-header">{categories.name}</h5>
+                        <h5 class="category-header"><a href="{config.relative_path}/admin/manage/categories/{categories.cid}">{categories.name}</a></h5>
                     </div>
                 </div>
             </div>