Added column select-all to role permission table

diff --git a/resources/assets/js/components/permissions-table.js b/resources/assets/js/components/permissions-table.js
index 96d95bb3d2a8e9421d695ae06d7386759e8a615b..baad7525833c0040b96b51cf0e9fe5e8adf69f66 100644 (file)
--- a/resources/assets/js/components/permissions-table.js
+++ b/resources/assets/js/components/permissions-table.js
@@ -13,6 +13,12 @@ class PermissionsTable {
         for (let toggleRowElem of toggleRowElems) {
             toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
         }
+
+        // Handle toggle column event
+        const toggleColumnElems = elem.querySelectorAll('[permissions-table-toggle-all-in-column]');
+        for (let toggleColElem of toggleColumnElems) {
+            toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
+        }
     }
 
     toggleAllClick(event) {
@@ -25,10 +31,31 @@ class PermissionsTable {
         this.toggleAllInElement(event.target.closest('tr'));
     }
 
+    toggleColumnClick(event) {
+        event.preventDefault();
+
+        const tableCell = event.target.closest('th,td');
+        const colIndex = Array.from(tableCell.parentElement.children).indexOf(tableCell);
+        const tableRows = tableCell.closest('table').querySelectorAll('tr');
+        const inputsToToggle = [];
+
+        for (let row of tableRows) {
+            const targetCell = row.children[colIndex];
+            if (targetCell) {
+                inputsToToggle.push(...targetCell.querySelectorAll('input[type=checkbox]'));
+            }
+        }
+        this.toggleAllInputs(inputsToToggle);
+    }
+
     toggleAllInElement(domElem) {
-        const inputsToSelect = domElem.querySelectorAll('input[type=checkbox]');
-        const currentState = inputsToSelect.length > 0 ? inputsToSelect[0].checked : false;
-        for (let checkbox of inputsToSelect) {
+        const inputsToToggle = domElem.querySelectorAll('input[type=checkbox]');
+        this.toggleAllInputs(inputsToToggle);
+    }
+
+    toggleAllInputs(inputsToToggle) {
+        const currentState = inputsToToggle.length > 0 ? inputsToToggle[0].checked : false;
+        for (let checkbox of inputsToToggle) {
             checkbox.checked = !currentState;
             checkbox.dispatchEvent(new Event('change'));
         }

diff --git a/resources/views/settings/roles/form.blade.php b/resources/views/settings/roles/form.blade.php
index d3c1d9070318904cb6de4e4bd92f78380b005af7..6d723086714bbc844cdd49ab672571c037324c2c 100644 (file)
--- a/resources/views/settings/roles/form.blade.php
+++ b/resources/views/settings/roles/form.blade.php
@@ -55,10 +55,10 @@
                     <th width="20%">
                         <a href="#" permissions-table-toggle-all class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                     </th>
-                    <th width="20%">{{ trans('common.create') }}</th>
-                    <th width="20%">{{ trans('common.view') }}</th>
-                    <th width="20%">{{ trans('common.edit') }}</th>
-                    <th width="20%">{{ trans('common.delete') }}</th>
+                    <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.create') }}</th>
+                    <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.view') }}</th>
+                    <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.edit') }}</th>
+                    <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.delete') }}</th>
                 </tr>
                 <tr>
                     <td>