feat: add course selection to AlumnosVista and refactor cargarCursos function
This commit is contained in:
BenitoBB
parent
3d5152317f
commit
843ef4737f
diplomas/src/pages
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
const { data } = await supabaseClient.from("curso").select("*");
|
||||
setCursos(data);
|
||||
await cargarCursos();
|
||||
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">
|
||||
<h1 className="text-3xl font-bold mb-6 text-center text-black">
|
||||
Cursos
|
||||
</h1>
|
||||
<div className="overflow-x-auto text-black">
|
||||
<table className="min-w-full bg-white border">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<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">Descripción</th>
|
||||
<th className="py-2 px-4 border-b">Horas</th>
|
||||
<th className="py-2 px-4 border-b">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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>
|
||||
|
||||
<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 className="w-[80vw] pt-10 flex flex-col items-center text-black">
|
||||
<h1 className="text-2xl font-semibold mb-6">Lista de Cursos</h1>
|
||||
<table className="min-w-full bg-white border">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="py-2 border-b">ID</th>
|
||||
<th className="py-2 border-b">Nombre</th>
|
||||
<th className="py-2 border-b">Descripción</th>
|
||||
<th className="py-2 border-b">Horas</th>
|
||||
<th className="py-2 border-b">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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
|
||||
value={nuevoNombre}
|
||||
onChange={(e) => setNuevoNombre(e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<Input
|
||||
value={nuevaDescripcion}
|
||||
onChange={(e) => setNuevaDescripcion(e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<Input
|
||||
type="number"
|
||||
value={nuevaHoras}
|
||||
onChange={(e) => setNuevaHoras(e.target.value)}
|
||||
/>
|
||||
</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(curso.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={curso.id}>
|
||||
<td className="py-2 px-4 border-b">{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 space-x-2">
|
||||
<Button
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
|
||||
onClick={() => iniciarEdicion(curso)}
|
||||
>
|
||||
Editar
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
|
||||
onClick={() => eliminarCurso(curso.id)}
|
||||
>
|
||||
Eliminar
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue