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>
2026-06-17 18:51:59 +02:00
parent 7f20399337
commit 0120c4bfb8
7 changed files with 188 additions and 33 deletions
@@ -6,6 +6,7 @@ use Livewire\Component;
 use Livewire\Attributes\Layout;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Str;
+use App\Models\User;
 use Spatie\Permission\Models\Role;
 use Spatie\Permission\Models\Permission;
 use Spatie\Permission\PermissionRegistrar;
@@ -15,6 +16,7 @@ class RoleView extends Component
 {
    public Role $role;
    public string $tab = 'ficha';   // ficha | permisos
+    public $newUserId = '';

    private const PROTECTED_ROLES = ['Admin'];
    private const CORE_PERMISSION = 'manage all';
@@ -51,6 +53,23 @@ class RoleView extends Component
        $this->dispatch('notify', 'Permisos actualizados');
    }

+    public function addUser(): void
+    {
+        $this->validate(['newUserId' => 'required|exists:users,id'], [], ['newUserId' => 'usuario']);
+
+        User::findOrFail($this->newUserId)->assignRole($this->role->name);
+        $this->newUserId = '';
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->dispatch('notify', 'Usuario añadido al rol');
+    }
+
+    public function removeUser(int $userId): void
+    {
+        User::findOrFail($userId)->removeRole($this->role->name);
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->dispatch('notify', 'Usuario quitado del rol');
+    }
+
    public function setGroup(string $group, bool $enabled): void
    {
        $names = Permission::where('group', $group)->pluck('name');
@@ -110,11 +129,15 @@ class RoleView extends Component
                return $i === false ? 999 : $i;
            });

+        $availableUsers = User::whereDoesntHave('roles', fn ($q) => $q->where('roles.id', $this->role->id))
+            ->orderBy('first_name')->orderBy('name')->get();
+
        return view('livewire.roles.role-view', [
-            'users'     => $users,
-            'grouped'   => $grouped,
-            'rolePerms' => $this->role->permissions->pluck('name')->toArray(),
-            'isProtected' => in_array($this->role->name, self::PROTECTED_ROLES, true),
+            'users'          => $users,
+            'availableUsers' => $availableUsers,
+            'grouped'        => $grouped,
+            'rolePerms'      => $this->role->permissions->pluck('name')->toArray(),
+            'isProtected'    => in_array($this->role->name, self::PROTECTED_ROLES, true),
        ]);
    }
 }
@@ -9,6 +9,8 @@ use App\Models\Project;
 use App\Models\Inspection;
 use App\Models\Issue;
 use Illuminate\Support\Facades\Auth;
+use Spatie\Permission\Models\Permission;
+use Spatie\Permission\PermissionRegistrar;

 #[Layout('layouts.app')]
 class UserView extends Component
@@ -93,6 +95,36 @@ class UserView extends Component
        $this->dispatch('notify', 'Proyecto desasignado.');
    }

+    // ── Permissions (direct, per user) ─────────────────────────────────────────
+
+    public function togglePermission(string $name): void
+    {
+        if ($this->user->hasDirectPermission($name)) {
+            $this->user->revokePermissionTo($name);
+        } else {
+            $this->user->givePermissionTo($name);
+        }
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->user->load('roles', 'permissions');
+        $this->dispatch('notify', 'Permisos del usuario actualizados');
+    }
+
+    public function setUserGroup(string $group, bool $enabled): void
+    {
+        foreach (Permission::where('group', $group)->pluck('name') as $name) {
+            if ($enabled) {
+                if (! $this->user->hasPermissionTo($name)) {
+                    $this->user->givePermissionTo($name);
+                }
+            } elseif ($this->user->hasDirectPermission($name)) {
+                $this->user->revokePermissionTo($name);
+            }
+        }
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->user->load('roles', 'permissions');
+        $this->dispatch('notify', $enabled ? 'Permisos del grupo concedidos' : 'Permisos directos del grupo quitados');
+    }
+
    // ── Notes ─────────────────────────────────────────────────────────────────

    public function saveNotes(): void
@@ -105,6 +137,22 @@ class UserView extends Component

    public function render()
    {
-        return view('livewire.user-view');
+        $order = [
+            'Proyectos', 'Fases y progreso', 'Capas y elementos', 'Inspecciones',
+            'Incidencias', 'Empresas', 'Usuarios', 'Roles', 'Informes', 'Archivos', 'General',
+        ];
+
+        $grouped = Permission::orderBy('name')->get()
+            ->groupBy(fn ($perm) => $perm->group ?: 'General')
+            ->sortBy(function ($perms, $section) use ($order) {
+                $i = array_search($section, $order, true);
+                return $i === false ? 999 : $i;
+            });
+
+        return view('livewire.user-view', [
+            'grouped'     => $grouped,
+            'directPerms' => $this->user->getDirectPermissions()->pluck('name')->toArray(),
+            'rolePerms'   => $this->user->getPermissionsViaRoles()->pluck('name')->toArray(),
+        ]);
    }
 }
@@ -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">