Added interface for adding/removing roles in entity perms.

app/Auth/Permissions/PermissionFormData.php

@@ -15,16 +15,15 @@ class PermissionFormData
     }
 
     /**
-     * Get the roles with permissions assigned.
+     * Get the permissions with assigned roles.
      */
-    public function rolesWithPermissions(): array
+    public function permissionsWithRoles(): array
     {
         return $this->entity->permissions()
             ->with('role')
             ->where('role_id', '!=', 0)
-            ->get(['id', 'role_id'])
+            ->get()
-            ->pluck('role')
+            ->sortBy('role.display_name')
-            ->sortBy('display_name')
             ->all();
     }
 

app/Http/Controllers/PermissionsController.php

@@ -2,7 +2,9 @@
 
 namespace BookStack\Http\Controllers;
 
+use BookStack\Auth\Permissions\EntityPermission;
 use BookStack\Auth\Permissions\PermissionFormData;
+use BookStack\Auth\Role;
 use BookStack\Entities\Models\Book;
 use BookStack\Entities\Models\Bookshelf;
 use BookStack\Entities\Models\Chapter;
@@ -148,4 +150,20 @@ class PermissionsController extends Controller
 
         return redirect($shelf->getUrl());
     }
+
+    /**
+     * Get an empty entity permissions form row for the given role.
+     */
+    public function formRowForRole(string $entityType, string $roleId)
+    {
+        $this->checkPermissionOr('restrictions-manage', fn() => userCan('restrictions-manage-all'));
+
+        $role = Role::query()->findOrFail($roleId);
+
+        return view('form.entity-permissions-row', [
+            'role' => $role,
+            'permission' => new EntityPermission(),
+            'entityType' => $entityType,
+        ]);
+    }
 }

resources/js/components/entity-permissions.js

@@ -1,14 +1,21 @@
-
+/**
-
+ * @extends {Component}
+ */
 class EntityPermissions {
 
     setup() {
+        this.container = this.$el;
+        this.entityType = this.$opts.entityType;
+
         this.everyoneInheritToggle = this.$refs.everyoneInherit;
+        this.roleSelect = this.$refs.roleSelect;
+        this.roleContainer = this.$refs.roleContainer;
 
         this.setupListeners();
     }
 
     setupListeners() {
+        // "Everyone Else" inherit toggle
         this.everyoneInheritToggle.addEventListener('change', event => {
             const inherit = event.target.checked;
             const permissions = document.querySelectorAll('input[type="checkbox"][name^="restrictions[0]["]');
@@ -16,7 +23,56 @@ class EntityPermissions {
                 permission.disabled = inherit;
                 permission.checked = false;
             }
-        })
+        });
+
+        // Remove role row button click
+        this.container.addEventListener('click', event => {
+            const button = event.target.closest('button');
+            if (button && button.dataset.roleId) {
+                this.removeRowOnButtonClick(button)
+            }
+        });
+
+        // Role select change
+        this.roleSelect.addEventListener('change', event => {
+            const roleId = this.roleSelect.value;
+            if (roleId) {
+                this.addRoleRow(roleId);
+            }
+        });
+    }
+
+    async addRoleRow(roleId) {
+        this.roleSelect.disabled = true;
+
+        // Remove option from select
+        const option = this.roleSelect.querySelector(`option[value="${roleId}"]`);
+        if (option) {
+            option.remove();
+        }
+
+        // Get and insert new row
+        const resp = await window.$http.get(`/permissions/form-row/${this.entityType}/${roleId}`);
+        const wrap = document.createElement('div');
+        wrap.innerHTML = resp.data;
+        const row = wrap.children[0];
+        this.roleContainer.append(row);
+        window.components.init(row);
+
+        this.roleSelect.disabled = false;
+    }
+
+    removeRowOnButtonClick(button) {
+        const row = button.closest('.content-permissions-row');
+        const roleId = button.dataset.roleId;
+        const roleName = button.dataset.roleName;
+
+        const option = document.createElement('option');
+        option.value = roleId;
+        option.textContent = roleName;
+
+        this.roleSelect.append(option);
+        row.remove();
     }
 
 }

resources/sass/_buttons.scss

@@ -109,12 +109,23 @@ button {
   display: block;
 }
 
-.button.icon {
+.button.icon, .icon-button {
   .svg-icon {
     margin-inline-end: 0;
   }
 }
 
+.icon-button {
+  text-align: center;
+  border: 1px solid transparent;
+}
+.icon-button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  border-color: #DDD;
+  cursor: pointer;
+}
+
 .button.svg {
   display: flex;
   align-items: center;

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

@@ -1,3 +1,9 @@
+{{--
+$role - The Role to display this row for.
+$entityType - String identifier for type of entity having permissions applied.
+$permission - The entity permission containing the permissions.
+--}}
+
 <div component="permissions-table" class="content-permissions-row flex-container-row justify-space-between wrap">
     <div class="gap-x-m flex-container-row items-center px-l py-m flex">
         <div class="text-large" title="{{ $role->id === 0 ? 'Everyone Else' : trans('common.role') }}">
@@ -15,7 +21,8 @@
         @endif
     </div>
     @php
-        $inheriting = ($role->id === 0 && !$model->restricted);
+        // TODO
+        $inheriting = ($role->id === 0);
     @endphp
     @if($role->id === 0)
         <div class="px-l flex-container-row items-center" refs="entity-permissions@everyoneInherit">
@@ -30,18 +37,53 @@
     <div class="flex-container-row justify-space-between gap-x-xl wrap items-center">
         <input type="hidden" name="permissions[{{ $role->id }}][active]" value="true">
         <div class="px-l">
-            @include('form.restriction-checkbox', ['name'=>'permissions', 'label' => trans('common.view'), 'action' => 'view', 'disabled' => $inheriting])
+            @include('form.custom-checkbox', [
+                'name' =>  'permissions[' . $role->id . '][view]',
+                'label' => trans('common.view'),
+                'value' => 'true',
+                'checked' => $permission->view,
+                'disabled' => $inheriting
+            ])
         </div>
+        @if($entityType !== 'page')
             <div class="px-l">
-            @if(!$model instanceof \BookStack\Entities\Models\Page)
+                @include('form.custom-checkbox', [
-                @include('form.restriction-checkbox', ['name'=>'permissions', 'label' => trans('common.create'), 'action' => 'create', 'disabled' => $inheriting])
+                    'name' =>  'permissions[' . $role->id . '][create]',
+                    'label' => trans('common.create'),
+                    'value' => 'true',
+                    'checked' => $permission->create,
+                    'disabled' => $inheriting
+                ])
+            </div>
         @endif
+        <div class="px-l">
+            @include('form.custom-checkbox', [
+                'name' =>  'permissions[' . $role->id . '][update]',
+                'label' => trans('common.update'),
+                'value' => 'true',
+                'checked' => $permission->update,
+                'disabled' => $inheriting
+            ])
         </div>
         <div class="px-l">
-            @include('form.restriction-checkbox', ['name'=>'permissions', 'label' => trans('common.update'), 'action' => 'update', 'disabled' => $inheriting])
+            @include('form.custom-checkbox', [
-        </div>
+                'name' =>  'permissions[' . $role->id . '][delete]',
-        <div class="px-l">
+                'label' => trans('common.delete'),
-            @include('form.restriction-checkbox', ['name'=>'permissions', 'label' => trans('common.delete'), 'action' => 'delete', 'disabled' => $inheriting])
+                'value' => 'true',
+                'checked' => $permission->delete,
+                'disabled' => $inheriting
+            ])
         </div>
     </div>
+    @if($role->id !== 0)
+        <div class="flex-container-row items-center px-m py-s">
+            <button type="button"
+                    class="text-neg p-m icon-button"
+                    data-role-id="{{ $role->id }}"
+                    data-role-name="{{ $role->display_name }}"
+                    title="Remove Row">
+                @icon('close') <span class="hide-over-m ml-xs">Remove Row</span>
+            </button>
+        </div>
+    @endif
 </div>

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

@@ -1,4 +1,7 @@
-<form component="entity-permissions" action="{{ $model->getUrl('/permissions') }}" method="POST">
+<form component="entity-permissions"
+      option:entity-permissions:entity-type="{{ $model->getType() }}"
+      action="{{ $model->getUrl('/permissions') }}"
+      method="POST">
     {!! csrf_field() !!}
     <input type="hidden" name="_method" value="PUT">
 
@@ -18,14 +21,34 @@
         <p class="text-warn">{{ trans('entities.shelves_permissions_cascade_warning') }}</p>
     @endif
 
-    <div class="content-permissions mt-m mb-xl">
+    <div refs="entity-permissions@role-container" class="content-permissions mt-m mb-m">
-        @foreach($data->rolesWithPermissions() as $role)
+        @foreach($data->permissionsWithRoles() as $permission)
-            @include('form.entity-permissions-row', ['role' => $role, 'model' => $model])
+            @include('form.entity-permissions-row', [
+                'permission' => $permission,
+                'role' => $permission->role,
+                'entityType' => $model->getType()
+            ])
         @endforeach
     </div>
 
+    <div class="flex-container-row justify-flex-end mb-xl">
+        <div>
+            <label for="role_select">Override permissions for role</label>
+            <select name="role_select" id="role_select" refs="entity-permissions@role-select">
+                <option value="">{{ trans('common.select') }}</option>
+                @foreach($data->rolesNotAssigned() as $role)
+                    <option value="{{ $role->id }}">{{ $role->display_name }}</option>
+                @endforeach
+            </select>
+        </div>
+    </div>
+
     <div class="content-permissions mt-m mb-xl">
-        @include('form.entity-permissions-row', ['role' => $data->everyoneElseRole(), 'model' => $model])
+        @include('form.entity-permissions-row', [
+                'role' => $data->everyoneElseRole(),
+                'permission' => new \BookStack\Auth\Permissions\EntityPermission(),
+                'entityType' => $model->getType(),
+            ])
     </div>
 
     <div class="text-right">

routes/web.php

@@ -215,6 +215,9 @@ Route::middleware('auth')->group(function () {
     Route::get('/', [HomeController::class, 'index']);
     Route::get('/home', [HomeController::class, 'index']);
 
+    // Permissions
+    Route::get('/permissions/form-row/{entityType}/{roleId}', [PermissionsController::class, 'formRowForRole']);
+
     // Maintenance
     Route::get('/settings/maintenance', [MaintenanceController::class, 'index']);
     Route::delete('/settings/maintenance/cleanup-images', [MaintenanceController::class, 'cleanupImages']);