From d7562fa4abb57c16bc8bc92abfbde7ae1eae3187 Mon Sep 17 00:00:00 2001 From: SirRobert-1 Date: Fri, 13 Jun 2025 20:41:18 -0600 Subject: [PATCH] feat: update Alumnos schema to clarify type selection and enhance data loading in AlumnosVista and AlumnosManual --- diplomas/src/pages/alumnosManual.jsx | 166 ++++++++++++++++++++------ diplomas/src/pages/alumnosVista.jsx | 88 ++++++++++---- diplomas/src/schemas/AlumnosSchema.js | 2 +- 3 files changed, 197 insertions(+), 59 deletions(-) diff --git a/diplomas/src/pages/alumnosManual.jsx b/diplomas/src/pages/alumnosManual.jsx index 9bccdd0..ab26b84 100644 --- a/diplomas/src/pages/alumnosManual.jsx +++ b/diplomas/src/pages/alumnosManual.jsx @@ -11,7 +11,6 @@ import { } from "@/components/ui/select"; import { Dialog, - DialogTrigger, DialogContent, DialogHeader, DialogTitle, @@ -24,61 +23,99 @@ import { alumnoSchema } from "@/schemas/AlumnosSchema"; export default function AlumnosManual() { const [cursos, setCursos] = useState([]); - const [isDialogOpen, setIsDialogOpen] = useState(false); // Estado para controlar el diálogo + const [inyecciones, setInyecciones] = useState([]); + const [pildoras, setPildoras] = useState([]); + const [isDialogOpen, setIsDialogOpen] = useState(false); - // Configurar React Hook Form con zod const { register, handleSubmit, setValue, + watch, formState: { errors }, reset, + clearErrors, } = useForm({ resolver: zodResolver(alumnoSchema), defaultValues: { nombre: "", correo: "", telefono: "", + tipo: "", cursoSeleccionado: "", }, }); - // Cargar cursos al iniciar el componente + const tipo = watch("tipo"); + const cursoSeleccionado = watch("cursoSeleccionado"); + + // Cargar opciones según tipo seleccionado useEffect(() => { - const cargarCursos = async () => { - const { data, error } = await supabaseClient - .from("curso") - .select("id, nombre"); - if (error) { - console.error("Error al cargar cursos:", error.message); - } else { - setCursos(data); - } - }; - cargarCursos(); - }, []); + if (!tipo) { + setValue("cursoSeleccionado", ""); + clearErrors("cursoSeleccionado"); + return; + } + setValue("cursoSeleccionado", ""); + clearErrors("cursoSeleccionado"); + if (tipo === "curso") { + cargarCursos(); + } else if (tipo === "inyeccion") { + cargarInyecciones(); + } else if (tipo === "pildora") { + cargarPildoras(); + } + // eslint-disable-next-line + }, [tipo]); + + const cargarCursos = async () => { + const { data, error } = await supabaseClient + .from("curso") + .select("id, nombre"); + if (!error) setCursos(data || []); + }; + const cargarInyecciones = async () => { + const { data, error } = await supabaseClient + .from("inyeccion") + .select("id, nombre"); + if (!error) setInyecciones(data || []); + }; + const cargarPildoras = async () => { + const { data, error } = await supabaseClient + .from("pildoras") + .select("id, nombre"); + if (!error) setPildoras(data || []); + }; // Guardar alumno const manejarGuardar = async (data) => { try { - const { error } = await supabaseClient.from("alumno").insert([ - { - nombre: data.nombre, - correo: data.correo, - telefono: data.telefono, - curso_id: Number(data.cursoSeleccionado), // Guardar el ID del curso - }, - ]); + let campos = { + nombre: data.nombre, + correo: data.correo, + telefono: data.telefono, + tipo_formacion: data.tipo, + curso_id: null, + inyeccion_id: null, + pildoras_id: null, + }; + if (data.tipo === "curso") + campos.curso_id = Number(data.cursoSeleccionado); + if (data.tipo === "inyeccion") + campos.inyeccion_id = Number(data.cursoSeleccionado); + if (data.tipo === "pildora") + campos.pildoras_id = Number(data.cursoSeleccionado); + + const { error } = await supabaseClient.from("alumno").insert([campos]); if (error) { - console.error("Error al guardar:", error.message); - setIsDialogOpen(false); // Asegurarse de cerrar el diálogo en caso de error + setIsDialogOpen(false); } else { - setIsDialogOpen(true); // Mostrar el diálogo al guardar exitosamente - reset(); // Reiniciar el formulario + setIsDialogOpen(true); + reset(); } } catch (err) { - console.error("Error inesperado:", err); + // Manejo de error inesperado } }; @@ -118,20 +155,77 @@ export default function AlumnosManual() { {errors.telefono.message}

)} + + {/* Select para tipo de formación */} + {errors.tipo && ( +

{errors.tipo.message}

+ )} + + {/* Select para la opción según tipo */} + {tipo === "curso" && ( + + )} + {tipo === "inyeccion" && ( + + )} + {tipo === "pildora" && ( + + )} {errors.cursoSeleccionado && (

{errors.cursoSeleccionado.message} diff --git a/diplomas/src/pages/alumnosVista.jsx b/diplomas/src/pages/alumnosVista.jsx index a9f7b11..5002d71 100644 --- a/diplomas/src/pages/alumnosVista.jsx +++ b/diplomas/src/pages/alumnosVista.jsx @@ -45,6 +45,9 @@ export default function AlumnosVista() { useEffect(() => { cargarAlumnos(); // ...cargar cursos, inyecciones, pildoras... + cargarCursos(); + cargarInyecciones(); + cargarPildoras(); }, []); const cargarCursos = async () => { @@ -56,10 +59,21 @@ export default function AlumnosVista() { } }; + const cargarInyecciones = async () => { + const { data, error } = await supabaseClient.from("inyeccion").select("*"); + if (!error) setInyecciones(data || []); + }; + + const cargarPildoras = async () => { + const { data, error } = await supabaseClient.from("pildoras").select("*"); + if (!error) setPildoras(data || []); + }; + const cargarAlumnos = async () => { const { data, error } = await supabaseClient .from("alumno") - .select(` + .select( + ` id, nombre, correo, @@ -71,7 +85,8 @@ export default function AlumnosVista() { inyeccion(nombre), pildoras_id, pildoras(nombre) - `) + ` + ) .order("id", { ascending: true }); setAlumnos(data || []); }; @@ -100,9 +115,12 @@ export default function AlumnosVista() { setNuevoNumero(alumno.telefono || ""); setNuevoTipo(alumno.tipo_formacion || ""); // Detecta la formación actual según el tipo - if (alumno.tipo_formacion === "curso") setNuevaFormacion(alumno.curso_id ? String(alumno.curso_id) : ""); - else if (alumno.tipo_formacion === "inyeccion") setNuevaFormacion(alumno.inyeccion_id ? String(alumno.inyeccion_id) : ""); - else if (alumno.tipo_formacion === "pildora") setNuevaFormacion(alumno.pildoras_id ? String(alumno.pildoras_id) : ""); + if (alumno.tipo_formacion === "curso") + setNuevaFormacion(alumno.curso_id ? String(alumno.curso_id) : ""); + else if (alumno.tipo_formacion === "inyeccion") + setNuevaFormacion(alumno.inyeccion_id ? String(alumno.inyeccion_id) : ""); + else if (alumno.tipo_formacion === "pildora") + setNuevaFormacion(alumno.pildoras_id ? String(alumno.pildoras_id) : ""); else setNuevaFormacion(""); }; @@ -126,7 +144,8 @@ export default function AlumnosVista() { }; if (nuevoTipo === "curso") updateObj.curso_id = Number(nuevaFormacion); - if (nuevoTipo === "inyeccion") updateObj.inyeccion_id = Number(nuevaFormacion); + if (nuevoTipo === "inyeccion") + updateObj.inyeccion_id = Number(nuevaFormacion); if (nuevoTipo === "pildora") updateObj.pildoras_id = Number(nuevaFormacion); const { error } = await supabaseClient @@ -188,25 +207,37 @@ export default function AlumnosVista() { - {alumnos.map(alumno => + {alumnos.map((alumno) => alumnoEditando === alumno.id ? ( {alumno.id} - setNuevoNombre(e.target.value)} className="border rounded px-2 py-1 text-black" /> + setNuevoNombre(e.target.value)} + className="border rounded px-2 py-1 text-black" + /> - setNuevoCorreo(e.target.value)} className="border rounded px-2 py-1 text-black" /> + setNuevoCorreo(e.target.value)} + className="border rounded px-2 py-1 text-black" + /> - setNuevoNumero(e.target.value)} className="border rounded px-2 py-1 text-black" /> + setNuevoNumero(e.target.value)} + className="border rounded px-2 py-1 text-black" + /> setNuevaFormacion(e.target.value)} + onChange={(e) => setNuevaFormacion(e.target.value)} className="border rounded px-2 py-1 text-black" required > - {cursos.map(curso => ( + {cursos.map((curso) => ( @@ -237,12 +268,12 @@ export default function AlumnosVista() { {nuevoTipo === "inyeccion" && ( setNuevaFormacion(e.target.value)} + onChange={(e) => setNuevaFormacion(e.target.value)} className="border rounded px-2 py-1 text-black" required > - {pildoras.map(pildora => ( + {pildoras.map((pildora) => ( @@ -266,8 +297,18 @@ export default function AlumnosVista() { )} - - + + ) : ( @@ -286,9 +327,12 @@ export default function AlumnosVista() { : ""} - {alumno.tipo_formacion === "curso" && alumno.curso?.nombre} - {alumno.tipo_formacion === "inyeccion" && alumno.inyeccion?.nombre} - {alumno.tipo_formacion === "pildora" && alumno.pildoras?.nombre} + {alumno.tipo_formacion === "curso" && + alumno.curso?.nombre} + {alumno.tipo_formacion === "inyeccion" && + alumno.inyeccion?.nombre} + {alumno.tipo_formacion === "pildora" && + alumno.pildoras?.nombre}