98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
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 (
|
|
<div className="bg-white border shadow-lg rounded p-8 w-[400px] mx-4 flex flex-col text-black">
|
|
<h2 className="text-xl font-bold mb-4">Crear Diploma</h2>
|
|
<div className="mb-2">
|
|
<label className="block text-sm font-semibold mb-1">Competencias:</label>
|
|
{competencias.map((comp) => (
|
|
<div key={comp.id} className="flex items-center mb-1">
|
|
<input
|
|
type="checkbox"
|
|
checked={competenciasAcreditadas.includes(comp.id)}
|
|
onChange={() => toggleCompetencia(comp.id)}
|
|
className="mr-2"
|
|
/>
|
|
<span>{comp.descripcion}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 mt-4">
|
|
<Button onClick={handleCrearDiploma} className="bg-green-500 hover:bg-green-700 text-white">
|
|
Crear Diploma
|
|
</Button>
|
|
<Button onClick={() => onOpenChange(false)} className="bg-gray-400 hover:bg-gray-600 text-white">
|
|
Cancelar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |