Implementar gestión de usuarios con modales para agregar, editar y eliminar administradores
This commit is contained in:
miguel
@@ -1,12 +1,158 @@
|
||||
'use client';
|
||||
import Button from '@/components/button';
|
||||
import Table, { Header } from '@/components/table';
|
||||
const Modal = dynamic(() => import('@/components/modal'), { ssr: false });
|
||||
import { useGetApi } from '@/hooks/use-get-api';
|
||||
import { Administrador } from '@/types/administradores';
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import axiosInstance from '@/utils/api-config';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
export default function Page() {
|
||||
const { data } = useGetApi<Administrador[]>('/administrador');
|
||||
const { data, setData } = useGetApi<Administrador[]>('/administrador');
|
||||
|
||||
// Estado del modal
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [modalMode, setModalMode] = useState<'add' | 'edit'>('add');
|
||||
const [selectedUser, setSelectedUser] = useState<Administrador | null>(null);
|
||||
|
||||
// Estado del modal de eliminación
|
||||
const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
|
||||
const [userToDelete, setUserToDelete] = useState<Administrador | null>(null);
|
||||
|
||||
// Estado del formulario
|
||||
const [formData, setFormData] = useState({
|
||||
nombre_usuario: '',
|
||||
correo: '',
|
||||
password: '',
|
||||
id_tipo_user: '',
|
||||
});
|
||||
|
||||
// Handlers del modal
|
||||
const handleOpenAddModal = () => {
|
||||
setModalMode('add');
|
||||
setSelectedUser(null);
|
||||
setFormData({
|
||||
nombre_usuario: '',
|
||||
correo: '',
|
||||
password: '',
|
||||
id_tipo_user: '',
|
||||
});
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleOpenEditModal = (user: Administrador) => {
|
||||
setModalMode('edit');
|
||||
setSelectedUser(user);
|
||||
setFormData({
|
||||
nombre_usuario: user.nombre_usuario,
|
||||
correo: user.correo,
|
||||
password: '',
|
||||
id_tipo_user: user.tipoUser.id.toString(),
|
||||
});
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalVisible(false);
|
||||
setSelectedUser(null);
|
||||
};
|
||||
|
||||
// Handlers del modal de eliminación
|
||||
const handleOpenDeleteModal = (user: Administrador) => {
|
||||
setUserToDelete(user);
|
||||
setIsDeleteModalVisible(true);
|
||||
};
|
||||
|
||||
const handleCloseDeleteModal = () => {
|
||||
setIsDeleteModalVisible(false);
|
||||
setUserToDelete(null);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
// Aquí iría la lógica para eliminar el usuario
|
||||
try {
|
||||
if (userToDelete) {
|
||||
// Lógica para eliminar el usuario
|
||||
const response = await axiosInstance.delete(
|
||||
`/administrador/${userToDelete.id_administrador}`
|
||||
);
|
||||
|
||||
console.log('Usuario eliminado:', response.data);
|
||||
// Actualizar la lista de usuarios en el estado
|
||||
if (data) {
|
||||
const updatedData = data.filter(
|
||||
(user) => user.id_administrador !== userToDelete.id_administrador
|
||||
);
|
||||
setData(updatedData);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error al eliminar el usuario:', error);
|
||||
}
|
||||
handleCloseDeleteModal();
|
||||
};
|
||||
|
||||
// Handler para envío del formulario
|
||||
const handleSubmitForm = async () => {
|
||||
try {
|
||||
if (modalMode === 'add') {
|
||||
// Crear nuevo usuario
|
||||
const payload = {
|
||||
nombre_usuario: formData.nombre_usuario,
|
||||
correo: formData.correo,
|
||||
password: formData.password,
|
||||
id_tipo_user: parseInt(formData.id_tipo_user),
|
||||
};
|
||||
|
||||
const response = await axiosInstance.post('/administrador', payload);
|
||||
console.log('Usuario creado:', response.data);
|
||||
|
||||
// Actualizar la lista de usuarios
|
||||
if (data) {
|
||||
setData([
|
||||
...data,
|
||||
{
|
||||
correo: formData.correo,
|
||||
id_administrador: response.data.id_administrador,
|
||||
nombre_usuario: formData.nombre_usuario,
|
||||
tipoUser: {
|
||||
id: parseInt(formData.id_tipo_user),
|
||||
tipo: formData.id_tipo_user === '1' ? 'Administrador' : 'Staff',
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
} else if (modalMode === 'edit' && selectedUser) {
|
||||
// Editar usuario existente
|
||||
const payload = {
|
||||
nombre_usuario: formData.nombre_usuario,
|
||||
correo: formData.correo,
|
||||
id_tipo_user: parseInt(formData.id_tipo_user),
|
||||
};
|
||||
|
||||
const response = await axiosInstance.put(
|
||||
`/administrador/${selectedUser.id_administrador}`,
|
||||
payload
|
||||
);
|
||||
console.log('Usuario actualizado:', response.data);
|
||||
|
||||
// Actualizar la lista de usuarios
|
||||
if (data) {
|
||||
const updatedData = data.map((user) =>
|
||||
user.id_administrador === selectedUser.id_administrador
|
||||
? { ...user, ...response.data }
|
||||
: user
|
||||
);
|
||||
setData(updatedData);
|
||||
}
|
||||
}
|
||||
|
||||
handleCloseModal();
|
||||
} catch (error) {
|
||||
console.error('Error al guardar el usuario:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const headers: Header<Administrador>[] = [
|
||||
{ key: 'id_administrador', label: 'ID' },
|
||||
@@ -19,12 +165,16 @@ export default function Page() {
|
||||
},
|
||||
{
|
||||
key: 'tipoUser',
|
||||
render: () => (
|
||||
render: (_, row) => (
|
||||
<div className="d-flex gap-2">
|
||||
<Button className="w-100" disabled>
|
||||
<Button className="w-100" onClick={() => handleOpenEditModal(row)}>
|
||||
Editar
|
||||
</Button>
|
||||
<Button variant="danger" className="w-100" disabled>
|
||||
<Button
|
||||
variant="danger"
|
||||
className="w-100"
|
||||
onClick={() => handleOpenDeleteModal(row)}
|
||||
>
|
||||
Eliminar
|
||||
</Button>
|
||||
</div>
|
||||
@@ -37,9 +187,166 @@ export default function Page() {
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center my-3">
|
||||
<h1>Administradores</h1>
|
||||
<Button variant="primary">Agregar Administrador</Button>
|
||||
<Button variant="primary" onClick={handleOpenAddModal}>
|
||||
Agregar Administrador
|
||||
</Button>
|
||||
</div>
|
||||
{data && <Table headers={headers} data={data} />}
|
||||
|
||||
<Modal
|
||||
isVisible={isModalVisible}
|
||||
onClose={handleCloseModal}
|
||||
size="lg"
|
||||
closeButton={true}
|
||||
>
|
||||
<div className="p-3">
|
||||
<h3 className="mb-4">
|
||||
{modalMode === 'add'
|
||||
? 'Agregar Nuevo Administrador'
|
||||
: 'Editar Administrador'}
|
||||
</h3>
|
||||
|
||||
{modalMode === 'edit' && selectedUser && (
|
||||
<div className="mb-3">
|
||||
<p>
|
||||
<strong>ID:</strong> {selectedUser.id_administrador}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Usuario actual:</strong> {selectedUser.nombre_usuario}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Correo actual:</strong> {selectedUser.correo}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Tipo:</strong> {selectedUser.tipoUser.tipo}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="nombre_usuario" className="form-label">
|
||||
Nombre de Usuario
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="nombre_usuario"
|
||||
value={formData.nombre_usuario}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
nombre_usuario: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Ingrese el nombre de usuario"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="correo" className="form-label">
|
||||
Correo Electrónico
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="correo"
|
||||
value={formData.correo}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
correo: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Ingrese el correo electrónico"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{modalMode === 'add' && (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="password" className="form-label">
|
||||
Contraseña
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-control"
|
||||
id="password"
|
||||
value={formData.password}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
password: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Ingrese la contraseña"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="tipoUser" className="form-label">
|
||||
Tipo de Usuario
|
||||
</label>
|
||||
<select
|
||||
className="form-select"
|
||||
id="tipoUser"
|
||||
value={formData.id_tipo_user}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
id_tipo_user: e.target.value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="">Seleccione un tipo</option>
|
||||
<option value="1">Administrador</option>
|
||||
<option value="2">Staff</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2 justify-content-end">
|
||||
<Button variant="secondary" onClick={handleCloseModal}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleSubmitForm}>
|
||||
{modalMode === 'add' ? 'Crear Administrador' : 'Guardar Cambios'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Modal de confirmación de eliminación */}
|
||||
<Modal
|
||||
isVisible={isDeleteModalVisible}
|
||||
onClose={handleCloseDeleteModal}
|
||||
size="md"
|
||||
closeButton={true}
|
||||
>
|
||||
<div className="p-4 text-center">
|
||||
<div className="mb-4">
|
||||
<i className="bi bi-exclamation-triangle text-warning display-1"></i>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-3">¿Está seguro de eliminar al usuario?</h4>
|
||||
|
||||
{userToDelete && (
|
||||
<div className="mb-4">
|
||||
<p className="fs-5 fw-bold text-danger">
|
||||
{userToDelete.nombre_usuario}
|
||||
</p>
|
||||
<p className="text-muted">Esta acción no se puede deshacer</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex gap-3 justify-content-center">
|
||||
<Button variant="secondary" onClick={handleCloseDeleteModal}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button variant="danger" onClick={handleConfirmDelete}>
|
||||
Sí, Eliminar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user