From 814354baacb1891b9d2c4a10ada4134fba39156d Mon Sep 17 00:00:00 2001
From: BenitoBB <benitorodriguezmartinez24@gmail.com>
Date: Fri, 13 Jun 2025 16:57:54 -0600
Subject: [PATCH] feat: implement editing functionality for alumnos in
 AlumnosVista with improved UI for form inputs

---
 diplomas/src/pages/alumnosVista.jsx | 170 ++++++++++++++++++++--------
 1 file changed, 124 insertions(+), 46 deletions(-)

diff --git a/diplomas/src/pages/alumnosVista.jsx b/diplomas/src/pages/alumnosVista.jsx
index 9093e69..a9f7b11 100644
--- a/diplomas/src/pages/alumnosVista.jsx
+++ b/diplomas/src/pages/alumnosVista.jsx
@@ -44,15 +44,7 @@ export default function AlumnosVista() {
 
   useEffect(() => {
     cargarAlumnos();
-    cargarCursos();
-    supabaseClient
-      .from("pildoras")
-      .select("id, nombre")
-      .then(({ data }) => setPildoras(data || []));
-    supabaseClient
-      .from("inyeccion")
-      .select("id, nombre")
-      .then(({ data }) => setInyecciones(data || []));
+    // ...cargar cursos, inyecciones, pildoras...
   }, []);
 
   const cargarCursos = async () => {
@@ -74,11 +66,11 @@ export default function AlumnosVista() {
         telefono,
         tipo_formacion,
         curso_id,
-        curso(id, nombre),
+        curso(nombre),
         inyeccion_id,
-        inyeccion(id, nombre),
+        inyeccion(nombre),
         pildoras_id,
-        pildoras(id, nombre)
+        pildoras(nombre)
       `)
       .order("id", { ascending: true });
     setAlumnos(data || []);
@@ -185,7 +177,7 @@ export default function AlumnosVista() {
         <div className="overflow-x-auto w-full">
           <table className="min-w-full bg-white border">
             <thead>
-              <tr className="bg-gray-100">
+              <tr className="bg-gray-100 text-black">
                 <th className="py-2 border-b">ID</th>
                 <th className="py-2 border-b">Nombre</th>
                 <th className="py-2 border-b">Correo</th>
@@ -196,39 +188,125 @@ export default function AlumnosVista() {
               </tr>
             </thead>
             <tbody>
-              {alumnos.map((alumno) => (
-                <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">{alumno.telefono}</td>
-                  <td className="py-2 px-4 border-b">
-                    {alumno.tipo_formacion === "curso"
-                      ? "Curso"
-                      : alumno.tipo_formacion === "inyeccion"
-                      ? "Inyección"
-                      : alumno.tipo_formacion === "pildora"
-                      ? "Píldora"
-                      : ""}
-                  </td>
-                  <td className="py-2 px-4 border-b">
-                    {alumno.tipo_formacion === "curso" && alumno.curso?.nombre}
-                    {alumno.tipo_formacion === "inyeccion" && alumno.inyeccion?.nombre}
-                    {alumno.tipo_formacion === "pildora" && alumno.pildoras?.nombre}
-                  </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={() => {
-                        setAlumnoSeleccionado(alumno);
-                        setMostrarDialog(true);
-                      }}
-                    >
-                      Crear Diploma
-                    </Button>
-                  </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 value={nuevoNombre} onChange={e => setNuevoNombre(e.target.value)} className="border rounded px-2 py-1 text-black" />
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <input value={nuevoCorreo} onChange={e => setNuevoCorreo(e.target.value)} className="border rounded px-2 py-1 text-black" />
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <input value={nuevoNumero} onChange={e => setNuevoNumero(e.target.value)} className="border rounded px-2 py-1 text-black" />
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <select
+                        value={nuevoTipo}
+                        onChange={e => {
+                          setNuevoTipo(e.target.value);
+                          setNuevaFormacion("");
+                        }}
+                        className="border rounded px-2 py-1 text-black"
+                      >
+                        <option value="">Selecciona tipo</option>
+                        <option value="curso">Curso</option>
+                        <option value="inyeccion">Inyección</option>
+                        <option value="pildora">Píldora</option>
+                      </select>
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      {nuevoTipo === "curso" && (
+                        <select
+                          value={nuevaFormacion}
+                          onChange={e => setNuevaFormacion(e.target.value)}
+                          className="border rounded px-2 py-1 text-black"
+                          required
+                        >
+                          <option value="">Selecciona curso</option>
+                          {cursos.map(curso => (
+                            <option key={curso.id} value={curso.id}>
+                              {curso.nombre}
+                            </option>
+                          ))}
+                        </select>
+                      )}
+                      {nuevoTipo === "inyeccion" && (
+                        <select
+                          value={nuevaFormacion}
+                          onChange={e => setNuevaFormacion(e.target.value)}
+                          className="border rounded px-2 py-1 text-black"
+                          required
+                        >
+                          <option value="">Selecciona inyección</option>
+                          {inyecciones.map(inyeccion => (
+                            <option key={inyeccion.id} value={inyeccion.id}>
+                              {inyeccion.nombre}
+                            </option>
+                          ))}
+                        </select>
+                      )}
+                      {nuevoTipo === "pildora" && (
+                        <select
+                          value={nuevaFormacion}
+                          onChange={e => setNuevaFormacion(e.target.value)}
+                          className="border rounded px-2 py-1 text-black"
+                          required
+                        >
+                          <option value="">Selecciona píldora</option>
+                          {pildoras.map(pildora => (
+                            <option key={pildora.id} value={pildora.id}>
+                              {pildora.nombre}
+                            </option>
+                          ))}
+                        </select>
+                      )}
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <button onClick={() => guardarEdicion(alumno.id)} className="bg-green-500 hover:bg-green-700 text-white px-3 py-1 rounded mr-2">Guardar</button>
+                      <button onClick={() => setAlumnoEditando(null)} className="bg-gray-400 hover:bg-gray-600 text-white px-3 py-1 rounded">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">{alumno.telefono}</td>
+                    <td className="py-2 px-4 border-b">
+                      {alumno.tipo_formacion === "curso"
+                        ? "Curso"
+                        : alumno.tipo_formacion === "inyeccion"
+                        ? "Inyección"
+                        : alumno.tipo_formacion === "pildora"
+                        ? "Píldora"
+                        : ""}
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      {alumno.tipo_formacion === "curso" && alumno.curso?.nombre}
+                      {alumno.tipo_formacion === "inyeccion" && alumno.inyeccion?.nombre}
+                      {alumno.tipo_formacion === "pildora" && alumno.pildoras?.nombre}
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <button
+                        onClick={() => iniciarEdicion(alumno)}
+                        className="bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded mr-2"
+                      >
+                        Editar
+                      </button>
+                      <button
+                        onClick={() => eliminarAlumno(alumno.id)}
+                        className="bg-red-500 hover:bg-red-700 text-white px-3 py-1 rounded"
+                      >
+                        Eliminar
+                      </button>
+                    </td>
+                  </tr>
+                )
+              )}
             </tbody>
           </table>
         </div>