From 5d8ca1f27f967c77c384b78f0db7ef2cb196a7e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <baris@nodebb.org>
Date: Sun, 7 Feb 2021 15:10:42 -0500
Subject: [PATCH] Categories refactor (#517)

* feat: pagination on /categories and /category page for sub categories

* feat: show subcategories left

* fix: rename categories to allCategories on /search

* feat: add component for subcategory container

* feat: update filter/selector tpls

* feat: change multi to regular input

entire category list is no longer returned on group page

* feat: add pagination to user/:slug/categories

* feat: flags category selector

* feat: left/right filter

* feat: move filter right

* feat: add selector to /categories and /category

only when categories dont fit on one page

* fix: show title if only one page
---
 templates/account/categories.tpl              |  1 +
 templates/categories.tpl                      |  4 ++++
 templates/flags/list.tpl                      |  2 +-
 templates/groups/details.tpl                  | 16 +++++++--------
 .../partials/category-filter-content.tpl      | 19 ++++++++++++++++++
 templates/partials/category-filter-right.tpl  |  3 +++
 templates/partials/category-filter.tpl        | 20 ++-----------------
 templates/partials/category-selector.tpl      | 14 ++++++-------
 templates/partials/category/subcategory.tpl   |  4 ++++
 templates/partials/flags/filters.tpl          | 14 ++++---------
 templates/popular.tpl                         |  2 +-
 templates/post-queue.tpl                      |  2 +-
 templates/recent.tpl                          |  2 +-
 templates/top.tpl                             |  2 +-
 templates/unread.tpl                          |  2 +-
 15 files changed, 58 insertions(+), 49 deletions(-)
 create mode 100644 templates/partials/category-filter-content.tpl
 create mode 100644 templates/partials/category-filter-right.tpl

diff --git a/templates/account/categories.tpl b/templates/account/categories.tpl
index 261e9ff..bab53ac 100644
--- a/templates/account/categories.tpl
+++ b/templates/account/categories.tpl
@@ -22,6 +22,7 @@
 				<!-- IMPORT partials/account/category-item.tpl -->
 				{{{end}}}
 			</ul>
+			<!-- IMPORT partials/paginator.tpl -->
 		</div>
 	</div>
 </div>
diff --git a/templates/categories.tpl b/templates/categories.tpl
index d1da411..d94f2e4 100644
--- a/templates/categories.tpl
+++ b/templates/categories.tpl
@@ -6,7 +6,11 @@
 </div>
 <div class="row">
 	<div class="<!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
+		{{{ if pagination.pages.length }}}
+		<div><!-- IMPORT partials/category-selector.tpl --></div>
+		{{{ else }}}
 		<h1 class="categories-title">[[pages:categories]]</h1>
+		{{{ end }}}
 		<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{each categories}}}
 			<!-- IMPORT partials/categories/item.tpl -->
diff --git a/templates/flags/list.tpl b/templates/flags/list.tpl
index fb0ab5e..b984ca4 100644
--- a/templates/flags/list.tpl
+++ b/templates/flags/list.tpl
@@ -8,7 +8,7 @@
 		<!-- IF hasFilter -->
 		<div class="alert alert-warning">
 			<p class="pull-right">
-				<a href="{config.relative_path}/flags?reset=1">[[flags:filter-reset]]</a>
+				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
 			</p>
 			[[flags:filter-active]]
 		</div>
diff --git a/templates/groups/details.tpl b/templates/groups/details.tpl
index 47702ee..5c2db79 100644
--- a/templates/groups/details.tpl
+++ b/templates/groups/details.tpl
@@ -164,14 +164,14 @@
 					<hr />
 					<div class="form-group">
 						<label for="memberPostCids">[[groups:details.member-post-cids]]</label>
-						<select multiple="true" name="memberPostCids" id="memberPostCids" class="form-control" size="15">
-							{{{each group.categories}}}
-							<option value="{categories.cid}"{{{ if ../selected }}} selected{{{ end }}}>
-								{../level}{../name}
-							</option>
-							{{{end}}}
-						</select>
-						<p class="help-block">[[groups:details.member-post-cids-help]]</p>
+						<div class="row">
+							<div class="col-md-6">
+								<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
+							</div>
+							<div class="col-md-6 member-post-cids-selector">
+								<!-- IMPORT partials/category-selector.tpl -->
+							</div>
+						</div>
 					</div>
 
 					<hr />
diff --git a/templates/partials/category-filter-content.tpl b/templates/partials/category-filter-content.tpl
new file mode 100644
index 0000000..c068ea4
--- /dev/null
+++ b/templates/partials/category-filter-content.tpl
@@ -0,0 +1,19 @@
+<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+    {{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>{{{ else }}}
+    <span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
+</button>
+<div component="category-selector-search" class="hidden">
+    <input type="text" class="form-control" autocomplete="off">
+</div>
+<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+    {{{ if allCategoriesUrl }}}
+    <li role="presentation" class="category" data-all="all">
+        <a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    </li>
+    {{{ end }}}
+    {{{each categoryItems}}}
+    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
+        <a role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i><span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ../icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {../icon}" style="color: {../color};"></i></span>{{{ end }}} {../name}</span></a>
+    </li>
+    {{{end}}}
+</ul>
\ No newline at end of file
diff --git a/templates/partials/category-filter-right.tpl b/templates/partials/category-filter-right.tpl
new file mode 100644
index 0000000..917a42b
--- /dev/null
+++ b/templates/partials/category-filter-right.tpl
@@ -0,0 +1,3 @@
+<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet">
+   <!-- IMPORT partials/category-filter-content.tpl -->
+</div>
\ No newline at end of file
diff --git a/templates/partials/category-filter.tpl b/templates/partials/category-filter.tpl
index 3596ef0..3f1d294 100644
--- a/templates/partials/category-filter.tpl
+++ b/templates/partials/category-filter.tpl
@@ -1,19 +1,3 @@
-<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet {{{ if !categories.length }}}hidden{{{end}}}">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-        {{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>{{{ else }}}
-        <span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
-    </button>
-    <div component="category-selector-search" class="hidden">
-        <input type="text" class="form-control" autocomplete="off">
-    </div>
-    <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-        <li role="presentation" class="category">
-            <a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
-        </li>
-        {{{each categories}}}
-        <li role="presentation" class="category {{{ if categories.disabledClass }}}disabled{{{ end }}}" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}" data-name="{categories.name}">
-            <a role="menu-item" href="#">{categories.level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !categories.selected }}}invisible{{{ end }}}"></i><span component="category-markup">{{{ if categories.icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span>{{{ end }}} {categories.name}</span></a>
-        </li>
-        {{{end}}}
-    </ul>
+<div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
+   <!-- IMPORT partials/category-filter-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/templates/partials/category-selector.tpl b/templates/partials/category-selector.tpl
index 822dc05..98a1350 100644
--- a/templates/partials/category-selector.tpl
+++ b/templates/partials/category-selector.tpl
@@ -1,7 +1,7 @@
-<div component="category-selector" class="btn-group <!-- IF pullRight -->pull-right<!-- ENDIF pullRight -->">
+<div component="category-selector" class="btn-group {{{ if pullRight }}}pull-right{{{ end }}}">
 	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-		<span component="category-selector-selected"><!-- IF selectedCategory --><span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}<!-- ELSE -->
-		[[topic:thread_tools.select_category]]<!-- ENDIF selectedCategory --></span> <span class="caret"></span>
+		<span component="category-selector-selected">{{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}{{{ else }}}
+		{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}{{{ end }}}</span> <span class="caret"></span>
 	</button>
 	<div component="category-selector-search" class="hidden">
 		<input type="text" class="form-control" autocomplete="off">
@@ -10,10 +10,10 @@
 		<li component="category/no-matches" role="presentation" class="category hidden">
 			<a role="menu-item">[[search:no-matches]]</a>
 		</li>
-		{{{each categories}}}
-		<li role="presentation" class="category <!-- IF categories.disabledClass -->disabled<!-- ENDIF categories.disabledClass -->" data-cid="{categories.cid}" data-name="{categories.name}" data-parent-cid="{categories.parentCid}">
-			<a role="menu-item">{categories.level}<span component="category-markup"><!-- IF categories.icon --><span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {categories.color};" class="fa fa-stack-1x fa-fw {categories.icon}"></i></span><!-- ENDIF categories.icon --> {categories.name}</span></a>
+		{{{each categoryItems}}}
+		<li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
+			<a role="menu-item">{../level}<span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ./icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {../color};" class="fa fa-stack-1x fa-fw {../icon}"></i></span>{{{ end }}} {../name}</span></a>
 		</li>
-		{{{end}}}
+		{{{ end }}}
 	</ul>
 </div>
\ No newline at end of file
diff --git a/templates/partials/category/subcategory.tpl b/templates/partials/category/subcategory.tpl
index 86fbfcd..8d47809 100644
--- a/templates/partials/category/subcategory.tpl
+++ b/templates/partials/category/subcategory.tpl
@@ -1,6 +1,10 @@
 {{{ if children.length }}}
 <div class="subcategory">
+	{{{ if hasMoreSubCategories }}}
+	<div><!-- IMPORT partials/category-selector.tpl --></div>
+	{{{ else }}}
 	<p>[[category:subcategories]]</p>
+	{{{ end }}}
 
 	<ul component="category/subcategory/container" class="categories" itemscope itemtype="http://www.schema.org/ItemList">
 		{{{each children}}}
diff --git a/templates/partials/flags/filters.tpl b/templates/partials/flags/filters.tpl
index cfd6cc8..13282c1 100644
--- a/templates/partials/flags/filters.tpl
+++ b/templates/partials/flags/filters.tpl
@@ -25,6 +25,10 @@
 	<div class="panel-body">
 		<form role="form" component="flags/filters">
 			<fieldset>
+				<div class="form-group">
+					<label for="filter-cid">[[flags:filter-cid]]</label>
+					<!-- IMPORT partials/category-filter.tpl -->
+				</div>
 				<div class="form-group">
 					<label for="sort">[[flags:sort]]</label>
 					<select class="form-control" id="sort" name="sort">
@@ -59,16 +63,6 @@
 						<option value="user">[[flags:filter-type-user]]</option>
 					</select>
 				</div>
-
-				<div class="form-group">
-					<label for="filter-cid">[[flags:filter-cid]]</label>
-					<select class="form-control" id="filter-cid" name="cid" multiple="true">
-						<option value="">[[flags:filter-cid-all]]</option>
-						{{{each categories}}}
-						<option value="{@key}">{@value}</option>
-						{{{end}}}
-					</select>
-				</div>
 			</fieldset>
 
 			<fieldset class="collapse" id="more-filters" aria-expanded="false">
diff --git a/templates/popular.tpl b/templates/popular.tpl
index 30279ec..9ac3d02 100644
--- a/templates/popular.tpl
+++ b/templates/popular.tpl
@@ -18,7 +18,7 @@
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
diff --git a/templates/post-queue.tpl b/templates/post-queue.tpl
index 98083c2..947510f 100644
--- a/templates/post-queue.tpl
+++ b/templates/post-queue.tpl
@@ -1,6 +1,6 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="btn-toolbar">
-	<!-- IMPORT partials/category-filter.tpl -->
+	<!-- IMPORT partials/category-filter-right.tpl -->
 </div>
 <hr/>
 <div class="row">
diff --git a/templates/recent.tpl b/templates/recent.tpl
index 724c6ea..da15691 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -21,7 +21,7 @@
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
diff --git a/templates/top.tpl b/templates/top.tpl
index b8bd994..fdcda71 100644
--- a/templates/top.tpl
+++ b/templates/top.tpl
@@ -18,7 +18,7 @@
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 6ec7c6f..583f848 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -39,7 +39,7 @@
 			</ul>
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">