Merge branch 'benito' of https://git.gumoio.com/benito.rodriguez/SIDAC into roberto

diplomas/src/pages/cursosVista.jsx

@@ -3,43 +3,140 @@ import Layout from "@/components/layout/Layout";
 import { supabase } from "@/lib/supabaseClient";
 
 export default function CursosVista() {
-  const [cursos, setCursos] = useState([]);
+    const [cursos, setCursos] = useState([]);
-
+    const [cursoEditando, setCursoEditando] = useState(null);
-  useEffect(() => {
+    const [nuevoNombre, setNuevoNombre] = useState("");
-    const cargarCursos = async () => {
+    const [nuevaDescripcion, setNuevaDescripcion] = useState("");
-      const { data, error } = await supabase.from("curso").select("*");
+    const [nuevaHoras, setNuevaHoras] = useState(""); 
+  
+    // Cargar cursos al iniciar
+    useEffect(() => {
+      const cargarCursos = async () => {
+        const { data, error } = await supabase.from("curso").select("*");
+        if (error) {
+          console.error("Error al cargar cursos:", error.message);
+        } else {
+          setCursos(data);
+        }
+      };
+      cargarCursos();
+    }, []);
+  
+    // Iniciar edición
+    const iniciarEdicion = (curso) => {
+      setCursoEditando(curso.id);
+      setNuevoNombre(curso.nombre);
+      setNuevaDescripcion(curso.descripcion);
+      setNuevaHoras(curso.horas); 
+    };
+  
+    // Cancelar edición
+    const cancelarEdicion = () => {
+      setCursoEditando(null);
+      setNuevoNombre("");
+      setNuevaDescripcion("");
+      setNuevaHoras("");
+    };
+  
+    // Guardar cambios
+    const guardarEdicion = async (id) => {
+      const { data, error } = await supabase
+        .from("curso")
+        .update({ nombre: nuevoNombre, descripcion: nuevaDescripcion, horas: nuevaHoras }) 
+        .eq("id", id);
+  
       if (error) {
-        console.error("Error al cargar cursos:", error.message);
+        console.error("Error actualizando curso:", error.message);
+        alert("Error al actualizar el curso");
       } else {
+        alert("Curso actualizado exitosamente");
+        // Recargar cursos
+        const { data } = await supabase.from("curso").select("*");
         setCursos(data);
+        cancelarEdicion();
       }
     };
-    cargarCursos();
+  
-  }, []);
+    return (
-
+      <Layout>
-  return (
+      <div className="p-8">
-    <Layout>
+        <h1 className="text-3xl font-bold mb-6 text-center text-black">Cursos</h1>
-      <div className="w-[80vw] pt-10 flex flex-col items-center text-black">
+        <div className="overflow-x-auto text-black">
-        <h1 className="text-2xl font-semibold mb-6 text-black">Lista de Cursos</h1>
+          <table className="min-w-full bg-white border">
-        <table className="min-w-full bg-white border">
+            <thead>
-          <thead>
+              <tr className="bg-gray-100">
-            <tr>
+                <th className="py-2 px-4 border-b">ID</th>
-              <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">Nombre</th>
+                <th className="py-2 px-4 border-b">Descripción</th>
-              <th className="py-2 px-4 border-b">Descripción</th>
+                <th className="py-2 px-4 border-b">Horas</th>
-            </tr>
+                <th className="py-2 px-4 border-b">Acciones</th>
-          </thead>
-          <tbody>
-            {cursos.map((curso) => (
-              <tr key={curso.id}>
-                <td className="py-2 px-4 border-b text-center">{curso.id}</td>
-                <td className="py-2 px-4 border-b">{curso.nombre}</td>
-                <td className="py-2 px-4 border-b">{curso.descripcion}</td>
               </tr>
-            ))}
+            </thead>
-          </tbody>
+            <tbody>
-        </table>
+              {cursos.map((curso) =>
+                cursoEditando === curso.id ? (
+                  <tr key={curso.id}>
+                    <td className="py-2 px-4 border-b text-center">{curso.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="text"
+                        value={nuevaDescripcion}
+                        onChange={(e) => setNuevaDescripcion(e.target.value)}
+                        className="border rounded px-2 py-1 w-full"
+                      />
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <input
+                        type="number"
+                        value={nuevaHoras}
+                        onChange={(e) => setNuevaHoras(e.target.value)}
+                        className="border rounded px-2 py-1 w-full"
+                      />
+                    </td>
+                    <td className="py-2 px-4 border-b flex gap-2 justify-center">
+                      <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
+                        className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 rounded"
+                        onClick={cancelarEdicion}
+                      >
+                        Cancelar
+                      </button>
+                    </td>
+                  </tr>
+                ) : (
+                  <tr key={curso.id}>
+                    <td className="py-2 px-4 border-b text-center">{curso.id}</td>
+                    <td className="py-2 px-4 border-b">{curso.nombre}</td>
+                    <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
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
+                        onClick={() => iniciarEdicion(curso)}
+                      >
+                        Editar
+                      </button>
+                    </td>
+                  </tr>
+                )
+              )}
+            </tbody>
+          </table>
+        </div>
       </div>
-    </Layout>
+      </Layout>
-  );
+    );
-}
+  }