Added column select-all to role permission table
This commit is contained in:
parent
d3cc261320
commit
f797d2da20
2 changed files with 34 additions and 7 deletions
|
@ -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'));
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue