feat: select/clear all checkboxes in privilege table (#8941)

public/src/admin/manage/privileges.js

@@ -6,7 +6,8 @@ define('admin/manage/privileges', [
 	'benchpress',
 	'categorySelector',
 	'mousetrap',
-], function (autocomplete, translator, Benchpress, categorySelector, mousetrap) {
+	'admin/modules/checkboxRowSelector',
+], function (autocomplete, translator, Benchpress, categorySelector, mousetrap, checkboxRowSelector) {
 	var Privileges = {};
 
 	var cid;
@@ -14,6 +15,8 @@ define('admin/manage/privileges', [
 	Privileges.init = function () {
 		cid = isNaN(parseInt(ajaxify.data.selectedCategory.cid, 10)) ? 'admin' : ajaxify.data.selectedCategory.cid;
 
+		checkboxRowSelector.init('.privilege-table-container');
+
 		categorySelector.init($('[component="category-selector"]'), function (category) {
 			cid = parseInt(category.cid, 10);
 			cid = isNaN(cid) ? 'admin' : cid;
@@ -52,12 +55,14 @@ define('admin/manage/privileges', [
 					wrapperEl.attr('data-delta', delta);
 					Privileges.exposeAssumedPrivileges();
 				}
+				checkboxRowSelector.updateState(checkboxEl);
 			} else {
 				app.alertError('[[error:invalid-data]]');
 			}
 		});
 
 		Privileges.exposeAssumedPrivileges();
+		checkboxRowSelector.updateAll();
 		Privileges.addEvents();	// events with confirmation modals
 	};
 
@@ -145,6 +150,7 @@ define('admin/manage/privileges', [
 			}, function (html) {
 				$('.privilege-table-container').html(html);
 				Privileges.exposeAssumedPrivileges();
+				checkboxRowSelector.updateAll();
 
 				hightlightRowByDataAttr('data-group-name', groupToHighlight);
 			});
@@ -158,7 +164,7 @@ define('admin/manage/privileges', [
 			this arrangement in the table
 		*/
 		var privs = [];
-		$('.privilege-table tr[data-group-name="registered-users"] td input[type="checkbox"]').parent().each(function (idx, el) {
+		$('.privilege-table tr[data-group-name="registered-users"] td input[type="checkbox"]:not(.checkbox-helper)').parent().each(function (idx, el) {
 			if ($(el).find('input').prop('checked')) {
 				privs.push(el.getAttribute('data-privilege'));
 			}

public/src/admin/modules/checkboxRowSelector.js

@@ -0,0 +1,49 @@
+'use strict';
+
+define('admin/modules/checkboxRowSelector', function () {
+	const self = {};
+	let $tableContainer;
+
+	self.toggling = false;
+
+	self.init = function (tableCssSelector) {
+		$tableContainer = $(tableCssSelector);
+		$tableContainer.on('change', 'input.checkbox-helper', handleChange);
+	};
+
+	self.updateAll = function () {
+		$tableContainer.find('input.checkbox-helper').each((idx, el) => {
+			self.updateState($(el));
+		});
+	};
+
+	self.updateState = function ($checkboxEl) {
+		if (self.toggling) {
+			return;
+		}
+		const checkboxes = $checkboxEl.closest('tr').find('input:not([disabled])').toArray();
+		const $toggler = $(checkboxes.shift());
+		const rowState = checkboxes.every(el => el.checked);
+		$toggler.prop('checked', rowState);
+	};
+
+	function handleChange(ev) {
+		const $checkboxEl = $(ev.target);
+		toggleAll($checkboxEl);
+	}
+
+	function toggleAll($checkboxEl) {
+		self.toggling = true;
+		const state = $checkboxEl.prop('checked');
+		$checkboxEl.closest('tr').find('input:not(.checkbox-helper)').each((idx, el) => {
+			const $checkbox = $(el);
+			if ($checkbox.prop('checked') === state) {
+				return;
+			}
+			$checkbox.click();
+		});
+		self.toggling = false;
+	}
+
+	return self;
+});

src/views/admin/partials/privileges/global.tpl

@@ -3,6 +3,7 @@
 						<thead>
 							<tr>
 								<th colspan="2">[[admin/manage/categories:privileges.section-group]]</th>
+								<th class="text-center">Select/Clear All</th>
 								<!-- BEGIN privileges.labels.groups -->
 								<th class="text-center">{privileges.labels.groups.name}</th>
 								<!-- END privileges.labels.groups -->
@@ -18,6 +19,7 @@
 									{privileges.groups.name}
 								</td>
 								<td></td>
+								<td class="text-center"><input autocomplete="off" type="checkbox" class="checkbox-helper"></td>
 								{function.spawnPrivilegeStates, privileges.groups.name, ../privileges}
 							</tr>
 							<!-- END privileges.groups -->
@@ -45,6 +47,7 @@
 							</tr><tr><!-- zebrastripe reset --></tr>
 							<tr>
 								<th colspan="2">[[admin/manage/categories:privileges.section-user]]</th>
+								<th class="text-center">Select/Clear All</th>
 								<!-- BEGIN privileges.labels.users -->
 								<th class="text-center">{privileges.labels.users.name}</th>
 								<!-- END privileges.labels.users -->
@@ -61,6 +64,7 @@
 									<!-- ENDIF ../picture -->
 								</td>
 								<td>{privileges.users.username}</td>
+								<td class="text-center"><input autocomplete="off" type="checkbox" class="checkbox-helper"></td>
 								{function.spawnPrivilegeStates, privileges.users.username, ../privileges}
 							</tr>
 							<!-- END privileges.users -->