BookStack/resources/js/components/permissions-table.js
2022-11-15 12:44:57 +00:00

66 lines
2.2 KiB
JavaScript

import {Component} from "./component";
export class PermissionsTable extends Component {
setup() {
this.container = this.$el;
this.cellSelector = this.$opts.cellSelector || 'td,th';
this.rowSelector = this.$opts.rowSelector || 'tr';
// Handle toggle all event
for (const toggleAllElem of (this.$manyRefs.toggleAll || [])) {
toggleAllElem.addEventListener('click', this.toggleAllClick.bind(this));
}
// Handle toggle row event
for (const toggleRowElem of (this.$manyRefs.toggleRow || [])) {
toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
}
// Handle toggle column event
for (const toggleColElem of (this.$manyRefs.toggleColumn || [])) {
toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
}
}
toggleAllClick(event) {
event.preventDefault();
this.toggleAllInElement(this.container);
}
toggleRowClick(event) {
event.preventDefault();
this.toggleAllInElement(event.target.closest(this.rowSelector));
}
toggleColumnClick(event) {
event.preventDefault();
const tableCell = event.target.closest(this.cellSelector);
const colIndex = Array.from(tableCell.parentElement.children).indexOf(tableCell);
const tableRows = this.container.querySelectorAll(this.rowSelector);
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 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'));
}
}
}