feat: add telefono field to Alumnos schema, update AlumnosManual and AlumnosArchivo to handle course registration and competency management
This commit is contained in:
BenitoBB
parent
dd101da359
commit
30b07db07e
|
|
@ -53,15 +53,6 @@ const data = {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Competencias",
|
||||
items: [
|
||||
{
|
||||
title: "Vista de competencias",
|
||||
url: "/competenciasVista",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Diplomas",
|
||||
items: [
|
||||
|
|
|
|||
|
|
@ -3,13 +3,17 @@ import Papa from "papaparse";
|
|||
import * as XLSX from "xlsx";
|
||||
import Layout from "@/components/layout/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
|
||||
import { CursosManualForm } from "./cursosManual"; // Importa el formulario sin Layout
|
||||
import { supabaseClient } from "@/utils/supabase";
|
||||
|
||||
export default function AlumnosArchivo() {
|
||||
const [archivo, setArchivo] = useState(null);
|
||||
const [datos, setDatos] = useState([]);
|
||||
const [dialogoAbierto, setDialogoAbierto] = useState(false);
|
||||
const [mensajeDialogo, setMensajeDialogo] = useState("");
|
||||
const [mostrarDialogCurso, setMostrarDialogCurso] = useState(false);
|
||||
const [cursoFaltante, setCursoFaltante] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (archivo) extraerContenido();
|
||||
|
|
@ -21,13 +25,36 @@ export default function AlumnosArchivo() {
|
|||
const errores = [];
|
||||
|
||||
for (const alumno of datos) {
|
||||
// 1. Verifica si el curso existe
|
||||
const { data: cursosEncontrados, error: errorCurso } = await supabaseClient
|
||||
.from("curso")
|
||||
.select("id")
|
||||
.eq("nombre", alumno.nombreCurso)
|
||||
.maybeSingle();
|
||||
|
||||
if (errorCurso) {
|
||||
errores.push({ alumno, error: "Error al buscar el curso" });
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!cursosEncontrados) {
|
||||
// Si no existe el curso, muestra el dialog para registrar el curso
|
||||
setCursoFaltante(alumno.nombreCurso);
|
||||
setMostrarDialogCurso(true);
|
||||
setMensajeDialogo(`El curso "${alumno.nombreCurso}" no existe. Por favor, regístralo primero.`);
|
||||
setDialogoAbierto(true);
|
||||
return; // Detiene el registro de alumnos
|
||||
}
|
||||
|
||||
// 2. Si existe, registra el alumno con el curso_id correcto
|
||||
const res = await fetch("/api/alumno", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nombre: alumno.nombre,
|
||||
correo: alumno.correo,
|
||||
nombreCurso: alumno.nombreCurso,
|
||||
telefono: alumno.telefono,
|
||||
curso_id: cursosEncontrados.id, // Usar el id del curso
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -161,7 +188,25 @@ export default function AlumnosArchivo() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dialog Component */}
|
||||
{/* Dialog para curso faltante */}
|
||||
<Dialog open={mostrarDialogCurso} onOpenChange={setMostrarDialogCurso}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-black">
|
||||
Registrar curso faltante
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
El curso <b>{cursoFaltante}</b> no existe. Por favor, regístralo antes de continuar.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<CursosManualForm nombreSugerido={cursoFaltante} />
|
||||
<DialogFooter>
|
||||
<Button onClick={() => setMostrarDialogCurso(false)}>Cerrar</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog de información */}
|
||||
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export default function AlumnosManual() {
|
|||
nombre: data.nombre,
|
||||
correo: data.correo,
|
||||
telefono: data.telefono,
|
||||
nombreCurso: data.cursoSeleccionado, // Guardar el nombre del curso
|
||||
curso_id: Number(data.cursoSeleccionado), // Guardar el ID del curso
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ export default function AlumnosManual() {
|
|||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{cursos.map((curso) => (
|
||||
<SelectItem key={curso.id} value={curso.nombre}>
|
||||
<SelectItem key={curso.id} value={curso.id.toString()}>
|
||||
{curso.nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -96,116 +96,244 @@ export default function CursosManual() {
|
|||
<div className="w-[60vw] pt-10 flex flex-col items-end justify-center">
|
||||
<div className="bg-white p-8 font-sans text-center w-[70%] flex flex-col items-center">
|
||||
<h1 className="text-xl font-semibold mb-4 text-black">Nuevo curso</h1>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nombre del curso"
|
||||
{...register("nombre")}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
|
||||
/>
|
||||
{errors.nombre && (
|
||||
<p className="text-red-500 text-sm">{errors.nombre.message}</p>
|
||||
)}
|
||||
|
||||
<Textarea
|
||||
placeholder="Descripción"
|
||||
{...register("descripcion")}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
|
||||
/>
|
||||
{errors.descripcion && (
|
||||
<p className="text-red-500 text-sm">
|
||||
{errors.descripcion.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Horas del curso"
|
||||
{...register("horas", { valueAsNumber: true })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
|
||||
/>
|
||||
{errors.horas && (
|
||||
<p className="text-red-500 text-sm">{errors.horas.message}</p>
|
||||
)}
|
||||
|
||||
<h2 className="text-lg font-semibold mb-3 text-black">
|
||||
Competencias
|
||||
</h2>
|
||||
|
||||
{competenciasGuardadas.length > 0 && (
|
||||
<div className="mt-5 w-full flex-wrap">
|
||||
{competenciasGuardadas.map((competencia, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-full flex justify-between items-center px-2 mb-2"
|
||||
>
|
||||
<span className="text-black">{competencia}</span>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handleDeleteCompetencia(index)}
|
||||
className="bg-red-400 hover:bg-red-500 text-white font-bold py-1 px-3 rounded-md"
|
||||
>
|
||||
X
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{addCompetencia && (
|
||||
<div className="w-full flex flex-col md:flex-row mt-5">
|
||||
<div className="flex flex-col">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nueva competencia"
|
||||
{...register("nuevaCompetencia")}
|
||||
className="w-80 px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
|
||||
/>
|
||||
{errors.nuevaCompetencia && (
|
||||
<p className="text-red-500 text-sm">
|
||||
{errors.nuevaCompetencia.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSaveCompetencia}
|
||||
className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md mr-2"
|
||||
>
|
||||
Guardar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleAddCompetencia}
|
||||
className="w-full bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-md mt-5"
|
||||
>
|
||||
Agregar competencia
|
||||
</Button>
|
||||
|
||||
<div className="flex justify-center w-full mt-5">
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Guardando..." : "Guardar curso"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<CursosManualForm nombreSugerido="" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export function CursosManualForm({ nombreSugerido = "" }) {
|
||||
const [addCompetencia, setAddCompetencia] = useState(false);
|
||||
const [competenciasGuardadas, setCompetenciasGuardadas] = useState([]); // [{id, descripcion}]
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(cursosSchema),
|
||||
defaultValues: {
|
||||
nombre: nombreSugerido,
|
||||
descripcion: "",
|
||||
horas: 0,
|
||||
nuevaCompetencia: "",
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
getValues,
|
||||
formState: { errors },
|
||||
} = form;
|
||||
|
||||
// Cambia para insertar la competencia en la tabla competencia
|
||||
const handleSaveCompetencia = async (e) => {
|
||||
e.preventDefault();
|
||||
const nuevaCompetencia = getValues("nuevaCompetencia").trim();
|
||||
if (!nuevaCompetencia) return;
|
||||
|
||||
// Verifica si ya existe en el estado
|
||||
if (competenciasGuardadas.some(c => c.descripcion === nuevaCompetencia)) {
|
||||
alert("La competencia ya fue agregada.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Verifica si ya existe en la base de datos
|
||||
let competenciaId = null;
|
||||
try {
|
||||
// Busca si ya existe
|
||||
const { data: existente } = await supabaseClient
|
||||
.from("competencia")
|
||||
.select("id")
|
||||
.eq("descripcion", nuevaCompetencia)
|
||||
.maybeSingle();
|
||||
|
||||
if (existente && existente.id) {
|
||||
competenciaId = existente.id;
|
||||
} else {
|
||||
// Si no existe, la crea
|
||||
const { data: insertada, error } = await supabaseClient
|
||||
.from("competencia")
|
||||
.insert([{ descripcion: nuevaCompetencia }])
|
||||
.select("id")
|
||||
.single();
|
||||
if (error) throw error;
|
||||
competenciaId = insertada.id;
|
||||
}
|
||||
|
||||
setCompetenciasGuardadas([
|
||||
...competenciasGuardadas,
|
||||
{ id: competenciaId, descripcion: nuevaCompetencia },
|
||||
]);
|
||||
setAddCompetencia(false);
|
||||
setValue("nuevaCompetencia", "");
|
||||
} catch (err) {
|
||||
alert("Error al guardar la competencia: " + (err.message || err));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCompetencia = (index) => {
|
||||
setCompetenciasGuardadas(
|
||||
competenciasGuardadas.filter((_, i) => i !== index)
|
||||
);
|
||||
};
|
||||
|
||||
// Guardar curso y asociar competencias
|
||||
const onSubmit = async (data) => {
|
||||
const { nombre, descripcion } = data;
|
||||
const horas = parseInt(data.horas, 10);
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// 1. Inserta el curso
|
||||
const { data: cursoInsertado, error: errorCurso } = await supabaseClient
|
||||
.from("curso")
|
||||
.insert([{ nombre, descripcion, horas }])
|
||||
.select("id")
|
||||
.single();
|
||||
|
||||
if (errorCurso) {
|
||||
alert("Error al guardar el curso: " + errorCurso.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Inserta en la tabla pivote curso_competencia
|
||||
const cursoId = cursoInsertado.id;
|
||||
const relaciones = competenciasGuardadas.map((c) => ({
|
||||
curso_id: cursoId,
|
||||
competencia_id: c.id,
|
||||
}));
|
||||
|
||||
if (relaciones.length > 0) {
|
||||
const { error: errorPivote } = await supabaseClient
|
||||
.from("curso_competencia")
|
||||
.insert(relaciones);
|
||||
if (errorPivote) {
|
||||
alert("Error al asociar competencias: " + errorPivote.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
alert("Curso guardado exitosamente");
|
||||
form.reset();
|
||||
setCompetenciasGuardadas([]);
|
||||
} catch (err) {
|
||||
alert("Ocurrió un error inesperado");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nombre del curso"
|
||||
{...register("nombre")}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
|
||||
/>
|
||||
{errors.nombre && (
|
||||
<p className="text-red-500 text-sm">{errors.nombre.message}</p>
|
||||
)}
|
||||
|
||||
<Textarea
|
||||
placeholder="Descripción"
|
||||
{...register("descripcion")}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
|
||||
/>
|
||||
{errors.descripcion && (
|
||||
<p className="text-red-500 text-sm">{errors.descripcion.message}</p>
|
||||
)}
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Horas del curso"
|
||||
{...register("horas", { valueAsNumber: true })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
|
||||
/>
|
||||
{errors.horas && (
|
||||
<p className="text-red-500 text-sm">{errors.horas.message}</p>
|
||||
)}
|
||||
|
||||
<h2 className="text-lg font-semibold mb-3 text-black">Competencias</h2>
|
||||
|
||||
{competenciasGuardadas.length > 0 && (
|
||||
<div className="mt-5 w-full flex-wrap">
|
||||
{competenciasGuardadas.map((competencia, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-full flex justify-between items-center px-2 mb-2"
|
||||
>
|
||||
<span className="text-black">{competencia.descripcion}</span>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handleDeleteCompetencia(index)}
|
||||
className="bg-red-400 hover:bg-red-500 text-white font-bold py-1 px-3 rounded-md"
|
||||
>
|
||||
X
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{addCompetencia && (
|
||||
<div className="w-full flex flex-col md:flex-row mt-5">
|
||||
<div className="flex flex-col">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Nueva competencia"
|
||||
{...register("nuevaCompetencia")}
|
||||
className="w-80 px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
|
||||
/>
|
||||
{errors.nuevaCompetencia && (
|
||||
<p className="text-red-500 text-sm">
|
||||
{errors.nuevaCompetencia.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSaveCompetencia}
|
||||
className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md mr-2"
|
||||
>
|
||||
Guardar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setAddCompetencia(false);
|
||||
setValue("nuevaCompetencia", "");
|
||||
}}
|
||||
className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setAddCompetencia(true)}
|
||||
className="w-full bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-md mt-5"
|
||||
>
|
||||
Agregar competencia
|
||||
</Button>
|
||||
|
||||
<div className="flex justify-center w-full mt-5">
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Guardando..." : "Guardar curso"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,9 @@ export const alumnoSchema = z.object({
|
|||
.nonempty("Escribe el nombre")
|
||||
.regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en el nombre"),
|
||||
correo: z.string().email("Escribe un correo válido"),
|
||||
telefono: z
|
||||
.string()
|
||||
.nonempty("Escribe el número de teléfono")
|
||||
.regex(/^\d+$/, "Solo se permiten números en el teléfono"),
|
||||
cursoSeleccionado: z.string().nonempty("Selecciona un curso"),
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue