mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Added select-all helpers to permission tables
This commit is contained in:
parent
36481bb73f
commit
07adfb2ff1
@ -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 = {};
|
||||
|
39
resources/assets/js/components/permissions-table.js
Normal file
39
resources/assets/js/components/permissions-table.js
Normal 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;
|
@ -647,3 +647,10 @@ 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;
|
||||
}
|
@ -11,6 +11,7 @@ return [
|
||||
'save' => 'Save',
|
||||
'continue' => 'Continue',
|
||||
'select' => 'Select',
|
||||
'toggle_all' => 'Toggle All',
|
||||
'more' => 'More',
|
||||
|
||||
// Form Labels
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user