diff --git a/diplomas/src/pages/alumnosManual.jsx b/diplomas/src/pages/alumnosManual.jsx index 3a3e459..8a1c3c5 100644 --- a/diplomas/src/pages/alumnosManual.jsx +++ b/diplomas/src/pages/alumnosManual.jsx @@ -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> ); } diff --git a/diplomas/src/pages/alumnosVista.jsx b/diplomas/src/pages/alumnosVista.jsx index 125aee4..79a1d5e 100644 --- a/diplomas/src/pages/alumnosVista.jsx +++ b/diplomas/src/pages/alumnosVista.jsx @@ -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> ) diff --git a/diplomas/src/pages/cursosVista.jsx b/diplomas/src/pages/cursosVista.jsx index ac755dc..763f782 100644 --- a/diplomas/src/pages/cursosVista.jsx +++ b/diplomas/src/pages/cursosVista.jsx @@ -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> )