Support mass enable / disable in PermissionEditor (#936)

Co-authored-by: Ben Thomson <git@alfreido.com>
Co-authored-by: Marvin Durot <138058170+durotm@users.noreply.github.com>

modules/backend/formwidgets/permissioneditor/assets/css/permissioneditor.css

@@ -4,7 +4,7 @@
 .permissioneditor table{width:100%}
 .permissioneditor table th{padding:30px 4px 8px 4px;color:#2a3e51;font-weight:normal;border-bottom:1px solid #dbe1e3}
 .permissioneditor table th.tab{font-size:13px}
-.permissioneditor table th.permission-type{text-transform:uppercase;font-size:11px;text-align:center}
+.permissioneditor table th.permission-type{text-transform:uppercase;font-size:11px;text-align:center;cursor:pointer}
 .permissioneditor table td{padding:10px 4px;vertical-align:top;border-bottom:1px solid #ecf0f1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .permissioneditor table td.permission-value{text-align:center}
 .permissioneditor table td.permission-name{font-size:13px;cursor:pointer;color:#777}
@@ -37,4 +37,4 @@
 .permissioneditor table tr:last-child td{border-bottom:none}
 .permissioneditor table tr:first-child th{padding-top:0}
 .permissioneditor table tr.disabled td.permission-name{color:#AAA}
-.permissioneditor table tr.last-section-row td{border-bottom:none}
+.permissioneditor table tr.last-section-row td{border-bottom:none}

modules/backend/formwidgets/permissioneditor/assets/js/permissioneditor.js

@@ -13,6 +13,7 @@
     PermissionEditor.prototype.constructor = PermissionEditor
 
     PermissionEditor.prototype.init = function() {
+        $(document).on('click', '.permissioneditor table th.permission-type', this.proxy(this.onPermissionTypeClick))
         $(document).on('click', '.permissioneditor table td.permission-name', this.proxy(this.onPermissionNameClick))
         $(document).on('click', '.permissioneditor table tr.mode-checkbox input[type=checkbox]', this.proxy(this.onPermissionCheckboxClick))
         $(document).on('click', '.permissioneditor table tr.mode-radio input[type=radio]', this.proxy(this.onPermissionRadioClick))
@@ -21,6 +22,37 @@
     // EVENT HANDLERS
     // ============================
 
+    PermissionEditor.prototype.onPermissionTypeClick = function (ev) {
+        var $rows = $(ev.target).closest('tr').nextAll()
+        var index = $(ev.target).index()
+
+        var allChecked = true
+
+        for (let i = 0; i < $rows.length; i++) {
+            var $row = $rows.eq(i)
+            var $check = $row.find('td:nth-child(' + (index + 1) + ') input[type=radio], td:nth-child(' + (index + 1) + ') input[type=checkbox]').eq(0)
+
+            if ($check.length > 0) {
+                if (!$check[0].checked) {
+                    allChecked = false
+                    break
+                }
+            }
+        }
+
+        for (let i = 0; i < $rows.length; i++) {
+            var $row = $rows.eq(i)
+            var $check = $row.find('td:nth-child(' + (index + 1) + ') input[type=radio], td:nth-child(' + (index + 1) + ') input[type=checkbox]').eq(0)
+            if ($check.length > 0) {
+                if ($check.is('input[type=checkbox]')) {
+                    $check.prop('checked', !allChecked)
+                } else {
+                    $check.prop('checked', true)
+                }
+            }
+        }
+    };
+
     PermissionEditor.prototype.onPermissionNameClick = function(ev) {
         var $row = $(ev.target).closest('tr'),
             $checkbox = $row.find('input[type=checkbox]')
@@ -70,4 +102,4 @@
         new PermissionEditor()
     })
 
-}(window.jQuery);
+}(window.jQuery);