feat: implement form validation and dialog confirmation in AlumnosManual
This commit is contained in:
parent
be59d7ecc4
commit
a559ed16f1
diplomas/src/pages
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue