feat(roles/users): add-user form on role view + per-user direct permissions form
1. Role view (Details tab): a small form to add users to the role (select of users not yet in the role + Add) and a per-row remove button. Uses assignRole/removeRole. 2. User view (Permissions tab): the same grouped, collapsible permissions form with switches — operating on the user's DIRECT permissions (givePermissionTo/revokePermissionTo). Permissions inherited from a role show as checked+disabled with a 'from role' tag; per-group All/None too. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +0,0 @@
|
||||
<div>
|
||||
{{-- Nothing in the world is as soft and yielding as water. --}}
|
||||
</div>
|
||||
@@ -100,13 +100,13 @@
|
||||
<div class="w-full lg:w-1/3 transition-all duration-300" :class="{'lg:w-full': formFullscreen}">
|
||||
<div class="card bg-base-100 shadow-xl h-full flex flex-col">
|
||||
<div class="card-body overflow-y-auto flex-1">
|
||||
<div class="flex justify-between items-center gap-2 mb-4">
|
||||
<div class="flex justify-between items-center gap-4 mb-4">
|
||||
<!-- Tabs -->
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button wire:click="setActiveTab('edit')" class="btn btn-sm {{ $activeTab === 'edit' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Edit') }}</button>
|
||||
<button wire:click="setActiveTab('features')" class="btn btn-sm {{ $activeTab === 'features' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Features') }}</button>
|
||||
<button wire:click="setActiveTab('inspections')" class="btn btn-sm {{ $activeTab === 'inspections' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Inspections') }}</button>
|
||||
<button wire:click="setActiveTab('issues')" class="btn btn-sm gap-1 {{ $activeTab === 'issues' ? 'btn-primary' : 'btn-ghost' }}">
|
||||
<button role="tab" wire:click="setActiveTab('edit')" class="btn btn-sm {{ $activeTab === 'edit' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Edit') }}</button>
|
||||
<button role="tab" wire:click="setActiveTab('features')" class="btn btn-sm {{ $activeTab === 'features' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Features') }}</button>
|
||||
<button role="tab" wire:click="setActiveTab('inspections')" class="btn btn-sm {{ $activeTab === 'inspections' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Inspections') }}</button>
|
||||
<button role="tab" wire:click="setActiveTab('issues')" class="btn btn-sm gap-1 {{ $activeTab === 'issues' ? 'btn-primary' : 'btn-ghost' }}">
|
||||
{{ __('Issues') }}
|
||||
@if($openIssuesCount > 0)
|
||||
<span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="py-8 max-w-6xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-800">{{ __('Permission management') }}</h2>
|
||||
@@ -68,7 +68,7 @@
|
||||
@foreach($roles as $role)
|
||||
<td class="text-center" wire:key="cell-{{ $perm->id }}-{{ $role->id }}">
|
||||
<input type="checkbox"
|
||||
class="checkbox checkbox-sm checkbox-primary"
|
||||
class="toggle toggle-sm toggle-primary"
|
||||
@checked($role->permissions->contains('id', $perm->id))
|
||||
wire:click="togglePermission({{ $role->id }}, '{{ $perm->name }}')" />
|
||||
</td>
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<div class="py-8 max-w-4xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
|
||||
{{-- Cabecera: nombre del rol + botón Volver --}}
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<x-heroicon-o-shield-check class="w-6 h-6 text-primary" />
|
||||
{{ $role->name }}
|
||||
@if($isProtected)
|
||||
<span class="badge badge-ghost badge-sm">{{ __('protected') }}</span>
|
||||
@endif
|
||||
</h2>
|
||||
<a href="{{ route('admin.roles') }}" class="btn btn-ghost btn-sm gap-1" wire:navigate>
|
||||
<x-heroicon-o-arrow-left class="w-4 h-4" /> {{ __('Back') }}
|
||||
</a>
|
||||
</div>
|
||||
<x-slot name="header">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<x-heroicon-o-shield-check class="w-6 h-6 text-primary" />
|
||||
{{ $role->name }}
|
||||
@if($isProtected)
|
||||
<span class="badge badge-ghost badge-sm">{{ __('protected') }}</span>
|
||||
@endif
|
||||
</h2>
|
||||
<a href="{{ route('admin.roles') }}" class="btn btn-ghost btn-sm gap-1" wire:navigate>
|
||||
<x-heroicon-o-arrow-left class="w-4 h-4" /> {{ __('Back') }}
|
||||
</a>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
{{-- Tabs --}}
|
||||
<div class="flex flex-wrap gap-1 mb-4">
|
||||
@@ -49,9 +51,24 @@
|
||||
|
||||
{{-- Usuarios con este rol --}}
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div class="px-6 py-3 border-b border-base-200">
|
||||
<div class="px-6 py-3 border-b border-base-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<h3 class="font-semibold text-gray-700">{{ __('Users with this role') }} ({{ $users->count() }})</h3>
|
||||
{{-- Formulario para añadir un usuario al rol --}}
|
||||
<form wire:submit.prevent="addUser" class="flex items-center gap-2">
|
||||
<select wire:model="newUserId" class="select select-bordered select-sm w-56 @error('newUserId') select-error @enderror">
|
||||
<option value="">{{ __('Select a user...') }}</option>
|
||||
@foreach($availableUsers as $au)
|
||||
<option value="{{ $au->id }}">
|
||||
{{ trim(($au->first_name ?? '').' '.($au->last_name ?? '')) ?: $au->name }} — {{ $au->email }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<button class="btn btn-sm btn-primary gap-1">
|
||||
<x-heroicon-o-plus class="w-4 h-4" /> {{ __('Add') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@error('newUserId') <p class="text-error text-xs px-6 pt-2">{{ $message }}</p> @enderror
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
@@ -59,6 +76,7 @@
|
||||
<th>{{ __('Name') }}</th>
|
||||
<th>{{ __('Last name') }}</th>
|
||||
<th>{{ __('Status') }}</th>
|
||||
<th class="w-12"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -89,9 +107,16 @@
|
||||
@endphp
|
||||
<span class="badge badge-sm {{ $cls }}">{{ $label }}</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<button wire:click="removeUser({{ $u->id }})"
|
||||
wire:confirm="{{ __('Remove this user from the role?') }}"
|
||||
class="btn btn-ghost btn-xs text-error" title="{{ __('Remove') }}">
|
||||
<x-heroicon-o-x-mark class="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="3" class="text-center text-gray-400 py-8">{{ __('No users with this role') }}</td></tr>
|
||||
<tr><td colspan="4" class="text-center text-gray-400 py-8">{{ __('No users with this role') }}</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -134,7 +159,7 @@
|
||||
@endif
|
||||
</div>
|
||||
<input type="checkbox"
|
||||
class="toggle toggle-primary toggle-sm shrink-0"
|
||||
class="toggle toggle-sm toggle-primary"
|
||||
wire:key="perm-{{ $role->id }}-{{ $perm->id }}"
|
||||
@checked(in_array($perm->name, $rolePerms, true))
|
||||
wire:click="togglePermission('{{ $perm->name }}')" />
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="py-6">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-4">
|
||||
|
||||
<div role="tablist" class="tabs tabs-bordered">
|
||||
<div role="tablist" class="tabs tabs-bordered gap-4">
|
||||
<button role="tab" wire:click="setTab('permissions')"
|
||||
class="tab gap-2 {{ $activeTab === 'permissions' ? 'tab-active font-semibold' : '' }}">
|
||||
<x-heroicon-o-shield-check class="w-4 h-4" />
|
||||
@@ -270,6 +270,68 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Permisos directos del usuario --}}
|
||||
<div class="card bg-base-100 shadow md:col-span-2">
|
||||
<div class="card-body p-6">
|
||||
<h3 class="font-semibold text-base flex items-center gap-2 mb-1">
|
||||
<x-heroicon-o-key class="w-5 h-5 text-primary" />
|
||||
Permisos
|
||||
</h3>
|
||||
<p class="text-xs text-gray-400 mb-4">
|
||||
Los permisos heredados de un rol aparecen marcados y bloqueados. Aquí puedes conceder permisos extra directamente a este usuario.
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
@forelse($grouped as $section => $perms)
|
||||
<div x-data="{ open: true }" class="border border-base-200 rounded-lg overflow-hidden">
|
||||
<div class="flex items-center justify-between px-4 py-2.5 bg-base-200/60">
|
||||
<button type="button" @click="open = !open" class="flex items-center gap-2 flex-1 text-left">
|
||||
<span class="transition-transform duration-200" :class="open ? 'rotate-90' : ''">
|
||||
<x-heroicon-o-chevron-right class="w-4 h-4 text-gray-500" />
|
||||
</span>
|
||||
<span class="font-semibold text-gray-700">{{ $section }}</span>
|
||||
<span class="badge badge-ghost badge-sm">{{ $perms->count() }}</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button wire:click="setUserGroup('{{ $section }}', true)" class="btn btn-xs btn-ghost gap-1" title="{{ __('Check all') }}">
|
||||
<x-heroicon-o-check class="w-3.5 h-3.5" /> {{ __('All') }}
|
||||
</button>
|
||||
<button wire:click="setUserGroup('{{ $section }}', false)" class="btn btn-xs btn-ghost gap-1" title="{{ __('Uncheck all') }}">
|
||||
<x-heroicon-o-x-mark class="w-3.5 h-3.5" /> {{ __('None') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="open" x-transition.opacity class="divide-y divide-base-200">
|
||||
@foreach($perms as $perm)
|
||||
@php
|
||||
$viaRole = in_array($perm->name, $rolePerms, true);
|
||||
$direct = in_array($perm->name, $directPerms, true);
|
||||
@endphp
|
||||
<label class="flex items-center justify-between gap-3 px-4 py-2.5 {{ $viaRole ? 'opacity-70' : 'cursor-pointer hover:bg-base-100' }}">
|
||||
<div class="min-w-0">
|
||||
<span class="text-sm font-medium">{{ $perm->name }}</span>
|
||||
@if($viaRole)<span class="badge badge-ghost badge-xs ml-1">{{ __('from role') }}</span>@endif
|
||||
@if($perm->description)
|
||||
<p class="text-xs text-gray-400 leading-tight">{{ $perm->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<input type="checkbox"
|
||||
class="toggle toggle-primary toggle-sm shrink-0"
|
||||
wire:key="uperm-{{ $user->id }}-{{ $perm->id }}"
|
||||
@checked($viaRole || $direct)
|
||||
@disabled($viaRole)
|
||||
@if(! $viaRole) wire:click="togglePermission('{{ $perm->name }}')" @endif />
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm text-gray-400">{{ __('No permissions') }}</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -496,7 +558,7 @@
|
||||
TAB: NOTAS
|
||||
════════════════════════════════════════════════════════════════════ --}}
|
||||
@if($activeTab === 'notes')
|
||||
<div class="card bg-base-100 shadow max-w-2xl">
|
||||
<div class="card bg-base-100 shadow max-w-7xl">
|
||||
<div class="card-body p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-semibold text-base flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user