feat: add course selection to AlumnosVista and refactor cargarCursos function

diplomas/src/pages/alumnosVista.jsx

@@ -12,6 +12,14 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 
 export default function AlumnosVista() {
   const [alumnos, setAlumnos] = useState([]);
@@ -20,11 +28,24 @@ export default function AlumnosVista() {
   const [nuevoCorreo, setNuevoCorreo] = useState("");
   const [mostrarModal, setMostrarModal] = useState(false);
   const [modalMensaje, setModalMensaje] = useState("");
+  const [nuevoCurso, setNuevoCurso] = useState(""); 
+
+  const [cursos, setCursos] = useState([]);
 
   useEffect(() => {
     cargarAlumnos();
+    cargarCursos();
   }, []);
 
+  const cargarCursos = async () => {
+    const { data, error } = await supabaseClient.from("curso").select("*");
+    if (error) {
+      console.error("Error al cargar cursos:", error.message);
+    } else {
+      setCursos(data);
+    }
+  };
+
   const cargarAlumnos = async () => {
     const { data, error } = await supabaseClient.from("alumno").select("*");
     if (error) {
@@ -39,6 +60,7 @@ export default function AlumnosVista() {
     setAlumnoEditando(alumno.id);
     setNuevoNombre(alumno.nombre);
     setNuevoCorreo(alumno.correo);
+    setNuevoCurso(alumno.nombreCurso); // Asumiendo que tienes un campo cursoId en el alumno
   };
 
   // Cancelar edición
@@ -46,6 +68,7 @@ export default function AlumnosVista() {
     setAlumnoEditando(null);
     setNuevoNombre("");
     setNuevoCorreo("");
+    setNuevoCurso("");
   };
 
   // Guardar cambios
@@ -55,6 +78,7 @@ export default function AlumnosVista() {
       .update({
         nombre: nuevoNombre,
         correo: nuevoCorreo,
+        nombreCurso: nuevoCurso, // Asumiendo que tienes un campo cursoId en el alumno
       })
       .eq("id", id);
 
@@ -94,6 +118,7 @@ export default function AlumnosVista() {
               <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">Curso</th>
               <th className="py-2 border-b">Acciones</th>
             </tr>
           </thead>
@@ -118,6 +143,23 @@ export default function AlumnosVista() {
                       onChange={(e) => setNuevoCorreo(e.target.value)}
                     />
                   </td>
+                  <td className="py-2 px-4 border-b">
+                    <Select
+                      value={nuevoCurso}
+                      onValueChange={(value) => setNuevoCurso(value)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecciona un curso" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {cursos.map((curso) => (
+                          <SelectItem key={curso.id} value={curso.nombre}>
+                            {curso.nombre}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </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"
@@ -138,6 +180,7 @@ export default function AlumnosVista() {
                   <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.nombreCurso}</td>
                   <td className="py-2 px-4 border-b space-x-2">
                     <Button
                       className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"

diplomas/src/pages/cursosVista.jsx

@@ -3,7 +3,6 @@ import Layout from "@/components/layout/Layout";
 import { supabaseClient } from "@/utils/supabase";
 import {
   Dialog,
-  DialogTrigger,
   DialogContent,
   DialogHeader,
   DialogTitle,
@@ -22,20 +21,19 @@ export default function CursosVista() {
   const [mostrarModal, setMostrarModal] = useState(false);
   const [modalMensaje, setModalMensaje] = useState("");
 
-  // Cargar cursos al iniciar
   useEffect(() => {
-    const cargarCursos = async () => {
-      const { data, error } = await supabaseClient.from("curso").select("*");
-      if (error) {
-        console.error("Error al cargar cursos:", error.message);
-      } else {
-        setCursos(data);
-      }
-    };
     cargarCursos();
   }, []);
 
-  // Iniciar edición
+  const cargarCursos = async () => {
+    const { data, error } = await supabaseClient.from("curso").select("*");
+    if (error) {
+      console.error("Error al cargar cursos:", error.message);
+    } else {
+      setCursos(data);
+    }
+  };
+
   const iniciarEdicion = (curso) => {
     setCursoEditando(curso.id);
     setNuevoNombre(curso.nombre);
@@ -43,7 +41,6 @@ export default function CursosVista() {
     setNuevaHoras(curso.horas);
   };
 
-  // Cancelar edición
   const cancelarEdicion = () => {
     setCursoEditando(null);
     setNuevoNombre("");
@@ -51,7 +48,6 @@ export default function CursosVista() {
     setNuevaHoras("");
   };
 
-  // Guardar cambios
   const guardarEdicion = async (id) => {
     const { error } = await supabaseClient
       .from("curso")
@@ -67,106 +63,102 @@ export default function CursosVista() {
       setModalMensaje("Error al actualizar el curso");
     } else {
       setModalMensaje("Curso actualizado exitosamente");
-      // Recargar cursos
+      await cargarCursos();
-      const { data } = await supabaseClient.from("curso").select("*");
-      setCursos(data);
       cancelarEdicion();
     }
     setMostrarModal(true);
   };
 
+  const eliminarCurso = async (id) => {
+    const { error } = await supabaseClient.from("curso").delete().eq("id", id);
+    if (error) {
+      console.error("Error eliminando curso:", error.message);
+      setModalMensaje("Error al eliminar el curso");
+    } else {
+      setModalMensaje("Curso eliminado exitosamente");
+      await cargarCursos();
+    }
+    setMostrarModal(true);
+  };
+
   return (
     <Layout>
-      <div className="p-8">
+      <div className="w-[80vw] pt-10 flex flex-col items-center text-black">
-        <h1 className="text-3xl font-bold mb-6 text-center text-black">
+        <h1 className="text-2xl font-semibold mb-6">Lista de Cursos</h1>
-          Cursos
+        <table className="min-w-full bg-white border">
-        </h1>
+          <thead>
-        <div className="overflow-x-auto text-black">
+            <tr className="bg-gray-100">
-          <table className="min-w-full bg-white border">
+              <th className="py-2 border-b">ID</th>
-            <thead>
+              <th className="py-2 border-b">Nombre</th>
-              <tr className="bg-gray-100">
+              <th className="py-2 border-b">Descripción</th>
-                <th className="py-2 px-4 border-b">ID</th>
+              <th className="py-2 border-b">Horas</th>
-                <th className="py-2 px-4 border-b">Nombre</th>
+              <th className="py-2 border-b">Acciones</th>
-                <th className="py-2 px-4 border-b">Descripción</th>
+            </tr>
-                <th className="py-2 px-4 border-b">Horas</th>
+          </thead>
-                <th className="py-2 px-4 border-b">Acciones</th>
+          <tbody>
-              </tr>
+            {cursos.map((curso) =>
-            </thead>
+              cursoEditando === curso.id ? (
-            <tbody>
+                <tr key={curso.id}>
-              {cursos.map((curso) =>
+                  <td className="py-2 px-4 border-b text-center">{curso.id}</td>
-                cursoEditando === curso.id ? (
+                  <td className="py-2 px-4 border-b">
-                  <tr key={curso.id}>
+                    <Input
-                    <td className="py-2 px-4 border-b text-center">
+                      value={nuevoNombre}
-                      {curso.id}
+                      onChange={(e) => setNuevoNombre(e.target.value)}
-                    </td>
+                    />
-                    <td className="py-2 px-4 border-b">
+                  </td>
-                      <Input
+                  <td className="py-2 px-4 border-b">
-                        type="text"
+                    <Input
-                        value={nuevoNombre}
+                      value={nuevaDescripcion}
-                        onChange={(e) => setNuevoNombre(e.target.value)}
+                      onChange={(e) => setNuevaDescripcion(e.target.value)}
-                        className="border rounded px-2 py-1 w-full"
+                    />
-                      />
+                  </td>
-                    </td>
+                  <td className="py-2 px-4 border-b">
-                    <td className="py-2 px-4 border-b">
+                    <Input
-                      <Input
+                      type="number"
-                        type="text"
+                      value={nuevaHoras}
-                        value={nuevaDescripcion}
+                      onChange={(e) => setNuevaHoras(e.target.value)}
-                        onChange={(e) => setNuevaDescripcion(e.target.value)}
+                    />
-                        className="border rounded px-2 py-1 w-full"
+                  </td>
-                      />
+                  <td className="py-2 px-4 border-b flex justify-center">
-                    </td>
+                    <Button
-                    <td className="py-2 px-4 border-b">
+                      className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 m-2 rounded"
-                      <input
+                      onClick={() => guardarEdicion(curso.id)}
-                        type="number"
+                    >
-                        value={nuevaHoras}
+                      Guardar
-                        onChange={(e) => setNuevaHoras(e.target.value)}
+                    </Button>
-                        className="border rounded px-2 py-1 w-full"
+                    <Button
-                      />
+                      className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 m-2 rounded"
-                    </td>
+                      onClick={cancelarEdicion}
-                    <td className="py-2 px-4 border-b flex gap-2 justify-center">
+                    >
-                      <Button
+                      Cancelar
-                        className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 rounded"
+                    </Button>
-                        onClick={() => guardarEdicion(curso.id)}
+                  </td>
-                      >
+                </tr>
-                        Guardar
+              ) : (
-                      </Button>
+                <tr key={curso.id}>
-                      <Button
+                  <td className="py-2 px-4 border-b">{curso.id}</td>
-                        className="bg-gray-400 hover:bg-gray-600 text-white font-bold py-1 px-3 rounded"
+                  <td className="py-2 px-4 border-b">{curso.nombre}</td>
-                        onClick={cancelarEdicion}
+                  <td className="py-2 px-4 border-b">{curso.descripcion}</td>
-                      >
+                  <td className="py-2 px-4 border-b">{curso.horas}</td>
-                        Cancelar
+                  <td className="py-2 px-4 border-b space-x-2">
-                      </Button>
+                    <Button
-                    </td>
+                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
-                  </tr>
+                      onClick={() => iniciarEdicion(curso)}
-                ) : (
+                    >
-                  <tr key={curso.id}>
+                      Editar
-                    <td className="py-2 px-4 border-b text-center">
+                    </Button>
-                      {curso.id}
+                    <Button
-                    </td>
+                      className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
-                    <td className="py-2 px-4 border-b">{curso.nombre}</td>
+                      onClick={() => eliminarCurso(curso.id)}
-                    <td className="py-2 px-4 border-b">{curso.descripcion}</td>
+                    >
-                    <td className="py-2 px-4 border-b">{curso.horas}</td>
+                      Eliminar
-                    <td className="py-2 px-4 border-b text-center">
+                    </Button>
-                      <Button
+                  </td>
-                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
+                </tr>
-                        onClick={() => iniciarEdicion(curso)}
+              )
-                      >
+            )}
-                        Editar
+          </tbody>
-                      </Button>
+        </table>
-
-                      <Button
-                        className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
-                        
-                      >
-                        Eliminar
-                      </Button>
-                    </td>
-                  </tr>
-                )
-              )}
-            </tbody>
-          </table>
-        </div>
       </div>
 
       {/* Modal */}