Level 75
In the 6 series @jeffreyway uses a pivot table, maybe https://laracasts.com/series/laravel-6-from-scratch/episodes/54
But that code is on Github.
May 27, 2021
5
Level 2
Looking for suggestions for displaying role permissions
I have a basic livewire crud component for managing roles and permissions that are assigned to each role. My roles index table has 4 columns named "Role", "Guard", "Permissions", "Actions". When no permissions are assigned to the roles, the table doesn't look too bad. When permissions are assigned, each one is displayed as a rounded blue "badge". This bloats the row and causes the buttons in the action column to be shown one over the other. I'm looking for suggestions for improvement.
Here's a screenshot: https://pasteboard.co/K3R4OfX.png
My blade view:
<div>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Roles') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="inline-block mb-5">
<button wire:click.prevent="create" type="button" class="bg-indigo-500 hover:bg-indigo-600 text-white text-sm
py-2.5 px-5 rounded-md transition duration-500 ease-in-out transform hover:-translate-y-1 shadow-l">
Create New Role
</button>
</div>
<div class="inline-block min-w-full shadow overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-10 py-2 bg-black border-b-2 text-xs text-white uppercase tracking-wide">
Name
</th>
<th class="px-8 py-2 bg-black border-b-2 text-xs text-white uppercase tracking-wide">
Guard
</th>
<th class="py-2 bg-black border-b-2 text-xs text-white uppercase tracking-wide">
Permissions
</th>
<th class="px-16 py-2 bg-black border-b-2 text-xs text-white uppercase tracking-wide">
</th>
</tr>
</thead>
<tbody>
@forelse ($roles as $role)
<tr>
<td class="px-10 text-center text-xs bg-white">
{{ $role->name }}
</td>
<td class="px-8 text-center text-xs bg-white">
{{ ucwords($role->guard_name) }}
</td>
<td class="text-xs bg-white">
@forelse ($role->permissions as $permission)
<span class="inline-grid bg-blue-400 font-bold px-2 py-1 m-1 rounded-lg shadow-lg">{{ ucwords($permission->name) }}</span>
@empty
<span>No permissions assigned</span>
@endforelse
</td>
<td class="px-16">
<div class="flex flex-wrap content-start">
<button wire:click.prevent="edit({{ $role->id }})" type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 py-1 rounded">
<x-icons.editpad />
</button>
<button wire:click.prevent="delete({{ $role->id }})" onclick="confirm('Are you sure?') || event.stopImmediatePropagation()"
type="button" class="bg-red-500 hover:bg-red-700 text-white font-bold px-4 py-1 rounded">
<x-icons.trashcan />
</button>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="3">
No permissions found.
</td>
</tr>
@endforelse
</tbody>
</table>
{{ $roles->links() }}
</div>
</div>
</div>
Level 2
I'm using the Spatie Permissions package. I'm just looking for a more "eye-appealing" way to display the data.
Level 75
Fix it by using a flexgrid.
1 like
Level 1
For Super Admin user, no need to assign him all permissions, just roles, and then you set Gate::before in AuthServiceProvider boot() like this :
public function boot()
{
$this->registerPolicies();
Gate::before(function ($user, $ability) {
return $user->hasRole( 'Super Admin') ? true : null;
});
}
1 like
Level 2
Ah, ok. I have the Gate::before set already. Didn't know about not assigning all permissions.
Thanks for the tip!
Please or to participate in this conversation.