diff --git a/diplomas/src/pages/alumnosManual.jsx b/diplomas/src/pages/alumnosManual.jsx index cb95f4c..8e9d090 100644 --- a/diplomas/src/pages/alumnosManual.jsx +++ b/diplomas/src/pages/alumnosManual.jsx @@ -9,16 +9,38 @@ import { SelectContent, SelectItem, } from "@/components/ui/select"; +import { + Dialog, + DialogTrigger, + DialogContent, + DialogHeader, + DialogTitle, + DialogFooter, +} from "@/components/ui/dialog"; import { supabaseClient } from "@/utils/supabase"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { alumnoSchema } from "@/schemas/AlumnosSchema"; export default function AlumnosManual() { - const [nombre, setNombre] = useState(""); - const [email, setEmail] = useState(""); - const [cursoSeleccionado, setCursoSeleccionado] = 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 useEffect(() => { @@ -36,24 +58,22 @@ export default function AlumnosManual() { }, []); // Guardar alumno - const manejarGuardar = async () => { + const manejarGuardar = async (data) => { try { - const { data, error } = await supabaseClient.from("alumno").insert([ + const { error } = await supabaseClient.from("alumno").insert([ { - nombre: nombre, - correo: email, + nombre: data.nombre, + correo: data.correo, + nombreCurso: data.cursoSeleccionado, // Guardar el nombre del curso }, ]); if (error) { 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 { - console.log("Alumno guardado:", data); - alert("Alumno guardado con éxito"); - setNombre(""); - setEmail(""); - setCursoSeleccionado(""); + setIsDialogOpen(true); // Mostrar el diálogo al guardar exitosamente + reset(); // Reiniciar el formulario } } catch (err) { console.error("Error inesperado:", err); @@ -67,47 +87,76 @@ export default function AlumnosManual() { <h1 className="text-xl font-semibold mb-4 text-black"> Nuevo alumno </h1> - <Input - type="text" - placeholder="Nombre" - value={nombre} - onChange={(e) => setNombre(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3" - /> - <Input - type="text" - placeholder="Email" - value={email} - onChange={(e) => setEmail(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3" - /> - <Select - onValueChange={(value) => setCursoSeleccionado(value)} - value={cursoSeleccionado} - > - <SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4"> - <SelectValue placeholder="Selecciona un curso" /> - </SelectTrigger> - <SelectContent> - {cursos.map((curso) => ( - <SelectItem key={curso.id} value={curso.id.toString()}> - {curso.nombre} - </SelectItem> - ))} - </SelectContent> - </Select> - - <Button - onClick={manejarGuardar} - className="bg-green-400 hover:bg-green-500 font-bold py-2 px-4 rounded-md text-black" - > - Guardar - </Button> + <form onSubmit={handleSubmit(manejarGuardar)}> + <div className="mb-3"> + <Input + type="text" + placeholder="Nombre" + {...register("nombre")} + className="w-full px-3 py-2 border border-gray-300 rounded-md" + /> + {errors.nombre && ( + <p className="text-red-500 text-sm mt-1"> + {errors.nombre.message} + </p> + )} + </div> + <div className="mb-3"> + <Input + type="text" + placeholder="Email" + {...register("correo")} + className="w-full px-3 py-2 border border-gray-300 rounded-md" + /> + {errors.correo && ( + <p className="text-red-500 text-sm mt-1"> + {errors.correo.message} + </p> + )} + </div> + <div className="mb-4"> + <Select + onValueChange={(value) => setValue("cursoSeleccionado", value)} + > + <SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md"> + <SelectValue placeholder="Selecciona un curso" /> + </SelectTrigger> + <SelectContent> + {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> - - + {/* 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> ); }