feat: add button to see category children, closes #10606

public/less/admin/manage/categories.less

@@ -8,7 +8,9 @@ div.categories {
 		> li > ul > li {
 			margin-left: 4.5rem;
 		}
-
+		> li > a {
+			margin-left: 4.5rem;
+		}
 		.row {
 			margin-left: -15px;
 			margin-right: -15px;
@@ -102,7 +104,6 @@ div.categories {
 		min-height: 20px;
 		height: 20px;
 	}
-
 }
 
 .category {

public/src/admin/manage/categories.js

@@ -172,7 +172,7 @@ define('admin/manage/categories', [
 			});
 		} else {
 			sortables = {};
-			renderList(categories, container, 0);
+			renderList(categories, container, { cid: 0 });
 		}
 	};
 
@@ -222,9 +222,10 @@ define('admin/manage/categories', [
 	 * @param container {object} parent jquery element for the list
 	 * @param parentId {number} parent category identifier
 	 */
-	function renderList(categories, container, parentId) {
+	function renderList(categories, container, parentCategory) {
 		// Translate category names if needed
 		let count = 0;
+		const parentId = parentCategory.cid;
 		categories.forEach(function (category, idx, parent) {
 			translator.translate(category.name, function (translated) {
 				if (category.name !== translated) {
@@ -244,14 +245,15 @@ define('admin/manage/categories', [
 
 		function continueRender() {
 			app.parseAndTranslate('admin/partials/categories/category-rows', {
-				cid: parentId,
+				cid: parentCategory.cid,
 				categories: categories,
+				parentCategory: parentCategory,
 			}, function (html) {
 				container.append(html);
 
 				// Handle and children categories in this level have
 				for (let x = 0, numCategories = categories.length; x < numCategories; x += 1) {
-					renderList(categories[x].children, $('li[data-cid="' + categories[x].cid + '"]'), categories[x].cid);
+					renderList(categories[x].children, $('li[data-cid="' + categories[x].cid + '"]'), categories[x]);
 				}
 
 				// Make list sortable

src/controllers/admin/categories.js

@@ -66,8 +66,7 @@ categoriesController.getAll = async function (req, res) {
 	const categoriesData = await categories.getCategoriesFields(cids, fields);
 	const result = await plugins.hooks.fire('filter:admin.categories.get', { categories: categoriesData, fields: fields });
 	let tree = categories.getTree(result.categories, rootParent);
-
-	const cidsCount = rootCid ? cids.length - 1 : tree.length;
+	const cidsCount = rootCid && tree[0] ? tree[0].children.length : tree.length;
 
 	const pageCount = Math.max(1, Math.ceil(cidsCount / meta.config.categoriesPerPage));
 	const page = Math.min(parseInt(req.query.page, 10) || 1, pageCount);
@@ -76,6 +75,9 @@ categoriesController.getAll = async function (req, res) {
 
 	function trim(c) {
 		if (c.children) {
+			c.subCategoriesLeft = Math.max(0, c.children.length - c.subCategoriesPerPage);
+			c.hasMoreSubCategories = c.children.length > c.subCategoriesPerPage;
+			c.showMorePage = Math.ceil(c.subCategoriesPerPage / meta.config.categoriesPerPage)
 			c.children = c.children.slice(0, c.subCategoriesPerPage);
 			c.children.forEach(c => trim(c));
 		}

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

@@ -50,6 +50,11 @@
             </div>
         </div>
     </li>
+    {{{ if ../hasMoreSubCategories}}}
+    <li>
+	    <a href="{config.relative_path}/admin/manage/categories?cid={categories.cid}&page={categories.showMorePage}" class="btn btn-default">[[category:x-more-categories, {../subCategoriesLeft}]]</a>
+    </li>
+	{{{ end }}}
 <!-- END categories -->
 <li class="children-placeholder"></li>
 </ul>