Added select-all helpers to permission tables

resources/assets/js/components/index.js

@@ -22,6 +22,7 @@ import headerMobileToggle from "./header-mobile-toggle";
 import listSortControl from "./list-sort-control";
 import triLayout from "./tri-layout";
 import breadcrumbListing from "./breadcrumb-listing";
+import permissionsTable from "./permissions-table";
 
 const componentMapping = {
     'dropdown': dropdown,
@@ -48,6 +49,7 @@ const componentMapping = {
     'list-sort-control': listSortControl,
     'tri-layout': triLayout,
     'breadcrumb-listing': breadcrumbListing,
+    'permissions-table': permissionsTable,
 };
 
 window.components = {};

resources/assets/js/components/permissions-table.js

@@ -0,0 +1,39 @@
+
+class PermissionsTable {
+
+    constructor(elem) {
+        this.container = elem;
+
+        // Handle toggle all event
+        const toggleAll = elem.querySelector('[permissions-table-toggle-all]');
+        toggleAll.addEventListener('click', this.toggleAllClick.bind(this));
+
+        // Handle toggle row event
+        const toggleRowElems = elem.querySelectorAll('[permissions-table-toggle-all-in-row]');
+        for (let toggleRowElem of toggleRowElems) {
+            toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
+        }
+    }
+
+    toggleAllClick(event) {
+        event.preventDefault();
+        this.toggleAllInElement(this.container);
+    }
+
+    toggleRowClick(event) {
+        event.preventDefault();
+        this.toggleAllInElement(event.target.closest('tr'));
+    }
+
+    toggleAllInElement(domElem) {
+        const inputsToSelect = domElem.querySelectorAll('input[type=checkbox]');
+        const currentState = inputsToSelect.length > 0 ? inputsToSelect[0].checked : false;
+        for (let checkbox of inputsToSelect) {
+            checkbox.checked = !currentState;
+            checkbox.dispatchEvent(new Event('change'));
+        }
+    }
+
+}
+
+export default PermissionsTable;