157 lines
8.2 KiB
PHP
157 lines
8.2 KiB
PHP
<!-- resources/views/permissions/assign.blade.php -->
|
|
x-layouts.app :title="__('Permissions Management')">
|
|
<x-slot name="header">
|
|
<h2 class="text-xl font-semibold leading-tight text-gray-800">
|
|
{{ __('Gestión de Permisos y Roles') }}
|
|
</h2>
|
|
</x-slot>
|
|
|
|
<div class="py-6">
|
|
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
|
|
<div class="p-6 bg-white border-b border-gray-200">
|
|
<!-- Buscador -->
|
|
<div class="mb-6">
|
|
<input type="text" id="search" placeholder="Buscar usuario..."
|
|
class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
<!-- Lista de Usuarios -->
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Usuario</th>
|
|
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Roles</th>
|
|
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Permisos Directos</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200" id="users-table">
|
|
@foreach($users as $user)
|
|
<tr class="user-row">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="ml-4">
|
|
<div class="text-sm font-medium text-gray-900">{{ $user->name }}</div>
|
|
<div class="text-sm text-gray-500">{{ $user->email }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Asignación de Roles -->
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<form class="update-roles" data-user-id="{{ $user->id }}">
|
|
@csrf
|
|
<select name="roles[]" multiple
|
|
class="w-48 px-3 py-2 border rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
x-data="{}" x-init="tomSelect($el, {
|
|
plugins: ['remove_button'],
|
|
maxItems: 3
|
|
})">
|
|
@foreach($roles as $role)
|
|
<option value="{{ $role->name }}" {{ $user->hasRole($role) ? 'selected' : '' }}>
|
|
{{ $role->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</form>
|
|
</td>
|
|
|
|
<!-- Asignación de Permisos -->
|
|
<td class="px-6 py-4">
|
|
<form class="update-permissions" data-user-id="{{ $user->id }}">
|
|
@csrf
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
|
|
@foreach($permissions->groupBy('category') as $category => $perms)
|
|
<div class="p-4 border rounded-lg">
|
|
<h3 class="mb-2 text-sm font-semibold">{{ $category }}</h3>
|
|
@foreach($perms as $permission)
|
|
<label class="flex items-center space-x-2">
|
|
<input type="checkbox"
|
|
name="permissions[]"
|
|
value="{{ $permission->name }}"
|
|
{{ $user->hasDirectPermission($permission) ? 'checked' : '' }}
|
|
class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
|
|
<span class="text-sm">{{ $permission->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0/dist/css/tom-select.css" rel="stylesheet">
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0/dist/js/tom-select.complete.min.js"></script>
|
|
<script>
|
|
// Búsqueda en tiempo real
|
|
document.getElementById('search').addEventListener('input', function(e) {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
document.querySelectorAll('.user-row').forEach(row => {
|
|
const text = row.textContent.toLowerCase();
|
|
row.style.display = text.includes(searchTerm) ? '' : 'none';
|
|
});
|
|
});
|
|
|
|
// Actualización automática de roles
|
|
document.querySelectorAll('select[name="roles[]"]').forEach(select => {
|
|
new TomSelect(select, {
|
|
plugins: ['remove_button'],
|
|
onChange: function(value) {
|
|
const form = select.closest('form');
|
|
submitForm(form, 'roles');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Actualización automática de permisos
|
|
document.querySelectorAll('input[name="permissions[]"]').forEach(checkbox => {
|
|
checkbox.addEventListener('change', function() {
|
|
const form = this.closest('form');
|
|
submitForm(form, 'permissions');
|
|
});
|
|
});
|
|
|
|
// Función para enviar el formulario
|
|
function submitForm(form, type) {
|
|
const userId = form.dataset.userId;
|
|
const formData = new FormData(form);
|
|
|
|
fetch(`/admin/users/${userId}/${type}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
showNotification('Cambios guardados exitosamente', 'success');
|
|
} else {
|
|
showNotification('Error al guardar los cambios', 'error');
|
|
}
|
|
});
|
|
}
|
|
|
|
function showNotification(message, type) {
|
|
// Implementar notificación (ej: Toast)
|
|
console.log(`${type}: ${message}`);
|
|
}
|
|
</script>
|
|
@endpush
|
|
</x-layouts.app> |