feat: filter flags by username #8489 (#9451)

* feat: filter flags by username #8489

* feat: toggle flag filter text

public/language/en-GB/flags.json

@@ -27,6 +27,7 @@
 	"filter-cid-all": "All categories",
 	"apply-filters": "Apply Filters",
 	"more-filters": "More Filters",
+	"fewer-filters": "Fewer Filters",
 
 	"quick-actions": "Quick Actions",
 	"flagged-user": "Flagged User",

public/openapi/read/flags.yaml

@@ -55,6 +55,8 @@ get:
                         type: number
                       perPage:
                         type: number
+                  expanded:
+                    type: boolean
                   sort:
                     type: string
                   title:

public/src/client/flags/list.js

@@ -1,6 +1,6 @@
 'use strict';
 
-define('forum/flags/list', ['components', 'Chart', 'categoryFilter'], function (components, Chart, categoryFilter) {
+define('forum/flags/list', ['components', 'Chart', 'categoryFilter', 'autocomplete'], function (components, Chart, categoryFilter, autocomplete) {
 	var Flags = {};
 
 	var selectedCids;
@@ -34,27 +34,28 @@ define('forum/flags/list', ['components', 'Chart', 'categoryFilter'], function (
 				ajaxify.go('flags/' + flagId);
 			});
 
-		var graphWrapper = $('#flags-daily-wrapper');
-		var graphFooter = graphWrapper.siblings('.panel-footer');
 		$('#flags-daily-wrapper').one('shown.bs.collapse', function () {
 			Flags.handleGraphs();
 		});
-		graphFooter.on('click', graphWrapper.collapse.bind(graphWrapper, 'toggle'));
+
+		autocomplete.user($('#filter-assignee, #filter-targetUid, #filter-reporterId'), (ev, ui) => {
+			setTimeout(() => { ev.target.value = ui.item.user.uid; });
+		});
 	};
 
 	Flags.enableFilterForm = function () {
-		var filtersEl = components.get('flags/filters');
+		const $filtersEl = components.get('flags/filters');
 
 		// Parse ajaxify data to set form values to reflect current filters
-		for (var filter in ajaxify.data.filters) {
+		for (const filter in ajaxify.data.filters) {
 			if (ajaxify.data.filters.hasOwnProperty(filter)) {
-				filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
+				$filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
 			}
 		}
-		filtersEl.find('[name="sort"]').val(ajaxify.data.sort);
+		$filtersEl.find('[name="sort"]').val(ajaxify.data.sort);
 
 		document.getElementById('apply-filters').addEventListener('click', function () {
-			var payload = filtersEl.serializeArray();
+			const payload = $filtersEl.serializeArray();
 			// cid is special comes from categoryFilter module
 			selectedCids.forEach(function (cid) {
 				payload.push({ name: 'cid', value: cid });
@@ -62,6 +63,15 @@ define('forum/flags/list', ['components', 'Chart', 'categoryFilter'], function (
 
 			ajaxify.go('flags?' + (payload.length ? $.param(payload) : 'reset=1'));
 		});
+
+		$filtersEl.find('button[data-target="#more-filters"]').click((ev) => {
+			const textVariant = ev.target.getAttribute('data-text-variant');
+			if (!textVariant) {
+				return;
+			}
+			ev.target.setAttribute('data-text-variant', ev.target.textContent);
+			ev.target.firstChild.textContent = textVariant;
+		});
 	};
 
 	Flags.enableCheckboxes = function () {

src/controllers/mods.js

@@ -37,8 +37,8 @@ modsController.flags.list = async function (req, res, next) {
 	// Parse query string params for filters, eliminate non-valid filters
 	filters = filters.reduce((memo, cur) => {
 		if (req.query.hasOwnProperty(cur)) {
-			if (req.query[cur] !== '') {
+			if (req.query[cur].trim() !== '') {
-				memo[cur] = req.query[cur];
+				memo[cur] = req.query[cur].trim();
 			}
 		}
 
@@ -94,6 +94,7 @@ modsController.flags.list = async function (req, res, next) {
 		selectedCategory: selectData.selectedCategory,
 		hasFilter: hasFilter,
 		filters: filters,
+		expanded: !!(filters.assignee || filters.reporterId || filters.targetUid),
 		sort: sort || 'newest',
 		title: '[[pages:flags]]',
 		pagination: pagination.create(flagsData.page, flagsData.pageCount, req.query),