feat: refactor CursosManual component to use react-hook-form for form handling and add competencia management

This commit is contained in:
SirRobert-1 2025-05-07 08:19:19 -06:00
parent 9b5d6c3934
commit a7739f5f75
2 changed files with 191 additions and 70 deletions
diplomas/src

View File

@ -1,88 +1,209 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { supabaseClient } from "@/utils/supabase"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { cursosSchema } from "@/schemas/CursosSchema";
import Layout from "@/components/layout/Layout"; import Layout from "@/components/layout/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { import { supabaseClient } from "@/utils/supabase"; // Importar el cliente de Supabase
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/ui/select";
export default function CursosManual() { export default function CursosManual() {
const [nombre, setNombre] = useState(""); const [addCompetencia, setAddCompetencia] = useState(false);
const [descripcion, setDescripcion] = useState(""); const [competenciasGuardadas, setCompetenciasGuardadas] = useState([]);
const [horas, setHoras] = useState("");
const [competencia, setCompetencia] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const manejarGuardar = async () => { const form = useForm({
setLoading(true); resolver: zodResolver(cursosSchema),
const { error } = await supabaseClient.from("curso").insert([ defaultValues: {
{ nombre: "",
nombre, descripcion: "",
descripcion, horas: 0,
horas, nuevaCompetencia: "",
competencias: [competencia], // si es una sola, usa string. Si son varias, un array. },
}, });
]);
setLoading(false);
if (error) { const {
alert("Error al guardar: " + error.message); register,
} else { handleSubmit,
alert("Curso guardado correctamente"); setValue,
setNombre(""); getValues,
setDescripcion(""); formState: { errors },
setHoras(""); } = form;
setCompetencia("");
const handleAddCompetencia = () => {
setAddCompetencia(true);
};
const handleCancel = () => {
setAddCompetencia(false);
setValue("nuevaCompetencia", "");
};
const handleSaveCompetencia = (e) => {
e.preventDefault();
const nuevaCompetencia = getValues("nuevaCompetencia");
if (nuevaCompetencia.trim() !== "") {
setCompetenciasGuardadas([
...competenciasGuardadas,
nuevaCompetencia.trim(),
]);
handleCancel();
}
};
const handleDeleteCompetencia = (index) => {
setCompetenciasGuardadas(
competenciasGuardadas.filter((_, i) => i !== index)
);
};
const onSubmit = async (data) => {
const { nombre, descripcion } = data;
const horas = parseInt(data.horas, 10); // Convertir horas a número
const competencias = competenciasGuardadas;
setLoading(true); // Mostrar estado de carga
try {
const { error } = await supabaseClient.from("curso").insert([
{
nombre,
descripcion,
horas,
competencias, // Guardar competencias como array
},
]);
if (error) {
console.error("Error al guardar en Supabase:", error.message);
alert("Error al guardar el curso: " + error.message);
} else {
alert("Curso guardado exitosamente");
form.reset(); // Reiniciar el formulario
setCompetenciasGuardadas([]); // Limpiar competencias guardadas
}
} catch (err) {
console.error("Error inesperado:", err);
alert("Ocurrió un error inesperado");
} finally {
setLoading(false); // Ocultar estado de carga
} }
}; };
return ( return (
<Layout> <Layout>
<div className="w-[60vw] pt-10 flex flex-col items-end justify-center"> <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%]"> <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> <h1 className="text-xl font-semibold mb-4 text-black">Nuevo curso</h1>
<Input <form onSubmit={handleSubmit(onSubmit)} className="w-full">
type="text" <Input
placeholder="Nombre del curso" type="text"
value={nombre} placeholder="Nombre del curso"
onChange={(e) => setNombre(e.target.value)} {...register("nombre")}
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black" className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
/> />
<Textarea {errors.nombre && (
placeholder="Descripción" <p className="text-red-500 text-sm">{errors.nombre.message}</p>
value={descripcion} )}
onChange={(e) => setDescripcion(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black" <Textarea
/> placeholder="Descripción"
<Input {...register("descripcion")}
type="number" className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
placeholder="Horas del curso" />
value={horas} {errors.descripcion && (
onChange={(e) => setHoras(e.target.value)} <p className="text-red-500 text-sm">
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black" {errors.descripcion.message}
/> </p>
<Select onValueChange={(value) => setCompetencia(value)}> )}
<SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4 text-black">
<SelectValue placeholder="Competencia" /> <Input
</SelectTrigger> type="number"
<SelectContent> placeholder="Horas del curso"
<SelectItem value="competencia1">Competencia 1</SelectItem> {...register("horas", { valueAsNumber: true })}
<SelectItem value="competencia2">Competencia 2</SelectItem> className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
</SelectContent> />
</Select> {errors.horas && (
<Button <p className="text-red-500 text-sm">{errors.horas.message}</p>
onClick={manejarGuardar} )}
className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md text-black"
disabled={loading} <h2 className="text-lg font-semibold mb-3 text-black">
> Competencias
{loading ? "Guardando..." : "Guardar"} </h2>
</Button>
{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>
</div> </div>
</div> </div>
</Layout> </Layout>

View File

@ -6,8 +6,8 @@ export const cursosSchema = z.object({
.nonempty("Escribe el nombre del curso") .nonempty("Escribe el nombre del curso")
.regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en el nombre"), .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en el nombre"),
descripcion: z.string().nonempty("Escribe una descripción"), descripcion: z.string().nonempty("Escribe una descripción"),
horas: z.number().positive("Las horas deben ser un número positivo"), horas: z.number().positive("Las horas deben ser un número positivo").int(),
competencias: z nuevaCompetencia: z
.string() .string()
.nonempty("Escribe las competencias") .nonempty("Escribe las competencias")
.regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en las competencias"), .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en las competencias"),