105 lines
3.1 KiB
JavaScript
105 lines
3.1 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).filter(Boolean) || [];
|
|
setCompetencias(comps);
|
|
setCompetenciasAcreditadas(comps.map((c) => c.id)); // todas seleccionadas por default
|
|
});
|
|
}
|
|
}, [alumno, setCompetencias, setCompetenciasAcreditadas]);
|
|
|
|
const handleCrearDiploma = async () => {
|
|
// Aquí va la lógica para crear el diploma en la base de datos
|
|
onOpenChange(false);
|
|
};
|
|
|
|
if (!open || !alumno) return null;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Crear Diploma</DialogTitle>
|
|
<DialogDescription>
|
|
Selecciona las competencias acreditadas para el diploma.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<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="mb-2">
|
|
<label className="block text-sm font-semibold mb-1">Fecha:</label>
|
|
<input
|
|
type="date"
|
|
className="border p-1 w-full"
|
|
value={fecha}
|
|
onChange={e => setFecha(e.target.value)}
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<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>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|