benito.rodriguez
/
SIDAC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add telefono field to AlumnosManual and AlumnosVista, update CursosVista to include competencias in course data

This commit is contained in:
BenitoBB 2025-05-12 08:47:29 -06:00
parent 502dc21401
commit 30dffd85e1
3 changed files with 67 additions and 12 deletions

15
diplomas/src/pages/alumnosManual.jsx
View File

@ -38,6 +38,7 @@ export default function AlumnosManual() {
defaultValues: {
nombre: "",
correo: "",
telefono: "",
cursoSeleccionado: "",
},
});
@ -64,6 +65,7 @@ export default function AlumnosManual() {
{
nombre: data.nombre,
correo: data.correo,
telefono: data.telefono,
nombreCurso: data.cursoSeleccionado, // Guardar el nombre del curso
},
]);
@ -114,6 +116,19 @@ export default function AlumnosManual() {
</p>
)}
</div>
<div className="mb-3">
<Input
type="text"
placeholder="Teléfono"
{...register("telefono")}
className="w-full px-3 py-2 border border-gray-300 rounded-md"
/>
{errors.telefono && (
<p className="text-red-500 text-sm mt-1">
{errors.telefono.message}
</p>
)}
</div>
<div className="mb-4">
<Select
onValueChange={(value) => setValue("cursoSeleccionado", value)}

27
diplomas/src/pages/alumnosVista.jsx
View File

@ -19,12 +19,14 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { set } from "react-hook-form";
export default function AlumnosVista() {
const [alumnos, setAlumnos] = useState([]);
const [alumnoEditando, setAlumnoEditando] = useState(null);
const [nuevoNombre, setNuevoNombre] = useState("");
const [nuevoCorreo, setNuevoCorreo] = useState("");
const [nuevoNumero, setNuevoNumero] = useState("");
const [mostrarModal, setMostrarModal] = useState(false);
const [modalMensaje, setModalMensaje] = useState("");
const [nuevoCurso, setNuevoCurso] = useState("");
@ -49,7 +51,10 @@ export default function AlumnosVista() {
};
const cargarAlumnos = async () => {
const { data, error } = await supabaseClient.from("alumno").select("*");
const { data, error } = await supabaseClient
.from("alumno")
.select("id, nombre, correo, telefono, curso_id, curso(nombre)")
.order("id", { ascending: true });
if (error) {
console.error("Error al cargar alumnos:", error.message);
} else {
@ -62,7 +67,8 @@ export default function AlumnosVista() {
setAlumnoEditando(alumno.id);
setNuevoNombre(alumno.nombre);
setNuevoCorreo(alumno.correo);
setNuevoCurso(alumno.nombreCurso);
setNuevoNumero(alumno.telefono);
setNuevoCurso(alumno.curso_id);
};
// Cancelar edición
@ -70,6 +76,7 @@ export default function AlumnosVista() {
setAlumnoEditando(null);
setNuevoNombre("");
setNuevoCorreo("");
setNuevoNumero("");
setNuevoCurso("");
};
@ -80,7 +87,8 @@ export default function AlumnosVista() {
.update({
nombre: nuevoNombre,
correo: nuevoCorreo,
nombreCurso: nuevoCurso,
telefono: nuevoNumero,
curso_id: nuevoCurso,
})
.eq("id", id);
@ -127,6 +135,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">Teléfono</th>
<th className="py-2 border-b">Curso</th>
<th className="py-2 border-b">Acciones</th>
</tr>
@ -152,6 +161,13 @@ export default function AlumnosVista() {
onChange={(e) => setNuevoCorreo(e.target.value)}
/>
</td>
<td className="py-2 px-4 border-b">
<Input
type="text"
value={nuevoNumero}
onChange={(e) => setNuevoNumero(e.target.value)}
/>
</td>
<td className="py-2 px-4 border-b">
<Select
value={nuevoCurso}
@ -162,7 +178,7 @@ export default function AlumnosVista() {
</SelectTrigger>
<SelectContent>
{cursos.map((curso) => (
<SelectItem key={curso.id} value={curso.nombre}>
<SelectItem key={curso.id} value={curso.id.toString()}>
{curso.nombre}
</SelectItem>
))}
@ -189,7 +205,8 @@ 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">{alumno.telefono}</td>
<td className="py-2 px-4 border-b">{alumno.curso?.nombre || "Sin curso"}</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"

37
diplomas/src/pages/cursosVista.jsx
View File

@ -31,11 +31,30 @@ export default function CursosVista() {
}, []);
const cargarCursos = async () => {
const { data, error } = await supabaseClient.from("curso").select("*");
const { data, error } = await supabaseClient
.from("curso")
.select(`
id,
nombre,
descripcion,
horas,
curso_competencia (
competencia (
id,
nombre
)
)
`)
.order("id", { ascending: true });
if (error) {
console.error("Error al cargar cursos:", error.message);
} else {
setCursos(data);
// Transformar los datos para que las competencias estén directamente en el objeto curso
const cursosConCompetencias = data.map((curso) => ({
...curso,
competencias: curso.curso_competencia.map((cc) => cc.competencia),
}));
setCursos(cursosConCompetencias);
}
};
@ -62,7 +81,7 @@ export default function CursosVista() {
nombre: nuevoNombre,
descripcion: nuevaDescripcion,
horas: nuevaHoras,
competencias: competenciasGuardadas,
//competencias: competenciasGuardadas,
})
.eq("id", id);
@ -105,6 +124,7 @@ export default function CursosVista() {
<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>
@ -116,6 +136,7 @@ export default function CursosVista() {
{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}
@ -166,17 +187,19 @@ export default function CursosVista() {
<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">
{curso.competencias.join(", ")}
{Array.isArray(curso.competencias) && curso.competencias.length > 0
? curso.competencias.map((comp) => comp.nombre).join(", ")
: "Sin competencias"}
</td>
<td className="py-2 border-b flex">
<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 m-1"
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 m-1"
className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
onClick={() => confirmarEliminacion(curso.id)}
>
Eliminar