X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/6917ea088f905ec57e16d8795ad0bcb191c38b52..refs/pull/5429/head:/resources/js/components/permissions-table.js

diff --git a/resources/js/components/permissions-table.js b/resources/js/components/permissions-table.js
index baad75258..800403c61 100644
--- 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,18 +30,18 @@ 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) {
+        for (const row of tableRows) {
             const targetCell = row.children[colIndex];
             if (targetCell) {
                 inputsToToggle.push(...targetCell.querySelectorAll('input[type=checkbox]'));
@@ -55,12 +57,10 @@ class PermissionsTable {
 
     toggleAllInputs(inputsToToggle) {
         const currentState = inputsToToggle.length > 0 ? inputsToToggle[0].checked : false;
-        for (let checkbox of inputsToToggle) {
+        for (const checkbox of inputsToToggle) {
             checkbox.checked = !currentState;
             checkbox.dispatchEvent(new Event('change'));
         }
     }
 
 }
-
-export default PermissionsTable;
\ No newline at end of file