Updated another set of components

[bookstack] / resources / js / components / permissions-table.js

diff --git a/resources/js/components/permissions-table.js b/resources/js/components/permissions-table.js
index baad7525833c0040b96b51cf0e9fe5e8adf69f66..58ead1d57620b58a798ccdc0dfc3708121c8a1f9 100644 (file)
--- a/resources/js/components/permissions-table.js
+++ b/resources/js/components/permissions-table.js
@@ -1,22 +1,24 @@
+import {Component} from "./component";
 
-class PermissionsTable {
+export class PermissionsTable extends Component {
 
-    constructor(elem) {
-        this.container = elem;
+    setup() {
+        this.container = this.$el;
+        this.cellSelector = this.$opts.cellSelector || 'td,th';
+        this.rowSelector = this.$opts.rowSelector || 'tr';
 
         // Handle toggle all event
-        const toggleAll = elem.querySelector('[permissions-table-toggle-all]');
-        toggleAll.addEventListener('click', this.toggleAllClick.bind(this));
+        for (const toggleAllElem of (this.$manyRefs.toggleAll || [])) {
+            toggleAllElem.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) {
+        for (const toggleRowElem of (this.$manyRefs.toggleRow || [])) {
             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) {
+        for (const toggleColElem of (this.$manyRefs.toggleColumn || [])) {
             toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
         }
     }
@@ -28,15 +30,15 @@ class PermissionsTable {
 
     toggleRowClick(event) {
         event.preventDefault();
-        this.toggleAllInElement(event.target.closest('tr'));
+        this.toggleAllInElement(event.target.closest(this.rowSelector));
     }
 
     toggleColumnClick(event) {
         event.preventDefault();
 
-        const tableCell = event.target.closest('th,td');
+        const tableCell = event.target.closest(this.cellSelector);
         const colIndex = Array.from(tableCell.parentElement.children).indexOf(tableCell);
-        const tableRows = tableCell.closest('table').querySelectorAll('tr');
+        const tableRows = this.container.querySelectorAll(this.rowSelector);
         const inputsToToggle = [];
 
         for (let row of tableRows) {
@@ -61,6 +63,4 @@ class PermissionsTable {
         }
     }
 
-}
-
-export default PermissionsTable;
\ No newline at end of file
+}
\ No newline at end of file