From 8abff3d0cd4211833528e2616735f10bb9d765ac Mon Sep 17 00:00:00 2001 From: BenitoBB <benitorodriguezmartinez24@gmail.com> Date: Mon, 28 Apr 2025 08:46:52 -0600 Subject: [PATCH] tabla de acciones para los cursos dentro de cursosVista.jsx --- diplomas/src/pages/cursosVista.jsx | 163 +++++++++++++++++++++++------ 1 file changed, 130 insertions(+), 33 deletions(-) diff --git a/diplomas/src/pages/cursosVista.jsx b/diplomas/src/pages/cursosVista.jsx index d787dab..7e822c0 100644 --- a/diplomas/src/pages/cursosVista.jsx +++ b/diplomas/src/pages/cursosVista.jsx @@ -3,43 +3,140 @@ import Layout from "@/components/layout/Layout"; import { supabase } from "@/lib/supabaseClient"; export default function CursosVista() { - const [cursos, setCursos] = useState([]); - - useEffect(() => { - const cargarCursos = async () => { - const { data, error } = await supabase.from("curso").select("*"); + const [cursos, setCursos] = useState([]); + const [cursoEditando, setCursoEditando] = useState(null); + const [nuevoNombre, setNuevoNombre] = useState(""); + const [nuevaDescripcion, setNuevaDescripcion] = useState(""); + const [nuevaHoras, setNuevaHoras] = useState(""); + + // Cargar cursos al iniciar + useEffect(() => { + const cargarCursos = async () => { + const { data, error } = await supabase.from("curso").select("*"); + if (error) { + console.error("Error al cargar cursos:", error.message); + } else { + setCursos(data); + } + }; + cargarCursos(); + }, []); + + // Iniciar edición + const iniciarEdicion = (curso) => { + setCursoEditando(curso.id); + setNuevoNombre(curso.nombre); + setNuevaDescripcion(curso.descripcion); + setNuevaHoras(curso.horas); + }; + + // Cancelar edición + const cancelarEdicion = () => { + setCursoEditando(null); + setNuevoNombre(""); + setNuevaDescripcion(""); + setNuevaHoras(""); + }; + + // Guardar cambios + const guardarEdicion = async (id) => { + const { data, error } = await supabase + .from("curso") + .update({ nombre: nuevoNombre, descripcion: nuevaDescripcion, horas: nuevaHoras }) + .eq("id", id); + if (error) { - console.error("Error al cargar cursos:", error.message); + console.error("Error actualizando curso:", error.message); + alert("Error al actualizar el curso"); } else { + alert("Curso actualizado exitosamente"); + // Recargar cursos + const { data } = await supabase.from("curso").select("*"); setCursos(data); + cancelarEdicion(); } }; - cargarCursos(); - }, []); - - return ( - <Layout> - <div className="w-[80vw] pt-10 flex flex-col items-center text-black"> - <h1 className="text-2xl font-semibold mb-6 text-black">Lista de Cursos</h1> - <table className="min-w-full bg-white border"> - <thead> - <tr> - <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> - </tr> - </thead> - <tbody> - {cursos.map((curso) => ( - <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> + + 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> - ))} - </tbody> - </table> + </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> + </td> + </tr> + ) + )} + </tbody> + </table> + </div> </div> - </Layout> - ); -} + </Layout> + ); + } \ No newline at end of file