Merge branch 'benito' of https://git.gumoio.com/benito.rodriguez/SIDAC into roberto
This commit is contained in:
SirRobert-1
commit
e9b43a3e0d
diplomas/src/pages
|
|
@ -3,43 +3,140 @@ import Layout from "@/components/layout/Layout";
|
|||
import { supabase } from "@/lib/supabaseClient";
|
||||
|
||||
export default function CursosVista() {
|
||||
const [cursos, setCursos] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const cargarCursos = async () => {
|
||||
const { data, error } = await supabase.from("curso").select("*");
|
||||
const [cursos, setCursos] = useState([]);
|
||||
const [cursoEditando, setCursoEditando] = useState(null);
|
||||
const [nuevoNombre, setNuevoNombre] = useState("");
|
||||
const [nuevaDescripcion, setNuevaDescripcion] = useState("");
|
||||
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>
|
||||
<div className="w-[80vw] pt-10 flex flex-col items-center text-black">
|
||||
<h1 className="text-2xl font-semibold mb-6 text-black">Lista de Cursos</h1>
|
||||
<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">Descripción</th>
|
||||
</tr>
|
||||
</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>
|
||||
|
||||
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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue