feat: add filter

NodeBB · Oct 13, 2020 · 959314c · 959314c
1 parent 933989e
commit 959314c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 19 deletions.
diff --git a/public/language/en-GB/admin/manage/users.json b/public/language/en-GB/admin/manage/users.json
@@ -20,16 +20,10 @@
 	"add-group": "Add Group",
 	"invite": "Invite",
 	"new": "New User",
-
-	"pills.latest": "Latest Users",
+	"filter-by": "Filter by",
 	"pills.unvalidated": "Not Validated",
-	"pills.no-posts": "No Posts",
-	"pills.top-posters": "Top Posters",
-	"pills.top-rep": "Most Reputation",
-	"pills.inactive": "Inactive",
-	"pills.flagged": "Most Flagged",
+	"pills.validated": "Validated",
 	"pills.banned": "Banned",
-	"pills.search": "User Search",
 
 	"50-per-page": "50 per page",
 	"100-per-page": "100 per page",

diff --git a/public/src/admin/manage/users.js b/public/src/admin/manage/users.js
@@ -6,13 +6,6 @@ define('admin/manage/users', [
 	var Users = {};
 
 	Users.init = function () {
-		var navPills = $('.nav-pills li');
-		var pathname = window.location.pathname;
-		if (!navPills.find('a[href^="' + pathname + '"]').length || pathname === config.relative_path + '/admin/manage/users') {
-			pathname = config.relative_path + '/admin/manage/users/latest';
-		}
-		navPills.removeClass('active').find('a[href^="' + pathname + '"]').parent().addClass('active');
-
 		$('#results-per-page').val(ajaxify.data.resultsPerPage).on('change', function () {
 			var query = utils.params();
 			query.resultsPerPage = $('#results-per-page').val();
@@ -411,6 +404,7 @@ define('admin/manage/users', [
 		handleInvite();
 
 		handleSort();
+		handleFilter();
 	};
 
 	function handleSearch() {
@@ -505,6 +499,7 @@ define('admin/manage/users', [
 
 		return decodeURIComponent($.param(params));
 	}
+
 	function handleSort() {
 		$('.users-table thead th').on('click', function () {
 			var $this = $(this);
@@ -525,5 +520,43 @@ define('admin/manage/users', [
 		});
 	}
 
+	function handleFilter() {
+		function getFilters() {
+			var filters = [];
+			$('#filter-by').find('[data-filter-by]').each(function () {
+				if ($(this).find('.fa-check').length) {
+					filters.push($(this).attr('data-filter-by'));
+				}
+			});
+			return filters;
+		}
+
+		var currentFilters = getFilters();
+		$('#filter-by').on('click', 'li', function () {
+			var $this = $(this);
+			$this.find('i').toggleClass('fa-check', !$this.find('i').hasClass('fa-check'));
+			return false;
+		});
+
+		$('#filter-by').on('hidden.bs.dropdown', function () {
+			var filters = getFilters();
+			var changed = filters.length !== currentFilters.length;
+			if (filters.length === currentFilters.length) {
+				filters.forEach(function (filter, i) {
+					if (filter !== currentFilters[i]) {
+						changed = true;
+					}
+				});
+			}
+			currentFilters = getFilters();
+			if (changed) {
+				var params = utils.params();
+				params.filter = filters;
+				var qs = buildSearchQuery(params);
+				ajaxify.go('admin/manage/users?' + qs);
+			}
+		});
+	}
+
 	return Users;
 });
diff --git a/src/controllers/admin/users.js b/src/controllers/admin/users.js
@@ -229,6 +229,10 @@ function render(req, res, data) {
 	data.adminInviteOnly = registrationType === 'admin-invite-only';
 	data['sort_' + data.sortBy] = true;
 	data['searchBy_' + validator.escape(String(req.query.searchBy))] = true;
+	const filterBy = Array.isArray(req.query.filter) ? req.query.filter : [req.query.filter];
+	filterBy.forEach(function (filter) {
+		data['filterBy_' + validator.escape(String(filter))] = true;
+	});
 	res.render('admin/manage/users', data);
 }
 

diff --git a/src/views/admin/manage/users.tpl b/src/views/admin/manage/users.tpl
@@ -23,10 +23,24 @@
 		</div>
 		<hr/>
 		<ul class="nav nav-pills">
-			<li><a href='{config.relative_path}/admin/manage/users/?filter=notvalidated&resultsPerPage={resultsPerPage}'>[[admin/manage/users:pills.unvalidated]]</a></li>
-
-			<li><a href='{config.relative_path}/admin/manage/users?filter=banned&resultsPerPage={resultsPerPage}'>[[admin/manage/users:pills.banned]]</a></li>
-
+			<li class="pull-right">
+				<div class="btn-group" id="filter-by">
+					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+						[[admin/manage/users:filter-by]]<span class="caret"></span>
+					</button>
+					<ul class="dropdown-menu dropdown-menu-right" role="menu">
+						<li data-filter-by="unverified" role="presentation">
+							<a role="menu-item" href="#"><i class="fa fa-fw {{{ if filterBy_unverified }}}fa-check{{{end}}}"></i>[[admin/manage/users:pills.unvalidated]]</a>
+						</li>
+						<li data-filter-by="verified" role="presentation">
+							<a role="menu-item" href="#"><i class="fa fa-fw {{{ if filterBy_verified }}}fa-check{{{end}}}"></i>[[admin/manage/users:pills.validated]]</a>
+						</li>
+						<li data-filter-by="banned" role="presentation">
+							<a role="menu-item" href="#"><i class="fa fa-fw {{{ if filterBy_banned }}}fa-check{{{end}}}"></i>[[admin/manage/users:pills.banned]]</a>
+						</li>
+					</ul>
+				</div>
+			</li>
 			<li class="pull-right">
 				<form class="form-inline">
 					<!-- IF inviteOnly -->