Added select-all helpers to permission tables

resources/assets/js/components/index.js

@@ -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 = {};

resources/assets/js/components/permissions-table.js

@@ -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;

resources/assets/sass/_components.scss

@@ -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;
+}

resources/lang/en/common.php

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

resources/views/form/entity-permissions.blade.php

@@ -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>

resources/views/settings/roles/form.blade.php

@@ -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>