Added column select-all to role permission table

This commit is contained in:
Dan Brown 2019-04-13 13:16:18 +01:00
parent d3cc261320
commit f797d2da20
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
2 changed files with 34 additions and 7 deletions

View file

@ -13,6 +13,12 @@ class PermissionsTable {
for (let toggleRowElem of toggleRowElems) {
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) {
toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
}
}
toggleAllClick(event) {
@ -25,10 +31,31 @@ class PermissionsTable {
this.toggleAllInElement(event.target.closest('tr'));
}
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);
}
toggleAllInElement(domElem) {
const inputsToSelect = domElem.querySelectorAll('input[type=checkbox]');
const currentState = inputsToSelect.length > 0 ? inputsToSelect[0].checked : false;
for (let checkbox of inputsToSelect) {
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'));
}

View file

@ -55,10 +55,10 @@
<th width="20%">
<a href="#" permissions-table-toggle-all class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</th>
<th width="20%">{{ trans('common.create') }}</th>
<th width="20%">{{ trans('common.view') }}</th>
<th width="20%">{{ trans('common.edit') }}</th>
<th width="20%">{{ trans('common.delete') }}</th>
<th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.create') }}</th>
<th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.view') }}</th>
<th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.edit') }}</th>
<th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.delete') }}</th>
</tr>
<tr>
<td>