refactor(roles): role create/edit as a full page instead of a modal
Per feedback, 'New role' (and Edit) now open a dedicated page instead of a
modal:
- New RoleForm full-page component + view at /admin/roles/create and
/admin/roles/{role}/edit (name, description, permission checkboxes; saves
and redirects back to the list).
- RoleManager trimmed: the create/edit modal and its logic removed; 'New role'
and the per-row/view-modal Edit are now links to the new pages.
- Kept the read-only View modal, single + bulk delete, and protections.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,9 +10,9 @@
|
||||
<a href="{{ route('admin.permissions') }}" class="btn btn-outline btn-sm gap-1" wire:navigate>
|
||||
<x-heroicon-o-table-cells class="w-4 h-4" /> {{ __('Matrix view') }}
|
||||
</a>
|
||||
<button wire:click="openCreate" class="btn btn-primary btn-sm gap-1">
|
||||
<a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm gap-1" wire:navigate>
|
||||
<x-heroicon-o-plus class="w-4 h-4" /> {{ __('New role') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,9 +68,9 @@
|
||||
<button wire:click="openView({{ $role->id }})" class="btn btn-ghost btn-xs" title="{{ __('View') }}">
|
||||
<x-heroicon-o-eye class="w-4 h-4" />
|
||||
</button>
|
||||
<button wire:click="openEdit({{ $role->id }})" class="btn btn-ghost btn-xs text-info" title="{{ __('Edit') }}">
|
||||
<a href="{{ route('admin.roles.edit', $role->id) }}" class="btn btn-ghost btn-xs text-info" title="{{ __('Edit') }}" wire:navigate>
|
||||
<x-heroicon-o-pencil class="w-4 h-4" />
|
||||
</button>
|
||||
</a>
|
||||
@unless(in_array($role->name, ['Admin'], true))
|
||||
<button wire:click="delete({{ $role->id }})"
|
||||
wire:confirm="{{ __('Delete role') }} '{{ $role->name }}'?"
|
||||
@@ -88,62 +88,6 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- ════════════════ MODAL CREAR / EDITAR ════════════════ --}}
|
||||
@if($showForm)
|
||||
<div class="modal modal-open z-[1500]">
|
||||
<div class="modal-box max-w-xl">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-lg">{{ $editingRole ? __('Edit role') : __('New role') }}</h3>
|
||||
<button wire:click="closeForm" class="btn btn-sm btn-circle btn-ghost"><x-heroicon-o-x-mark class="w-5 h-5" /></button>
|
||||
</div>
|
||||
|
||||
<form wire:submit.prevent="save" class="space-y-4">
|
||||
{{-- Nombre --}}
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">{{ __('Name') }} <span class="text-error">*</span></span></label>
|
||||
<input type="text" wire:model="name"
|
||||
class="input input-bordered w-full @error('name') input-error @enderror"
|
||||
placeholder="{{ __('e.g. Site Supervisor') }}"
|
||||
@if($editingRole && in_array($name, ['Admin'], true)) readonly @endif />
|
||||
@error('name') <span class="text-error text-xs mt-1">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
{{-- Descripción --}}
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">{{ __('Description') }}</span></label>
|
||||
<textarea wire:model="description" rows="2"
|
||||
class="textarea textarea-bordered w-full @error('description') textarea-error @enderror"
|
||||
placeholder="{{ __('What is this role for?') }}"></textarea>
|
||||
@error('description') <span class="text-error text-xs mt-1">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
{{-- Permisos --}}
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">{{ __('Permissions') }}</span></label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-1 border border-base-300 rounded-lg p-3 max-h-60 overflow-y-auto">
|
||||
@foreach($permissions as $perm)
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer py-0.5">
|
||||
<input type="checkbox" class="checkbox checkbox-sm checkbox-primary"
|
||||
value="{{ $perm->name }}" wire:model="rolePermissions" />
|
||||
{{ $perm->name }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" wire:click="closeForm" class="btn btn-ghost">{{ __('Cancel') }}</button>
|
||||
<button type="submit" class="btn btn-primary gap-1" wire:loading.attr="disabled" wire:target="save">
|
||||
<span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
|
||||
{{ $editingRole ? __('Update') : __('Create') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-backdrop bg-black/40" wire:click="closeForm"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ════════════════ MODAL VER ════════════════ --}}
|
||||
@if($viewing)
|
||||
<div class="modal modal-open z-[1500]">
|
||||
@@ -170,9 +114,9 @@
|
||||
@endif
|
||||
|
||||
<div class="modal-action">
|
||||
<button wire:click="openEdit({{ $viewing->id }})" class="btn btn-sm btn-info gap-1">
|
||||
<a href="{{ route('admin.roles.edit', $viewing->id) }}" class="btn btn-sm btn-info gap-1" wire:navigate>
|
||||
<x-heroicon-o-pencil class="w-4 h-4" /> {{ __('Edit') }}
|
||||
</button>
|
||||
</a>
|
||||
<button wire:click="closeView" class="btn btn-sm">{{ __('Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
<div class="py-8 max-w-3xl mx-auto sm:px-6 lg:px-8">
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-800">
|
||||
{{ $role ? __('Edit role') : __('New role') }}
|
||||
</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>
|
||||
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<form wire:submit.prevent="save" class="space-y-5">
|
||||
|
||||
{{-- Nombre --}}
|
||||
<div class="flex items-start gap-4">
|
||||
<label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
|
||||
{{ __('Name') }} <span class="text-error">*</span>
|
||||
</label>
|
||||
<div class="flex-1">
|
||||
<input type="text" wire:model="name"
|
||||
class="input input-bordered w-full @error('name') input-error @enderror"
|
||||
placeholder="{{ __('e.g. Site Supervisor') }}"
|
||||
@if($isProtected) readonly @endif />
|
||||
@error('name') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
|
||||
@if($isProtected)
|
||||
<p class="text-xs text-gray-400 mt-1">{{ __('This role is protected and cannot be renamed.') }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Descripción --}}
|
||||
<div class="flex items-start gap-4">
|
||||
<label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
|
||||
{{ __('Description') }}
|
||||
</label>
|
||||
<div class="flex-1">
|
||||
<textarea wire:model="description" rows="2"
|
||||
class="textarea textarea-bordered w-full @error('description') textarea-error @enderror"
|
||||
placeholder="{{ __('What is this role for?') }}"></textarea>
|
||||
@error('description') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Permisos --}}
|
||||
<div class="flex items-start gap-4">
|
||||
<label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
|
||||
{{ __('Permissions') }}
|
||||
</label>
|
||||
<div class="flex-1">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-1 border border-base-300 rounded-lg p-3 max-h-72 overflow-y-auto">
|
||||
@foreach($permissions as $perm)
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer py-0.5">
|
||||
<input type="checkbox" class="checkbox checkbox-sm checkbox-primary"
|
||||
value="{{ $perm->name }}" wire:model="rolePermissions" />
|
||||
{{ $perm->name }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 pt-2 border-t border-base-200">
|
||||
<a href="{{ route('admin.roles') }}" class="btn btn-ghost" wire:navigate>{{ __('Cancel') }}</a>
|
||||
<button type="submit" class="btn btn-primary gap-2" wire:loading.attr="disabled" wire:target="save">
|
||||
<span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
|
||||
<x-heroicon-o-check class="w-4 h-4" />
|
||||
{{ $role ? __('Update role') : __('Create role') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user