colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
resources/assets/js/components/permissions-table.js
View File

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

8
resources/views/settings/roles/form.blade.php
View File

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