Updated role permission table to responsive format

This commit is contained in:
Dan Brown
2022-11-03 13:28:07 +00:00
parent 7101ec09ed
commit 8ec6b07690
4 changed files with 84 additions and 168 deletions

View File

@ -3,6 +3,8 @@ class PermissionsTable {
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 || [])) {
@ -27,15 +29,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) {