2019-04-13 07:07:27 -04:00
|
|
|
|
|
|
|
class PermissionsTable {
|
|
|
|
|
2022-10-02 08:57:32 -04:00
|
|
|
setup() {
|
|
|
|
this.container = this.$el;
|
2019-04-13 07:07:27 -04:00
|
|
|
|
|
|
|
// Handle toggle all event
|
2022-10-02 08:57:32 -04:00
|
|
|
for (const toggleAllElem of (this.$manyRefs.toggleAll || [])) {
|
|
|
|
toggleAllElem.addEventListener('click', this.toggleAllClick.bind(this));
|
|
|
|
}
|
2019-04-13 07:07:27 -04:00
|
|
|
|
|
|
|
// Handle toggle row event
|
2022-10-02 08:57:32 -04:00
|
|
|
for (const toggleRowElem of (this.$manyRefs.toggleRow || [])) {
|
2019-04-13 07:07:27 -04:00
|
|
|
toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
|
|
|
|
}
|
2019-04-13 08:16:18 -04:00
|
|
|
|
|
|
|
// Handle toggle column event
|
2022-10-02 08:57:32 -04:00
|
|
|
for (const toggleColElem of (this.$manyRefs.toggleColumn || [])) {
|
2019-04-13 08:16:18 -04:00
|
|
|
toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
|
|
|
|
}
|
2019-04-13 07:07:27 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
toggleAllClick(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.toggleAllInElement(this.container);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleRowClick(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.toggleAllInElement(event.target.closest('tr'));
|
|
|
|
}
|
|
|
|
|
2019-04-13 08:16:18 -04:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2019-04-13 07:07:27 -04:00
|
|
|
toggleAllInElement(domElem) {
|
2019-04-13 08:16:18 -04:00
|
|
|
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) {
|
2019-04-13 07:07:27 -04:00
|
|
|
checkbox.checked = !currentState;
|
|
|
|
checkbox.dispatchEvent(new Event('change'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PermissionsTable;
|