Skip to content

Alba María Álvarez / front_recipes

Go to a project
Commit cc2eaa74 by Alba María Álvarez
Options

feat(UserManagement): añadida funcionalidad de cambio de rol y ocultación de los… 

feat(UserManagement): añadida funcionalidad de cambio de rol y ocultación de los botones del usuario logueado
parent 1ec686e8
Inline Side-by-side
Showing with 39 additions and 15 deletions
src/views/UserManagement.vue
...@@ -70,17 +70,17 @@ ...@@ -70,17 +70,17 @@
</td> </td>
<td>{{ user.deletedAt ? user.deletedAt : '-' }}</td> <td>{{ user.deletedAt ? user.deletedAt : '-' }}</td>
<td> <td>
<div class="d-flex gap-2"> <div v-if="userStore.user && user.id !== userStore.user.id" class="d-flex gap-2">
<button id="activator-button" v-if="!user.deletedAt" @click="showDeactivateModal(user.id)" class="btn btn-outline-danger btn-sm" title="Desactivar"> <button id="activator-button" v-if="!user.deletedAt" @click="showDeactivateModal(user.id)" class="btn btn-outline-danger btn-sm" title="Desactivar">
<i class="bi bi-person-slash"></i> <i class="bi bi-person-slash"></i>
</button> </button>
<button v-else @click="showReactivateModal(user.id)" class="btn btn-outline-success btn-sm" title="Reactivar"> <button v-else @click="showReactivateModal(user.id)" class="btn btn-outline-success btn-sm" title="Reactivar">
<i class="bi bi-person-plus"></i> <i class="bi bi-person-plus"></i>
</button> </button>
<button v-if="user.role != 'ADMIN' && !user.deletedAt" @click="changeUserRole(user.id, 'ADMIN')" class="btn btn-outline-primary btn-sm" title="Hacer admin"> <button v-if="user.role != 'ADMIN' && !user.deletedAt" @click="showChangeRoleModal(user.id, 'ADMIN')" class="btn btn-outline-primary btn-sm" title="Hacer admin">
<i class="bi bi-person-fill-gear"></i> <i class="bi bi-person-fill-gear"></i>
</button> </button>
<button v-if="user.role == 'ADMIN'" @click="changeUserRole(user.id, 'USER')" class="btn btn-outline-info btn-sm" title="Quitar admin"> <button v-if="user.role == 'ADMIN'" @click="showChangeRoleModal(user.id, 'USER')" class="btn btn-outline-info btn-sm" title="Quitar admin">
<i class="bi bi-person-fill"></i> <i class="bi bi-person-fill"></i>
</button> </button>
</div> </div>
...@@ -130,9 +130,18 @@ import * as bootstrap from 'bootstrap'; ...@@ -130,9 +130,18 @@ import * as bootstrap from 'bootstrap';
const userStore = useUserStore(); const userStore = useUserStore();
const errorMsg = ref(null); const errorMsg = ref(null);
// Variables para el modal
const userToChangeId = ref(null);
const modalMessage = ref('');
let modalInstance = null;
const actionType = ref('');
const roleToChangeTo = ref('');
onMounted(async () => { onMounted(async () => {
errorMsg.value = null; errorMsg.value = null;
try { try {
await userStore.readUser();
await userStore.readAll(userStore.currentPage, userStore.pageSize, userStore.sortBy, userStore.sortDirection); await userStore.readAll(userStore.currentPage, userStore.pageSize, userStore.sortBy, userStore.sortDirection);
} catch (error) { } catch (error) {
errorMsg.value = 'No se pudieron cargar los usuarios. Inténtalo de nuevo más tarde.'; errorMsg.value = 'No se pudieron cargar los usuarios. Inténtalo de nuevo más tarde.';
...@@ -173,17 +182,10 @@ const displayedRange = computed(() => { ...@@ -173,17 +182,10 @@ const displayedRange = computed(() => {
return `Mostrando ${start} a ${end} de ${totalUsers} usuarios`; return `Mostrando ${start} a ${end} de ${totalUsers} usuarios`;
}); });
// Variables para el modal
const userToChangeId = ref(null);
const isDeactivating = ref(false);
const modalMessage = ref('');
let modalInstance = null;
// Funciones para los botones de la tabla // Funciones para los botones de la tabla
const showDeactivateModal = (userId) => { const showDeactivateModal = (userId) => {
userToChangeId.value = userId; userToChangeId.value = userId;
isDeactivating.value = true; actionType.value = 'deactivate';
modalMessage.value = '¿Estás seguro de que quieres desactivar este usuario?'; modalMessage.value = '¿Estás seguro de que quieres desactivar este usuario?';
if (!modalInstance) { if (!modalInstance) {
...@@ -194,7 +196,7 @@ const showDeactivateModal = (userId) => { ...@@ -194,7 +196,7 @@ const showDeactivateModal = (userId) => {
const showReactivateModal = (userId) => { const showReactivateModal = (userId) => {
userToChangeId.value = userId; userToChangeId.value = userId;
isDeactivating.value = false; actionType.value = 'activate';
modalMessage.value = '¿Estás seguro de que quieres reactivar este usuario?'; modalMessage.value = '¿Estás seguro de que quieres reactivar este usuario?';
if (!modalInstance) { if (!modalInstance) {
...@@ -203,6 +205,18 @@ const showReactivateModal = (userId) => { ...@@ -203,6 +205,18 @@ const showReactivateModal = (userId) => {
modalInstance.show(); modalInstance.show();
}; };
const showChangeRoleModal = (userId, newRole) => {
userToChangeId.value = userId;
roleToChangeTo.value = newRole;
actionType.value = 'changeRole';
modalMessage.value = `¿Estás seguro de que quieres cambiar el rol de este usuario a ${newRole}?`;
if (!modalInstance) {
modalInstance = new bootstrap.Modal(document.getElementById('userActionModal'));
}
modalInstance.show();
};
// Función que se ejecuta al recibir la confirmación del modal // Función que se ejecuta al recibir la confirmación del modal
const handleConfirmation = async () => { const handleConfirmation = async () => {
if (modalInstance) { if (modalInstance) {
...@@ -212,15 +226,25 @@ const handleConfirmation = async () => { ...@@ -212,15 +226,25 @@ const handleConfirmation = async () => {
errorMsg.value = null; errorMsg.value = null;
try { try {
if (isDeactivating.value) { switch (actionType.value) {
case 'deactivate':
await userStore.deactivate(userToChangeId.value); await userStore.deactivate(userToChangeId.value);
} else { break;
case 'activate':
await userStore.activate(userToChangeId.value); await userStore.activate(userToChangeId.value);
break;
case 'changeRole':
await userStore.changeRole(userToChangeId.value, roleToChangeTo.value);
break;
} }
// Recarga los datos para que la tabla refleje el cambio // Recarga los datos para que la tabla refleje el cambio
await userStore.readAll(userStore.currentPage, userStore.pageSize, userStore.sortBy, userStore.sortDirection); await userStore.readAll(userStore.currentPage, userStore.pageSize, userStore.sortBy, userStore.sortDirection);
} catch (error) { } catch (error) {
errorMsg.value = `Error al ${isDeactivating.value ? 'desactivar' : 'activar'} el usuario.`; if (actionType.value === 'changeRole') {
errorMsg.value = 'Error al cambiar el rol del usuario.';
} else {
errorMsg.value = `Error al ${actionType.value === 'deactivate' ? 'desactivar' : 'activar'} el usuario.`;
}
} }
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment