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 listSortControl from "./list-sort-control";
|
||||||
import triLayout from "./tri-layout";
|
import triLayout from "./tri-layout";
|
||||||
import breadcrumbListing from "./breadcrumb-listing";
|
import breadcrumbListing from "./breadcrumb-listing";
|
||||||
|
import permissionsTable from "./permissions-table";
|
||||||
|
|
||||||
const componentMapping = {
|
const componentMapping = {
|
||||||
'dropdown': dropdown,
|
'dropdown': dropdown,
|
||||||
@ -48,6 +49,7 @@ const componentMapping = {
|
|||||||
'list-sort-control': listSortControl,
|
'list-sort-control': listSortControl,
|
||||||
'tri-layout': triLayout,
|
'tri-layout': triLayout,
|
||||||
'breadcrumb-listing': breadcrumbListing,
|
'breadcrumb-listing': breadcrumbListing,
|
||||||
|
'permissions-table': permissionsTable,
|
||||||
};
|
};
|
||||||
|
|
||||||
window.components = {};
|
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;
|
@ -646,4 +646,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||||||
|
|
||||||
#tag-manager .drag-card {
|
#tag-manager .drag-card {
|
||||||
max-width: 500px;
|
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',
|
'save' => 'Save',
|
||||||
'continue' => 'Continue',
|
'continue' => 'Continue',
|
||||||
'select' => 'Select',
|
'select' => 'Select',
|
||||||
|
'toggle_all' => 'Toggle All',
|
||||||
'more' => 'More',
|
'more' => 'More',
|
||||||
|
|
||||||
// Form Labels
|
// Form Labels
|
||||||
|
@ -11,16 +11,20 @@
|
|||||||
])
|
])
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{--TODO - Add global and role "Select All" options--}}
|
<table permissions-table class="table permissions-table toggle-switch-list">
|
||||||
|
|
||||||
<table class="table toggle-switch-list">
|
|
||||||
<tr>
|
<tr>
|
||||||
<th>{{ trans('common.role') }}</th>
|
<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>
|
</tr>
|
||||||
@foreach($roles as $role)
|
@foreach($roles as $role)
|
||||||
<tr>
|
<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>
|
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])</td>
|
||||||
@if(!$model->isA('page'))
|
@if(!$model->isA('page'))
|
||||||
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])</td>
|
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])</td>
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
{!! csrf_field() !!}
|
{!! csrf_field() !!}
|
||||||
|
|
||||||
{{--TODO - Add select-all shortcuts--}}
|
|
||||||
|
|
||||||
<div class="card content-wrap">
|
<div class="card content-wrap">
|
||||||
<h1 class="list-heading">{{ $title }}</h1>
|
<h1 class="list-heading">{{ $title }}</h1>
|
||||||
|
|
||||||
@ -30,9 +28,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid half">
|
<div class="grid half" permissions-table>
|
||||||
<div>
|
<div>
|
||||||
<label class="setting-list-label">{{ trans('settings.role_system') }}</label>
|
<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>
|
||||||
<div class="toggle-switch-list">
|
<div class="toggle-switch-list">
|
||||||
<div>@include('settings.roles.checkbox', ['permission' => 'users-manage', 'label' => trans('settings.role_manage_users')])</div>
|
<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>
|
<p class="text-warn">{{ trans('settings.role_asset_admins') }}</p>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<table class="table toggle-switch-list compact">
|
<table permissions-table class="table toggle-switch-list compact permissions-table">
|
||||||
<tr>
|
<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.create') }}</th>
|
||||||
<th width="20%">{{ trans('common.view') }}</th>
|
<th width="20%">{{ trans('common.view') }}</th>
|
||||||
<th width="20%">{{ trans('common.edit') }}</th>
|
<th width="20%">{{ trans('common.edit') }}</th>
|
||||||
<th width="20%">{{ trans('common.delete') }}</th>
|
<th width="20%">{{ trans('common.delete') }}</th>
|
||||||
</tr>
|
</tr>
|
||||||
<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>
|
<td>
|
||||||
@include('settings.roles.checkbox', ['permission' => 'bookshelf-create-all', 'label' => trans('settings.role_all')])
|
@include('settings.roles.checkbox', ['permission' => 'bookshelf-create-all', 'label' => trans('settings.role_all')])
|
||||||
</td>
|
</td>
|
||||||
@ -81,7 +85,10 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>
|
<td>
|
||||||
@include('settings.roles.checkbox', ['permission' => 'book-create-all', 'label' => trans('settings.role_all')])
|
@include('settings.roles.checkbox', ['permission' => 'book-create-all', 'label' => trans('settings.role_all')])
|
||||||
</td>
|
</td>
|
||||||
@ -102,7 +109,10 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>
|
<td>
|
||||||
@include('settings.roles.checkbox', ['permission' => 'chapter-create-own', 'label' => trans('settings.role_own')])
|
@include('settings.roles.checkbox', ['permission' => 'chapter-create-own', 'label' => trans('settings.role_own')])
|
||||||
<br>
|
<br>
|
||||||
@ -125,7 +135,10 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>
|
<td>
|
||||||
@include('settings.roles.checkbox', ['permission' => 'page-create-own', 'label' => trans('settings.role_own')])
|
@include('settings.roles.checkbox', ['permission' => 'page-create-own', 'label' => trans('settings.role_own')])
|
||||||
<br>
|
<br>
|
||||||
@ -148,7 +161,10 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>@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 style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
|
||||||
<td>
|
<td>
|
||||||
@ -163,7 +179,10 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>@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 style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
|
||||||
<td>
|
<td>
|
||||||
@ -178,7 +197,10 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>@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 style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
|
||||||
<td>
|
<td>
|
||||||
|
Loading…
Reference in New Issue
Block a user