From 8c85ec396d702fb5bb50114d5cb086e82fcf6fd5 Mon Sep 17 00:00:00 2001 From: BenitoBB Date: Sun, 18 May 2025 16:05:43 -0600 Subject: [PATCH] feat: implement diploma creation and preview dialogs, enhancing diploma management for students --- diplomas/src/pages/crearDiplomaDialog.jsx | 98 +++++++++++++++++ diplomas/src/pages/diplomasVista.jsx | 100 +++++++++++++++++- .../src/pages/vistaPreviaDiplomaDialog.jsx | 30 ++++++ 3 files changed, 225 insertions(+), 3 deletions(-) create mode 100644 diplomas/src/pages/crearDiplomaDialog.jsx create mode 100644 diplomas/src/pages/vistaPreviaDiplomaDialog.jsx diff --git a/diplomas/src/pages/crearDiplomaDialog.jsx b/diplomas/src/pages/crearDiplomaDialog.jsx new file mode 100644 index 0000000..2769b20 --- /dev/null +++ b/diplomas/src/pages/crearDiplomaDialog.jsx @@ -0,0 +1,98 @@ +import React, { useEffect, useState } from "react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, +} from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { supabaseClient } from "@/utils/supabase"; + +// Puedes reemplazar esto por tus propios diseños +const DISEÑOS = [ + { id: 1, nombre: "Diseño Clásico" }, + { id: 2, nombre: "Diseño Moderno" }, +]; + +export default function CrearDiplomaDialog({ + open, + onOpenChange, + alumno, + competencias, + setCompetencias, + competenciasAcreditadas, + setCompetenciasAcreditadas, + fecha, + setFecha, +}) { + const [diseñoSeleccionado, setDiseñoSeleccionado] = useState(DISEÑOS[0]?.id || null); + + const toggleCompetencia = (id) => { + setCompetenciasAcreditadas((prev) => + prev.includes(id) + ? prev.filter((cid) => cid !== id) + : [...prev, id] + ); + }; + + useEffect(() => { + if (alumno && alumno.curso?.id) { + supabaseClient + .from("curso_competencia") + .select("competencia(id, descripcion)") + .eq("curso_id", alumno.curso.id) + .then(({ data }) => { + const comps = data?.map((c) => c.competencia) || []; + setCompetencias(comps); + setCompetenciasAcreditadas(comps.map((c) => c.id)); // todas seleccionadas por default + }); + } + }, [alumno]); + + const handleCrearDiploma = async () => { + // Aquí va la lógica para crear el diploma en la base de datos + // 1. Insertar en Diploma + // 2. Insertar en Diploma_Competencia + // 3. (Opcional) Generar PDF y enviar + + // Ejemplo de inserción (ajusta según tu lógica real) + // await supabaseClient.from("Diploma").insert({...}); + // await supabaseClient.from("Diploma_Competencia").insert([...]); + + onOpenChange(false); + // Aquí puedes mostrar un mensaje de éxito o iniciar la generación del PDF + }; + + if (!open || !alumno) return null; + + return ( +
+

Crear Diploma

+
+ + {competencias.map((comp) => ( +
+ toggleCompetencia(comp.id)} + className="mr-2" + /> + {comp.descripcion} +
+ ))} +
+ +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/diplomas/src/pages/diplomasVista.jsx b/diplomas/src/pages/diplomasVista.jsx index d246ba1..7b7a901 100644 --- a/diplomas/src/pages/diplomasVista.jsx +++ b/diplomas/src/pages/diplomasVista.jsx @@ -1,12 +1,106 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Layout from "@/components/layout/Layout"; +import { supabaseClient } from "@/utils/supabase"; +import { Button } from "@/components/ui/button"; +import CrearDiplomaDialog from "./crearDiplomaDialog"; // Importa tu dialog +import VistaPreviaDiplomaDialog from "./vistaPreviaDiplomaDialog"; export default function DiplomasVista() { + const [alumnos, setAlumnos] = useState([]); + const [alumnoSeleccionado, setAlumnoSeleccionado] = useState(null); + const [mostrarDialog, setMostrarDialog] = useState(false); + + // Estado compartido para los datos del diploma + const [competencias, setCompetencias] = useState([]); + const [competenciasAcreditadas, setCompetenciasAcreditadas] = useState([]); + const [fecha, setFecha] = useState(""); + + useEffect(() => { + const cargarAlumnos = async () => { + const { data, error } = await supabaseClient + .from("alumno") + .select("id, nombre, correo, telefono, curso(id, nombre)") + .order("id", { ascending: true }); + if (!error) setAlumnos(data); + }; + cargarAlumnos(); + }, []); + + // Limpiar datos al cerrar dialog + const handleCloseDialog = (open) => { + setMostrarDialog(open); + if (!open) { + setAlumnoSeleccionado(null); + setCompetencias([]); + setCompetenciasAcreditadas([]); // limpiar al cerrar + setFecha(""); + } + }; + return ( -
-

Vista de diplomas

+
+

Vista de Diplomas

+ + + + + + + + + + + + + {alumnos.map((alumno) => ( + + + + + + + + + ))} + +
IDNombreCorreoTeléfonoCursoAcciones
{alumno.id}{alumno.nombre}{alumno.correo}{alumno.telefono}{alumno.curso?.nombre || "Sin curso"} + +
+ {/* Dialog para crear diploma */} + {mostrarDialog && ( +
+
+ + +
+
+ )} ); } diff --git a/diplomas/src/pages/vistaPreviaDiplomaDialog.jsx b/diplomas/src/pages/vistaPreviaDiplomaDialog.jsx new file mode 100644 index 0000000..3c0810d --- /dev/null +++ b/diplomas/src/pages/vistaPreviaDiplomaDialog.jsx @@ -0,0 +1,30 @@ +import React from "react"; + +export default function VistaPreviaDiplomaDialog({ open, alumno, competencias, fecha, competenciasAcreditadas }) { + if (!open || !alumno) return null; + + // Filtra solo las competencias seleccionadas si se pasa el array de acreditadas + const competenciasMostradas = competenciasAcreditadas + ? competencias.filter((comp) => competenciasAcreditadas.includes(comp.id)) + : competencias; + + return ( +
+

Diploma

+
Alumno: {alumno.nombre}
+
Curso: {alumno.curso?.nombre || "Sin curso"}
+
+ Competencias Acreditadas: +
    + {competenciasMostradas.map((comp) => ( +
  • {comp.descripcion}
    • + ))} +
+
+
+ Fecha: {fecha || new Date().toLocaleDateString()} +
+
Vista previa
+
+ ); +} \ No newline at end of file