feat: refactor cargarAlumnos function and add eliminarAlumno functionality in AlumnosVista

This commit is contained in:
BenitoBB 2025-05-05 07:41:17 -06:00
parent d5140cbec2
commit 9f86e069bb
3 changed files with 55 additions and 15 deletions

View File

@ -105,6 +105,22 @@ export default function AlumnosManual() {
</Button>
</div>
</div>
{/* Modal */}
<Dialog open={mostrarModal} onOpenChange={setMostrarModal}>
<DialogContent>
<DialogHeader>
<DialogTitle className="text-black">
Resultado de la operación
</DialogTitle>
<DialogDescription>{modalMensaje}</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button onClick={() => setMostrarModal(false)}>Cerrar</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</Layout>
);
}

View File

@ -22,17 +22,18 @@ export default function AlumnosVista() {
const [modalMensaje, setModalMensaje] = useState("");
useEffect(() => {
const cargarAlumnos = async () => {
const { data, error } = await supabaseClient.from("alumno").select("*");
if (error) {
console.error("Error al cargar alumnos:", error.message);
} else {
setAlumnos(data);
}
};
cargarAlumnos();
}, []);
const cargarAlumnos = async () => {
const { data, error } = await supabaseClient.from("alumno").select("*");
if (error) {
console.error("Error al cargar alumnos:", error.message);
} else {
setAlumnos(data);
}
};
// Iniciar edición
const iniciarEdicion = (alumno) => {
setAlumnoEditando(alumno.id);
@ -62,14 +63,25 @@ export default function AlumnosVista() {
setModalMensaje("Error al actualizar el alumno");
} else {
setModalMensaje("Alumno actualizado exitosamente");
// Recargar alumnos
const { data } = await supabaseClient.from("alumno").select("*");
setAlumnos(data);
await cargarAlumnos();
cancelarEdicion();
}
setMostrarModal(true);
};
// Eliminar alumno
const eliminarAlumno = async (id) => {
const { error } = await supabaseClient.from("alumno").delete().eq("id", id);
if (error) {
console.error("Error eliminando alumno:", error.message);
setModalMensaje("Error al eliminar el alumno");
} else {
setModalMensaje("Alumno eliminado exitosamente");
await cargarAlumnos();
}
setMostrarModal(true);
};
return (
<Layout>
<div className="w-[80vw] pt-10 flex flex-col items-center text-black">
@ -78,7 +90,7 @@ export default function AlumnosVista() {
</h1>
<table className="min-w-full bg-white border">
<thead>
<tr>
<tr className="bg-gray-100">
<th className="py-2 border-b">ID</th>
<th className="py-2 border-b">Nombre</th>
<th className="py-2 border-b">Correo</th>
@ -97,7 +109,6 @@ export default function AlumnosVista() {
type="text"
value={nuevoNombre}
onChange={(e) => setNuevoNombre(e.target.value)}
className="border rounded px-2 py-1 w-full"
/>
</td>
<td className="py-2 px-4 border-b">
@ -105,7 +116,6 @@ export default function AlumnosVista() {
type="email"
value={nuevoCorreo}
onChange={(e) => setNuevoCorreo(e.target.value)}
className="border rounded px-2 py-1 w-full"
/>
</td>
<td className="py-2 px-4 border-b flex justify-center">
@ -128,13 +138,20 @@ export default function AlumnosVista() {
<td className="py-2 px-4 border-b">{alumno.id}</td>
<td className="py-2 px-4 border-b">{alumno.nombre}</td>
<td className="py-2 px-4 border-b">{alumno.correo}</td>
<td className="py-2 px-4 border-b">
<td className="py-2 px-4 border-b space-x-2">
<Button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
onClick={() => iniciarEdicion(alumno)}
>
Editar
</Button>
<Button
className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
onClick={() => eliminarAlumno(alumno.id)}
>
Eliminar
</Button>
</td>
</tr>
)

View File

@ -153,6 +153,13 @@ export default function CursosVista() {
>
Editar
</Button>
<Button
className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
>
Eliminar
</Button>
</td>
</tr>
)