feat: implement form validation and dialog confirmation in AlumnosManual

This commit is contained in:
SirRobert-1 2025-05-05 08:40:07 -06:00
parent be59d7ecc4
commit a559ed16f1
1 changed files with 100 additions and 51 deletions
diplomas/src/pages

View File

@ -9,16 +9,38 @@ import {
SelectContent, SelectContent,
SelectItem, SelectItem,
} from "@/components/ui/select"; } from "@/components/ui/select";
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import { supabaseClient } from "@/utils/supabase"; import { supabaseClient } from "@/utils/supabase";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { alumnoSchema } from "@/schemas/AlumnosSchema"; import { alumnoSchema } from "@/schemas/AlumnosSchema";
export default function AlumnosManual() { export default function AlumnosManual() {
const [nombre, setNombre] = useState("");
const [email, setEmail] = useState("");
const [cursoSeleccionado, setCursoSeleccionado] = useState("");
const [cursos, setCursos] = useState([]); const [cursos, setCursos] = useState([]);
const [isDialogOpen, setIsDialogOpen] = useState(false); // Estado para controlar el diálogo
// Configurar React Hook Form con zod
const {
register,
handleSubmit,
setValue,
formState: { errors },
reset,
} = useForm({
resolver: zodResolver(alumnoSchema),
defaultValues: {
nombre: "",
correo: "",
cursoSeleccionado: "",
},
});
// Cargar cursos al iniciar el componente // Cargar cursos al iniciar el componente
useEffect(() => { useEffect(() => {
@ -36,24 +58,22 @@ export default function AlumnosManual() {
}, []); }, []);
// Guardar alumno // Guardar alumno
const manejarGuardar = async () => { const manejarGuardar = async (data) => {
try { try {
const { data, error } = await supabaseClient.from("alumno").insert([ const { error } = await supabaseClient.from("alumno").insert([
{ {
nombre: nombre, nombre: data.nombre,
correo: email, correo: data.correo,
nombreCurso: data.cursoSeleccionado, // Guardar el nombre del curso
}, },
]); ]);
if (error) { if (error) {
console.error("Error al guardar:", error.message); console.error("Error al guardar:", error.message);
alert("Error al guardar: " + error.message); setIsDialogOpen(false); // Asegurarse de cerrar el diálogo en caso de error
} else { } else {
console.log("Alumno guardado:", data); setIsDialogOpen(true); // Mostrar el diálogo al guardar exitosamente
alert("Alumno guardado con éxito"); reset(); // Reiniciar el formulario
setNombre("");
setEmail("");
setCursoSeleccionado("");
} }
} catch (err) { } catch (err) {
console.error("Error inesperado:", err); console.error("Error inesperado:", err);
@ -67,47 +87,76 @@ export default function AlumnosManual() {
<h1 className="text-xl font-semibold mb-4 text-black"> <h1 className="text-xl font-semibold mb-4 text-black">
Nuevo alumno Nuevo alumno
</h1> </h1>
<Input <form onSubmit={handleSubmit(manejarGuardar)}>
type="text" <div className="mb-3">
placeholder="Nombre" <Input
value={nombre} type="text"
onChange={(e) => setNombre(e.target.value)} placeholder="Nombre"
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3" {...register("nombre")}
/> className="w-full px-3 py-2 border border-gray-300 rounded-md"
<Input />
type="text" {errors.nombre && (
placeholder="Email" <p className="text-red-500 text-sm mt-1">
value={email} {errors.nombre.message}
onChange={(e) => setEmail(e.target.value)} </p>
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3" )}
/> </div>
<Select <div className="mb-3">
onValueChange={(value) => setCursoSeleccionado(value)} <Input
value={cursoSeleccionado} type="text"
> placeholder="Email"
<SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4"> {...register("correo")}
<SelectValue placeholder="Selecciona un curso" /> className="w-full px-3 py-2 border border-gray-300 rounded-md"
</SelectTrigger> />
<SelectContent> {errors.correo && (
{cursos.map((curso) => ( <p className="text-red-500 text-sm mt-1">
<SelectItem key={curso.id} value={curso.id.toString()}> {errors.correo.message}
{curso.nombre} </p>
</SelectItem> )}
))} </div>
</SelectContent> <div className="mb-4">
</Select> <Select
onValueChange={(value) => setValue("cursoSeleccionado", value)}
<Button >
onClick={manejarGuardar} <SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md">
className="bg-green-400 hover:bg-green-500 font-bold py-2 px-4 rounded-md text-black" <SelectValue placeholder="Selecciona un curso" />
> </SelectTrigger>
Guardar <SelectContent>
</Button> {cursos.map((curso) => (
<SelectItem key={curso.id} value={curso.nombre}>
{curso.nombre}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.cursoSeleccionado && (
<p className="text-red-500 text-sm mt-1">
{errors.cursoSeleccionado.message}
</p>
)}
</div>
<Button
type="submit"
className="bg-green-400 hover:bg-green-500 font-bold py-2 px-4 rounded-md text-black"
>
Guardar
</Button>
</form>
</div> </div>
</div> </div>
{/* Diálogo de confirmación */}
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle className="text-black">Alumno guardado</DialogTitle>
</DialogHeader>
<p className="text-black">El alumno ha sido guardado exitosamente.</p>
<DialogFooter>
<Button onClick={() => setIsDialogOpen(false)}>Cerrar</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</Layout> </Layout>
); );
} }