feat: refactor CursosManual component to use react-hook-form for form handling and add competencia management
This commit is contained in:
parent
9b5d6c3934
commit
a7739f5f75
diplomas/src
|
@ -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>
|
||||||
|
|
|
@ -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"),
|
||||||
|
|
Loading…
Reference in New Issue