diff --git a/diplomas/src/pages/alumnosVista.jsx b/diplomas/src/pages/alumnosVista.jsx index 79a1d5e..aa38f3a 100644 --- a/diplomas/src/pages/alumnosVista.jsx +++ b/diplomas/src/pages/alumnosVista.jsx @@ -12,6 +12,14 @@ import { } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + export default function AlumnosVista() { const [alumnos, setAlumnos] = useState([]); @@ -20,11 +28,24 @@ export default function AlumnosVista() { const [nuevoCorreo, setNuevoCorreo] = useState(""); const [mostrarModal, setMostrarModal] = useState(false); const [modalMensaje, setModalMensaje] = useState(""); + const [nuevoCurso, setNuevoCurso] = useState(""); + + const [cursos, setCursos] = useState([]); useEffect(() => { cargarAlumnos(); + cargarCursos(); }, []); + const cargarCursos = async () => { + const { data, error } = await supabaseClient.from("curso").select("*"); + if (error) { + console.error("Error al cargar cursos:", error.message); + } else { + setCursos(data); + } + }; + const cargarAlumnos = async () => { const { data, error } = await supabaseClient.from("alumno").select("*"); if (error) { @@ -39,6 +60,7 @@ export default function AlumnosVista() { setAlumnoEditando(alumno.id); setNuevoNombre(alumno.nombre); setNuevoCorreo(alumno.correo); + setNuevoCurso(alumno.nombreCurso); // Asumiendo que tienes un campo cursoId en el alumno }; // Cancelar edición @@ -46,6 +68,7 @@ export default function AlumnosVista() { setAlumnoEditando(null); setNuevoNombre(""); setNuevoCorreo(""); + setNuevoCurso(""); }; // Guardar cambios @@ -55,6 +78,7 @@ export default function AlumnosVista() { .update({ nombre: nuevoNombre, correo: nuevoCorreo, + nombreCurso: nuevoCurso, // Asumiendo que tienes un campo cursoId en el alumno }) .eq("id", id); @@ -94,6 +118,7 @@ export default function AlumnosVista() { <th className="py-2 border-b">ID</th> <th className="py-2 border-b">Nombre</th> <th className="py-2 border-b">Correo</th> + <th className="py-2 border-b">Curso</th> <th className="py-2 border-b">Acciones</th> </tr> </thead> @@ -118,6 +143,23 @@ export default function AlumnosVista() { onChange={(e) => setNuevoCorreo(e.target.value)} /> </td> + <td className="py-2 px-4 border-b"> + <Select + value={nuevoCurso} + onValueChange={(value) => setNuevoCurso(value)} + > + <SelectTrigger> + <SelectValue placeholder="Selecciona un curso" /> + </SelectTrigger> + <SelectContent> + {cursos.map((curso) => ( + <SelectItem key={curso.id} value={curso.nombre}> + {curso.nombre} + </SelectItem> + ))} + </SelectContent> + </Select> + </td> <td className="py-2 px-4 border-b flex justify-center"> <Button className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 m-2 rounded" @@ -138,6 +180,7 @@ 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">{alumno.nombreCurso}</td> <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" diff --git a/diplomas/src/pages/cursosVista.jsx b/diplomas/src/pages/cursosVista.jsx index 763f782..8da0065 100644 --- a/diplomas/src/pages/cursosVista.jsx +++ b/diplomas/src/pages/cursosVista.jsx @@ -3,7 +3,6 @@ import Layout from "@/components/layout/Layout"; import { supabaseClient } from "@/utils/supabase"; import { Dialog, - DialogTrigger, DialogContent, DialogHeader, DialogTitle, @@ -22,20 +21,19 @@ export default function CursosVista() { const [mostrarModal, setMostrarModal] = useState(false); const [modalMensaje, setModalMensaje] = useState(""); - // Cargar cursos al iniciar useEffect(() => { - const cargarCursos = async () => { - const { data, error } = await supabaseClient.from("curso").select("*"); - if (error) { - console.error("Error al cargar cursos:", error.message); - } else { - setCursos(data); - } - }; cargarCursos(); }, []); - // Iniciar edición + const cargarCursos = async () => { + const { data, error } = await supabaseClient.from("curso").select("*"); + if (error) { + console.error("Error al cargar cursos:", error.message); + } else { + setCursos(data); + } + }; + const iniciarEdicion = (curso) => { setCursoEditando(curso.id); setNuevoNombre(curso.nombre); @@ -43,7 +41,6 @@ export default function CursosVista() { setNuevaHoras(curso.horas); }; - // Cancelar edición const cancelarEdicion = () => { setCursoEditando(null); setNuevoNombre(""); @@ -51,7 +48,6 @@ export default function CursosVista() { setNuevaHoras(""); }; - // Guardar cambios const guardarEdicion = async (id) => { const { error } = await supabaseClient .from("curso") @@ -67,106 +63,102 @@ export default function CursosVista() { setModalMensaje("Error al actualizar el curso"); } else { setModalMensaje("Curso actualizado exitosamente"); - // Recargar cursos - const { data } = await supabaseClient.from("curso").select("*"); - setCursos(data); + await cargarCursos(); cancelarEdicion(); } setMostrarModal(true); }; + const eliminarCurso = async (id) => { + const { error } = await supabaseClient.from("curso").delete().eq("id", id); + if (error) { + console.error("Error eliminando curso:", error.message); + setModalMensaje("Error al eliminar el curso"); + } else { + setModalMensaje("Curso eliminado exitosamente"); + await cargarCursos(); + } + setMostrarModal(true); + }; + return ( <Layout> - <div className="p-8"> - <h1 className="text-3xl font-bold mb-6 text-center text-black"> - Cursos - </h1> - <div className="overflow-x-auto text-black"> - <table className="min-w-full bg-white border"> - <thead> - <tr className="bg-gray-100"> - <th className="py-2 px-4 border-b">ID</th> - <th className="py-2 px-4 border-b">Nombre</th> - <th className="py-2 px-4 border-b">Descripción</th> - <th className="py-2 px-4 border-b">Horas</th> - <th className="py-2 px-4 border-b">Acciones</th> - </tr> - </thead> - <tbody> - {cursos.map((curso) => - cursoEditando === curso.id ? ( - <tr key={curso.id}> - <td className="py-2 px-4 border-b text-center"> - {curso.id} - </td> - <td className="py-2 px-4 border-b"> - <Input - 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"> - <Input - type="text" - value={nuevaDescripcion} - onChange={(e) => setNuevaDescripcion(e.target.value)} - className="border rounded px-2 py-1 w-full" - /> - </td> - <td className="py-2 px-4 border-b"> - <input - type="number" - value={nuevaHoras} - onChange={(e) => setNuevaHoras(e.target.value)} - className="border rounded px-2 py-1 w-full" - /> - </td> - <td className="py-2 px-4 border-b flex gap-2 justify-center"> - <Button - className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 rounded" - onClick={() => guardarEdicion(curso.id)} - > - Guardar - </Button> - <Button - className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 rounded" - onClick={cancelarEdicion} - > - Cancelar - </Button> - </td> - </tr> - ) : ( - <tr key={curso.id}> - <td className="py-2 px-4 border-b text-center"> - {curso.id} - </td> - <td className="py-2 px-4 border-b">{curso.nombre}</td> - <td className="py-2 px-4 border-b">{curso.descripcion}</td> - <td className="py-2 px-4 border-b">{curso.horas}</td> - <td className="py-2 px-4 border-b text-center"> - <Button - className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded" - onClick={() => iniciarEdicion(curso)} - > - Editar - </Button> - - <Button - className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded" - - > - Eliminar - </Button> - </td> - </tr> - ) - )} - </tbody> - </table> - </div> + <div className="w-[80vw] pt-10 flex flex-col items-center text-black"> + <h1 className="text-2xl font-semibold mb-6">Lista de Cursos</h1> + <table className="min-w-full bg-white border"> + <thead> + <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">Descripción</th> + <th className="py-2 border-b">Horas</th> + <th className="py-2 border-b">Acciones</th> + </tr> + </thead> + <tbody> + {cursos.map((curso) => + cursoEditando === curso.id ? ( + <tr key={curso.id}> + <td className="py-2 px-4 border-b text-center">{curso.id}</td> + <td className="py-2 px-4 border-b"> + <Input + value={nuevoNombre} + onChange={(e) => setNuevoNombre(e.target.value)} + /> + </td> + <td className="py-2 px-4 border-b"> + <Input + value={nuevaDescripcion} + onChange={(e) => setNuevaDescripcion(e.target.value)} + /> + </td> + <td className="py-2 px-4 border-b"> + <Input + type="number" + value={nuevaHoras} + onChange={(e) => setNuevaHoras(e.target.value)} + /> + </td> + <td className="py-2 px-4 border-b flex justify-center"> + <Button + className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 m-2 rounded" + onClick={() => guardarEdicion(curso.id)} + > + Guardar + </Button> + <Button + className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 m-2 rounded" + onClick={cancelarEdicion} + > + Cancelar + </Button> + </td> + </tr> + ) : ( + <tr key={curso.id}> + <td className="py-2 px-4 border-b">{curso.id}</td> + <td className="py-2 px-4 border-b">{curso.nombre}</td> + <td className="py-2 px-4 border-b">{curso.descripcion}</td> + <td className="py-2 px-4 border-b">{curso.horas}</td> + <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(curso)} + > + Editar + </Button> + <Button + className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded" + onClick={() => eliminarCurso(curso.id)} + > + Eliminar + </Button> + </td> + </tr> + ) + )} + </tbody> + </table> </div> {/* Modal */}