Added select-all helpers to permission tables

This commit is contained in:
Dan Brown 2019-04-13 12:07:27 +01:00
parent 36481bb73f
commit 07adfb2ff1
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
6 changed files with 92 additions and 17 deletions

View file

@ -22,6 +22,7 @@ import headerMobileToggle from "./header-mobile-toggle";
import listSortControl from "./list-sort-control";
import triLayout from "./tri-layout";
import breadcrumbListing from "./breadcrumb-listing";
import permissionsTable from "./permissions-table";
const componentMapping = {
'dropdown': dropdown,
@ -48,6 +49,7 @@ const componentMapping = {
'list-sort-control': listSortControl,
'tri-layout': triLayout,
'breadcrumb-listing': breadcrumbListing,
'permissions-table': permissionsTable,
};
window.components = {};

View file

@ -0,0 +1,39 @@
class PermissionsTable {
constructor(elem) {
this.container = elem;
// Handle toggle all event
const toggleAll = elem.querySelector('[permissions-table-toggle-all]');
toggleAll.addEventListener('click', this.toggleAllClick.bind(this));
// Handle toggle row event
const toggleRowElems = elem.querySelectorAll('[permissions-table-toggle-all-in-row]');
for (let toggleRowElem of toggleRowElems) {
toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
}
}
toggleAllClick(event) {
event.preventDefault();
this.toggleAllInElement(this.container);
}
toggleRowClick(event) {
event.preventDefault();
this.toggleAllInElement(event.target.closest('tr'));
}
toggleAllInElement(domElem) {
const inputsToSelect = domElem.querySelectorAll('input[type=checkbox]');
const currentState = inputsToSelect.length > 0 ? inputsToSelect[0].checked : false;
for (let checkbox of inputsToSelect) {
checkbox.checked = !currentState;
checkbox.dispatchEvent(new Event('change'));
}
}
}
export default PermissionsTable;

View file

@ -646,4 +646,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
#tag-manager .drag-card {
max-width: 500px;
}
.permissions-table [permissions-table-toggle-all-in-row] {
display: none;
}
.permissions-table tr:hover [permissions-table-toggle-all-in-row] {
display: inline;
}

View file

@ -11,6 +11,7 @@ return [
'save' => 'Save',
'continue' => 'Continue',
'select' => 'Select',
'toggle_all' => 'Toggle All',
'more' => 'More',
// Form Labels

View file

@ -11,16 +11,20 @@
])
</div>
{{--TODO - Add global and role "Select All" options--}}
<table class="table toggle-switch-list">
<table permissions-table class="table permissions-table toggle-switch-list">
<tr>
<th>{{ trans('common.role') }}</th>
<th @if($model->isA('page')) colspan="3" @else colspan="4" @endif>{{ trans('common.actions') }}</th>
<th @if($model->isA('page')) colspan="3" @else colspan="4" @endif>
{{ trans('common.actions') }}
<a href="#" permissions-table-toggle-all class="text-small ml-m text-primary">{{ trans('common.toggle_all') }}</a>
</th>
</tr>
@foreach($roles as $role)
<tr>
<td>{{ $role->display_name }}</td>
<td width="33%" class="pt-m">
{{ $role->display_name }}
<a href="#" permissions-table-toggle-all-in-row class="text-small float right ml-m text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])</td>
@if(!$model->isA('page'))
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])</td>

View file

@ -1,7 +1,5 @@
{!! csrf_field() !!}
{{--TODO - Add select-all shortcuts--}}
<div class="card content-wrap">
<h1 class="list-heading">{{ $title }}</h1>
@ -30,9 +28,10 @@
</div>
</div>
<div class="grid half">
<div class="grid half" permissions-table>
<div>
<label class="setting-list-label">{{ trans('settings.role_system') }}</label>
<a href="#" permissions-table-toggle-all class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</div>
<div class="toggle-switch-list">
<div>@include('settings.roles.checkbox', ['permission' => 'users-manage', 'label' => trans('settings.role_manage_users')])</div>
@ -51,16 +50,21 @@
<p class="text-warn">{{ trans('settings.role_asset_admins') }}</p>
@endif
<table class="table toggle-switch-list compact">
<table permissions-table class="table toggle-switch-list compact permissions-table">
<tr>
<th width="20%"></th>
<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>
</tr>
<tr>
<td>{{ trans('entities.shelves_long') }}</td>
<td>
<div>{{ trans('entities.shelves_long') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>
@include('settings.roles.checkbox', ['permission' => 'bookshelf-create-all', 'label' => trans('settings.role_all')])
</td>
@ -81,7 +85,10 @@
</td>
</tr>
<tr>
<td>{{ trans('entities.books') }}</td>
<td>
<div>{{ trans('entities.books') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>
@include('settings.roles.checkbox', ['permission' => 'book-create-all', 'label' => trans('settings.role_all')])
</td>
@ -102,7 +109,10 @@
</td>
</tr>
<tr>
<td>{{ trans('entities.chapters') }}</td>
<td>
<div>{{ trans('entities.chapters') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>
@include('settings.roles.checkbox', ['permission' => 'chapter-create-own', 'label' => trans('settings.role_own')])
<br>
@ -125,7 +135,10 @@
</td>
</tr>
<tr>
<td>{{ trans('entities.pages') }}</td>
<td>
<div>{{ trans('entities.pages') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>
@include('settings.roles.checkbox', ['permission' => 'page-create-own', 'label' => trans('settings.role_own')])
<br>
@ -148,7 +161,10 @@
</td>
</tr>
<tr>
<td>{{ trans('entities.images') }}</td>
<td>
<div>{{ trans('entities.images') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>@include('settings.roles.checkbox', ['permission' => 'image-create-all', 'label' => ''])</td>
<td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
<td>
@ -163,7 +179,10 @@
</td>
</tr>
<tr>
<td>{{ trans('entities.attachments') }}</td>
<td>
<div>{{ trans('entities.attachments') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>@include('settings.roles.checkbox', ['permission' => 'attachment-create-all', 'label' => ''])</td>
<td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
<td>
@ -178,7 +197,10 @@
</td>
</tr>
<tr>
<td>{{ trans('entities.comments') }}</td>
<td>
<div>{{ trans('entities.comments') }}</div>
<a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>@include('settings.roles.checkbox', ['permission' => 'comment-create-all', 'label' => ''])</td>
<td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
<td>