<div>
<p class="mb-4">Un rol proporciona acceso a menús y funciones predefinidas para que, según el rol asignado por un administrador, el usuario tener acceso a lo que necesite.</p>
<!-- Role cards -->
<div class="row g-4">
@foreach($roles as $role)
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<h6 class="fw-normal mb-2">Total {{ $role->users->count() }} usuario{{ $role->users->count() == 1? '': 's' }}</h6>
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
@foreach($role->users->take(10) as $user)
<li data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="{{ $user->name }}"
class="avatar avatar-sm pull-up">
<img class="rounded-circle" src="{{ asset($user->profile_photo_url) }}" alt="Avatar" />
</li>
@endforeach
</ul>
</div>
<div class="d-flex justify-content-between align-items-end mt-1">
<div class="role-heading">
<h4 class="mb-1 role-name">{{ $role->name }}</h4>
<span class="badge rounded-pill bg-label-{{ $role->style }}">Style: {{ $role->style }}</span>
</div>
<div>
<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#roleModal" wire:click="loadRoleData('view', {{ $role->id }})"
class="text-body ms-2"
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Ver rol">
<i class="fa-regular fa-eye"></i>
</a>
@can('system.roles.edit')
@if ($role->name != 'SuperAdmin' && $role->name != 'Admin')
<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#roleModal" wire:click="loadRoleData('edit', {{ $role->id }})"
class="text-body ms-2"
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Editar rol">
<i class="fa-regular fa-pen-to-square"></i>
</a>
@endif
@endcan
@can('system.roles.create')
<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#roleModal" wire:click="loadRoleData('clone', {{ $role->id }})"
class="text-body ms-2"
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Crear una copia">
<i class="fa-regular fa-copy"></i>
</a>
@endcan
@can('system.roles.delete')
@if ($role->name != 'SuperAdmin' && $role->name != 'Admin')
<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#roleDeleteModal" data-id="{{ $role->id }}"
class="role-delete-modal text-body ms-2"
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Eliminar">
<i class="fa-regular fa-trash-can"></i>
</a>
@endif
@endcan
</div>
</div>
</div>
</div>
</div>
@endforeach
@can('system.roles.create')
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card h-100">
<div class="row h-100">
<div class="col-sm-5">
<div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-3">
<img src="{{ asset('assets/admin/img/illustrations/add-new-roles.png') }}" class="img-fluid mt-sm-4 mt-md-0" alt="add-new-roles" width="83">
</div>
</div>
<div class="col-sm-7">
<div class="card-body text-sm-end text-center ps-sm-0">
<button data-bs-target="#roleModal" data-bs-toggle="modal" class="btn btn-primary mb-2 text-nowrap add-new-role">
<i class="fa-solid fa-plus me-1"></i> Nuevo rol
</button>
<p class="mb-0 mt-1">Agregar rol, si no existe</p>
</div>
</div>
</div>
</div>
</div>
@endcan
</div>
<!--/ Role cards -->
<!-- Role Modals -->
@include('admin::roles._form_modal')
@include('admin::roles._delete_modal')
<!-- / Role Modals -->
<div>
@push('page-script')
<script>
// Función para obtener elementos del formulario
const getFormElements = () => {
const form = document.getElementById('roleForm');
const formElements = form.querySelectorAll('input, select, textarea, button');
return {
roleModal: document.getElementById('roleModal'),
roleTitle: document.querySelector('.role-title'),
form: form,
inputId: document.querySelector('#roleForm input[name="id"]'),
inputName: document.querySelector('#roleForm input[name="name"]'),
formElements: formElements,
addRoleButton: document.querySelector('.add-new-role'),
selectAll: document.querySelector('#selectAll'),
submitButton: document.querySelector('#roleForm button[type="submit"]'),
deleteRoleButtons: document.querySelectorAll('.role-delete-modal'),
deleteRoleModal: document.getElementById('roleDeleteModal'),
deleteRoleForm: document.getElementById('deleteRoleForm'),
deleteRoleText: document.querySelector('#roleDeleteModal .confirmation-text'),
};
};
// Función para habilitar o deshabilitar el formulario
const habilitarForm = (enableForm = true) => {
const { formElements, submitButton } = getFormElements();
formElements.forEach(element => {
element.disabled = !enableForm;
});
submitButton.disabled = !enableForm;
}
// Función para resetear el formulario
const resetForm = () => {
const { roleTitle, form, submitButton } = getFormElements();
roleTitle.textContent = 'Agregar un nuevo rol';
submitButton.textContent = 'Crear nuevo rol';
form.reset();
// Limpiar errores de validación
form.querySelectorAll('.is-invalid').forEach(element => {
element.classList.remove('is-invalid');
});
// Restablecer mensajes de error
form.querySelectorAll('.invalid-feedback').forEach(element => {
element.textContent = '';
});
};
// Función para inicializar la validación del formulario
const initializeFormValidation = (form) => {
const { inputId, inputName } = getFormElements();
FormValidation.formValidation(form, {
fields: {
name: {
validators: {
notEmpty: {
message: 'El nombre del rol es requerido'
},
// Agregar una regla personalizada para la validación AJAX
remote: {
url: '{{ route('admin.system.roles.check-unique-name') }}',
data: function() {
return {
name: inputName.value,
id: inputId.value,
};
},
message: 'Este nombre de rol ya está en uso',
method: 'GET'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
rowSelector: '.col-12'
}),
submitButton: new FormValidation.plugins.SubmitButton(),
autoFocus: new FormValidation.plugins.AutoFocus(),
}
})
.on('core.form.valid', function(e) {
Livewire.dispatch('saveRole');
});
};
// Función para agregar el listener a un botón de eliminación de rol
const addDeleteRoleListener = (button) => {
button.addEventListener('click', function() {
const { deleteRoleText } = getFormElements();
var roleText = '¿Está seguro que desea eliminar el rol "' + button.closest('.card').querySelector('.role-name').innerHTML.trim() + '"?';
@this.deleteRoleId = this.dataset.id;
deleteRoleText.textContent = roleText;
});
}
// Función para cambiar el estado de los checkboxes de permisos
const setPermissionCheckboxState = (input, state) => {
if(!input)
return false;
let modelName = input.getAttribute('wire:model');
modelName = modelName.split('.').pop();
if(modelName)
@this.permissionsInputs[modelName] = state;
}
// Inicialización
document.addEventListener('DOMContentLoaded', function() {
Livewire.on('reloadForm', () => {
setTimeout(() => {
const { form, selectAll, deleteRoleForm } = getFormElements();
// Seleccionar/deseleccionar todos los checkboxes
selectAll.addEventListener('change', e => {
Object.keys(@this.permissionsInputs).forEach(key => {
@this.permissionsInputs[key] = e.target.checked;
});
});
const checkboxList = document.querySelectorAll('#roleForm .permission-row input[type="checkbox"]');
checkboxList.forEach(checkbox => {
checkbox.addEventListener('change', e => {
let permissionType = e.target.dataset.type,
permissionsRow = e.target.closest('.permission-row');
if (permissionType == 'view' && !e.target.checked) {
let permissionCheckboxView = permissionsRow.querySelector('input[data-type="view"]'),
permissionCheckboxCreate = permissionsRow.querySelector('input[data-type="create"]'),
permissionCheckboxEdit = permissionsRow.querySelector('input[data-type="edit"]'),
permissionCheckboxCancel = permissionsRow.querySelector('input[data-type="cancel"]'),
permissionCheckboxDelete = permissionsRow.querySelector('input[data-type="delete"]');
if(permissionCheckboxView)
setPermissionCheckboxState(permissionCheckboxView, false);
if(permissionCheckboxCreate)
setPermissionCheckboxState(permissionCheckboxCreate, false);
if(permissionCheckboxEdit)
setPermissionCheckboxState(permissionCheckboxEdit, false);
if(permissionCheckboxCancel)
setPermissionCheckboxState(permissionCheckboxCancel, false);
if(permissionCheckboxDelete)
setPermissionCheckboxState(permissionCheckboxDelete, false);
}
if ((permissionType == 'create' || permissionType == 'edit' || permissionType == 'cancel' || permissionType == 'delete') && e.target.checked) {
let permissionCheckboxView = permissionsRow.querySelector('input[data-type="view"]');
setPermissionCheckboxState(permissionCheckboxView, true);
}
});
});
// Validación de formulario
initializeFormValidation(form);
deleteRoleForm.addEventListener('submit', function(e) {
e.preventDefault();
Livewire.dispatch('deleteRole');
});
}, 1);
});
Livewire.on('habilitarFormulario', () => {
habilitarForm();
})
Livewire.on('deshabilitarFormulario', () => {
setTimeout(() => {
habilitarForm(false);
}, 1);
})
Livewire.on('modalHide', () => {
const { roleModal } = getFormElements();
const modal = bootstrap.Modal.getInstance(roleModal);
modal.hide();
});
Livewire.on('modalDeleteHide', () => {
const { deleteRoleModal } = getFormElements();
const modal = bootstrap.Modal.getInstance(deleteRoleModal);
modal.hide();
});
Livewire.on('saveRole', () => {
const { deleteRoleButtons } = getFormElements();
deleteRoleButtons.forEach(button => {
addDeleteRoleListener(button);
});
});
const { roleModal, addRoleButton, deleteRoleButtons } = getFormElements();
// Al agregar Rol
addRoleButton.addEventListener('click', function() {
const { form } = getFormElements();
resetForm();
habilitarForm();
});
// Al abrir el Modal Crear / Editar / Clonar
roleModal.addEventListener('shown.bs.modal', function () {
const { inputName } = getFormElements();
inputName.focus();
});
// Eliminar
deleteRoleButtons.forEach(button => {
addDeleteRoleListener(button);
});
});
</script>
@endpush