feat: add form validation schemas for alumnos and cursos, enhance UI with modals and input components

2025-05-03 20:35:14 -06:00 · 2025-05-03 20:35:14 -06:00 · d5140cbec2
parent 749798da29
commit d5140cbec2
8 changed files with 242 additions and 26 deletions
--- a/diplomas/package-lock.json
+++ b/diplomas/package-lock.json
@ -8,6 +8,7 @@
      "name": "diplomas",
      "version": "0.1.0",
      "dependencies": {
+        "@hookform/resolvers": "^5.0.1",
        "@radix-ui/react-dialog": "^1.1.11",
        "@radix-ui/react-label": "^2.1.4",
        "@radix-ui/react-select": "^2.1.7",
@ -25,8 +26,10 @@
        "papaparse": "^5.5.2",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.56.2",
        "tailwind-merge": "^3.2.0",
-        "tw-animate-css": "^1.2.5"
+        "tw-animate-css": "^1.2.5",
+        "zod": "^3.24.3"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
@ -252,6 +255,17 @@
      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
    },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.0.1.tgz",
+      "integrity": "sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@ -1961,6 +1975,11 @@
      "integrity": "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==",
      "dev": true
    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
+    },
    "node_modules/@supabase/auth-js": {
      "version": "2.69.1",
      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.69.1.tgz",
@ -5769,6 +5788,21 @@
        "react": "^19.1.0"
      }
    },
+    "node_modules/react-hook-form": {
+      "version": "7.56.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.2.tgz",
+      "integrity": "sha512-vpfuHuQMF/L6GpuQ4c3ZDo+pRYxIi40gQqsCmmfUBwm+oqvBhKhwghCuj2o00YCgSfU6bR9KC/xnQGWm3Gr08A==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -6881,6 +6915,14 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zod": {
+      "version": "3.24.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz",
+      "integrity": "sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
    }
  }
 }
--- a/diplomas/package.json
+++ b/diplomas/package.json
@ -9,6 +9,7 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
    "@radix-ui/react-dialog": "^1.1.11",
    "@radix-ui/react-label": "^2.1.4",
    "@radix-ui/react-select": "^2.1.7",
@ -26,8 +27,10 @@
    "papaparse": "^5.5.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.56.2",
    "tailwind-merge": "^3.2.0",
-    "tw-animate-css": "^1.2.5"
+    "tw-animate-css": "^1.2.5",
+    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
--- a/diplomas/src/components/app-sidebar.jsx
+++ b/diplomas/src/components/app-sidebar.jsx
@ -81,7 +81,7 @@ export function AppSidebar({ ...props }) {
            {data.navMain.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild>
-                  <a href={item.url} className="font-medium">
+                  <a href={item.url} className="text-xl font-medium">
                    {item.title}
                  </a>
                </SidebarMenuButton>
--- a/diplomas/src/pages/alumnosManual.jsx
+++ b/diplomas/src/pages/alumnosManual.jsx
@ -9,7 +9,10 @@ import {
  SelectContent,
  SelectItem,
 } from "@/components/ui/select";
-import { supabaseClient } from "@/util/supabase";
+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("");
@ -96,7 +99,7 @@ export default function AlumnosManual() {

          <Button
            onClick={manejarGuardar}
-            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md text-black"
+            className="bg-green-400 hover:bg-green-500 font-bold py-2 px-4 rounded-md text-black"
          >
            Guardar
          </Button>
--- a/diplomas/src/pages/alumnosVista.jsx
+++ b/diplomas/src/pages/alumnosVista.jsx
@ -1,9 +1,25 @@
 import React, { useEffect, useState } from "react";
 import Layout from "@/components/layout/Layout";
 import { supabaseClient } from "@/utils/supabase";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";

 export default function AlumnosVista() {
  const [alumnos, setAlumnos] = useState([]);
+  const [alumnoEditando, setAlumnoEditando] = useState(null);
+  const [nuevoNombre, setNuevoNombre] = useState("");
+  const [nuevoCorreo, setNuevoCorreo] = useState("");
+  const [mostrarModal, setMostrarModal] = useState(false);
+  const [modalMensaje, setModalMensaje] = useState("");

  useEffect(() => {
    const cargarAlumnos = async () => {
@ -17,6 +33,43 @@ export default function AlumnosVista() {
    cargarAlumnos();
  }, []);

+  // Iniciar edición
+  const iniciarEdicion = (alumno) => {
+    setAlumnoEditando(alumno.id);
+    setNuevoNombre(alumno.nombre);
+    setNuevoCorreo(alumno.correo);
+  };
+
+  // Cancelar edición
+  const cancelarEdicion = () => {
+    setAlumnoEditando(null);
+    setNuevoNombre("");
+    setNuevoCorreo("");
+  };
+
+  // Guardar cambios
+  const guardarEdicion = async (id) => {
+    const { error } = await supabaseClient
+      .from("alumno")
+      .update({
+        nombre: nuevoNombre,
+        correo: nuevoCorreo,
+      })
+      .eq("id", id);
+
+    if (error) {
+      console.error("Error actualizando alumno:", error.message);
+      setModalMensaje("Error al actualizar el alumno");
+    } else {
+      setModalMensaje("Alumno actualizado exitosamente");
+      // Recargar alumnos
+      const { data } = await supabaseClient.from("alumno").select("*");
+      setAlumnos(data);
+      cancelarEdicion();
+    }
+    setMostrarModal(true);
+  };
+
  return (
    <Layout>
      <div className="w-[80vw] pt-10 flex flex-col items-center text-black">
@ -26,22 +79,84 @@ export default function AlumnosVista() {
        <table className="min-w-full bg-white border">
          <thead>
            <tr>
-              <th className="py-2 px-4 border-b">ID</th>
-              <th className="py-2 px-4 border-b">Nombre</th>
-              <th className="py-2 px-4 border-b">Correo</th>
+              <th className="py-2 border-b">ID</th>
+              <th className="py-2 border-b">Nombre</th>
+              <th className="py-2 border-b">Correo</th>
+              <th className="py-2 border-b">Acciones</th>
            </tr>
          </thead>
          <tbody>
-            {alumnos.map((alumno) => (
-              <tr key={alumno.id}>
-                <td className="py-2 px-4 border-b text-center">{alumno.id}</td>
-                <td className="py-2 px-4 border-b">{alumno.nombre}</td>
-                <td className="py-2 px-4 border-b">{alumno.correo}</td>
-              </tr>
-            ))}
+            {alumnos.map((alumno) =>
+              alumnoEditando === alumno.id ? (
+                <tr key={alumno.id}>
+                  <td className="py-2 px-4 border-b text-center">
+                    {alumno.id}
+                  </td>
+                  <td className="py-2 px-4 border-b">
+                    <Input
+                      type="text"
+                      value={nuevoNombre}
+                      onChange={(e) => setNuevoNombre(e.target.value)}
+                      className="border rounded px-2 py-1 w-full"
+                    />
+                  </td>
+                  <td className="py-2 px-4 border-b">
+                    <Input
+                      type="email"
+                      value={nuevoCorreo}
+                      onChange={(e) => setNuevoCorreo(e.target.value)}
+                      className="border rounded px-2 py-1 w-full"
+                    />
+                  </td>
+                  <td className="py-2 px-4 border-b flex justify-center">
+                    <Button
+                      className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 m-2 rounded"
+                      onClick={() => guardarEdicion(alumno.id)}
+                    >
+                      Guardar
+                    </Button>
+                    <Button
+                      className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 m-2 rounded"
+                      onClick={cancelarEdicion}
+                    >
+                      Cancelar
+                    </Button>
+                  </td>
+                </tr>
+              ) : (
+                <tr key={alumno.id}>
+                  <td className="py-2 px-4 border-b">{alumno.id}</td>
+                  <td className="py-2 px-4 border-b">{alumno.nombre}</td>
+                  <td className="py-2 px-4 border-b">{alumno.correo}</td>
+                  <td className="py-2 px-4 border-b">
+                    <Button
+                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
+                      onClick={() => iniciarEdicion(alumno)}
+                    >
+                      Editar
+                    </Button>
+                  </td>
+                </tr>
+              )
+            )}
          </tbody>
        </table>
      </div>
+
+      {/* Modal */}
+      <Dialog open={mostrarModal} onOpenChange={setMostrarModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="text-black">
+              Resultado de la operación
+            </DialogTitle>
+            <DialogDescription>{modalMensaje}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setMostrarModal(false)}>Cerrar</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </Layout>
  );
 }
--- a/diplomas/src/pages/cursosVista.jsx
+++ b/diplomas/src/pages/cursosVista.jsx
@ -1,6 +1,17 @@
 import React, { useEffect, useState } from "react";
 import Layout from "@/components/layout/Layout";
 import { supabaseClient } from "@/utils/supabase";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";

 export default function CursosVista() {
  const [cursos, setCursos] = useState([]);
@ -8,6 +19,8 @@ export default function CursosVista() {
  const [nuevoNombre, setNuevoNombre] = useState("");
  const [nuevaDescripcion, setNuevaDescripcion] = useState("");
  const [nuevaHoras, setNuevaHoras] = useState("");
+  const [mostrarModal, setMostrarModal] = useState(false);
+  const [modalMensaje, setModalMensaje] = useState("");

  // Cargar cursos al iniciar
  useEffect(() => {
@ -40,7 +53,7 @@ export default function CursosVista() {

  // Guardar cambios
  const guardarEdicion = async (id) => {
-    const { data, error } = await supabaseClient
+    const { error } = await supabaseClient
      .from("curso")
      .update({
        nombre: nuevoNombre,
@ -51,14 +64,15 @@ export default function CursosVista() {

    if (error) {
      console.error("Error actualizando curso:", error.message);
-      alert("Error al actualizar el curso");
+      setModalMensaje("Error al actualizar el curso");
    } else {
-      alert("Curso actualizado exitosamente");
+      setModalMensaje("Curso actualizado exitosamente");
      // Recargar cursos
      const { data } = await supabaseClient.from("curso").select("*");
      setCursos(data);
      cancelarEdicion();
    }
+    setMostrarModal(true);
  };

  return (
@ -86,7 +100,7 @@ export default function CursosVista() {
                      {curso.id}
                    </td>
                    <td className="py-2 px-4 border-b">
-                      <input
+                      <Input
                        type="text"
                        value={nuevoNombre}
                        onChange={(e) => setNuevoNombre(e.target.value)}
@ -94,7 +108,7 @@ export default function CursosVista() {
                      />
                    </td>
                    <td className="py-2 px-4 border-b">
-                      <input
+                      <Input
                        type="text"
                        value={nuevaDescripcion}
                        onChange={(e) => setNuevaDescripcion(e.target.value)}
@ -110,18 +124,18 @@ export default function CursosVista() {
                      />
                    </td>
                    <td className="py-2 px-4 border-b flex gap-2 justify-center">
-                      <button
+                      <Button
                        className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 rounded"
                        onClick={() => guardarEdicion(curso.id)}
                      >
                        Guardar
-                      </button>
-                      <button
+                      </Button>
+                      <Button
                        className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 rounded"
                        onClick={cancelarEdicion}
                      >
                        Cancelar
-                      </button>
+                      </Button>
                    </td>
                  </tr>
                ) : (
@ -133,12 +147,12 @@ export default function CursosVista() {
                    <td className="py-2 px-4 border-b">{curso.descripcion}</td>
                    <td className="py-2 px-4 border-b">{curso.horas}</td>
                    <td className="py-2 px-4 border-b text-center">
-                      <button
+                      <Button
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
                        onClick={() => iniciarEdicion(curso)}
                      >
                        Editar
-                      </button>
+                      </Button>
                    </td>
                  </tr>
                )
@ -147,6 +161,21 @@ export default function CursosVista() {
          </table>
        </div>
      </div>
+
+      {/* Modal */}
+      <Dialog open={mostrarModal} onOpenChange={setMostrarModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="text-black">
+              Resultado de la operación
+            </DialogTitle>
+            <DialogDescription>{modalMensaje}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setMostrarModal(false)}>Cerrar</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </Layout>
  );
 }
--- a/diplomas/src/schemas/AlumnosSchema.js
+++ b/diplomas/src/schemas/AlumnosSchema.js
@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const alumnoSchema = z.object({
+  nombre: z
+    .string()
+    .nonempty("Escribe el nombre")
+    .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en el nombre"),
+  correo: z.string().email("Escribe un correo válido"),
+  cursoSeleccionado: z.string().nonempty("Selecciona un curso"),
+});
--- a/diplomas/src/schemas/CursosSchema.js
+++ b/diplomas/src/schemas/CursosSchema.js
@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const cursosSchema = z.object({
+  nombre: z
+    .string()
+    .nonempty("Escribe el nombre del curso")
+    .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en el nombre"),
+  descripcion: z.string().nonempty("Escribe una descripción"),
+  horas: z.number().positive("Las horas deben ser un número positivo"),
+  competencias: z
+    .string()
+    .nonempty("Escribe las competencias")
+    .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en las competencias"),
+});