feat: implement editing functionality for alumnos in AlumnosVista with improved UI for form inputs
This commit is contained in:
BenitoBB
parent
a744fb083d
commit
814354baac
|
|
@ -44,15 +44,7 @@ export default function AlumnosVista() {
|
|||
|
||||
useEffect(() => {
|
||||
cargarAlumnos();
|
||||
cargarCursos();
|
||||
supabaseClient
|
||||
.from("pildoras")
|
||||
.select("id, nombre")
|
||||
.then(({ data }) => setPildoras(data || []));
|
||||
supabaseClient
|
||||
.from("inyeccion")
|
||||
.select("id, nombre")
|
||||
.then(({ data }) => setInyecciones(data || []));
|
||||
// ...cargar cursos, inyecciones, pildoras...
|
||||
}, []);
|
||||
|
||||
const cargarCursos = async () => {
|
||||
|
|
@ -74,11 +66,11 @@ export default function AlumnosVista() {
|
|||
telefono,
|
||||
tipo_formacion,
|
||||
curso_id,
|
||||
curso(id, nombre),
|
||||
curso(nombre),
|
||||
inyeccion_id,
|
||||
inyeccion(id, nombre),
|
||||
inyeccion(nombre),
|
||||
pildoras_id,
|
||||
pildoras(id, nombre)
|
||||
pildoras(nombre)
|
||||
`)
|
||||
.order("id", { ascending: true });
|
||||
setAlumnos(data || []);
|
||||
|
|
@ -185,7 +177,7 @@ export default function AlumnosVista() {
|
|||
<div className="overflow-x-auto w-full">
|
||||
<table className="min-w-full bg-white border">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<tr className="bg-gray-100 text-black">
|
||||
<th className="py-2 border-b">ID</th>
|
||||
<th className="py-2 border-b">Nombre</th>
|
||||
<th className="py-2 border-b">Correo</th>
|
||||
|
|
@ -196,39 +188,125 @@ export default function AlumnosVista() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alumnos.map((alumno) => (
|
||||
<tr key={alumno.id}>
|
||||
<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.telefono}</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
{alumno.tipo_formacion === "curso"
|
||||
? "Curso"
|
||||
: alumno.tipo_formacion === "inyeccion"
|
||||
? "Inyección"
|
||||
: alumno.tipo_formacion === "pildora"
|
||||
? "Píldora"
|
||||
: ""}
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
{alumno.tipo_formacion === "curso" && alumno.curso?.nombre}
|
||||
{alumno.tipo_formacion === "inyeccion" && alumno.inyeccion?.nombre}
|
||||
{alumno.tipo_formacion === "pildora" && alumno.pildoras?.nombre}
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<Button
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
|
||||
onClick={() => {
|
||||
setAlumnoSeleccionado(alumno);
|
||||
setMostrarDialog(true);
|
||||
}}
|
||||
>
|
||||
Crear Diploma
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{alumnos.map(alumno =>
|
||||
alumnoEditando === alumno.id ? (
|
||||
<tr key={alumno.id}>
|
||||
<td className="py-2 px-4 border-b text-center">
|
||||
{alumno.id}
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<input value={nuevoNombre} onChange={e => setNuevoNombre(e.target.value)} className="border rounded px-2 py-1 text-black" />
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<input value={nuevoCorreo} onChange={e => setNuevoCorreo(e.target.value)} className="border rounded px-2 py-1 text-black" />
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<input value={nuevoNumero} onChange={e => setNuevoNumero(e.target.value)} className="border rounded px-2 py-1 text-black" />
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<select
|
||||
value={nuevoTipo}
|
||||
onChange={e => {
|
||||
setNuevoTipo(e.target.value);
|
||||
setNuevaFormacion("");
|
||||
}}
|
||||
className="border rounded px-2 py-1 text-black"
|
||||
>
|
||||
<option value="">Selecciona tipo</option>
|
||||
<option value="curso">Curso</option>
|
||||
<option value="inyeccion">Inyección</option>
|
||||
<option value="pildora">Píldora</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
{nuevoTipo === "curso" && (
|
||||
<select
|
||||
value={nuevaFormacion}
|
||||
onChange={e => setNuevaFormacion(e.target.value)}
|
||||
className="border rounded px-2 py-1 text-black"
|
||||
required
|
||||
>
|
||||
<option value="">Selecciona curso</option>
|
||||
{cursos.map(curso => (
|
||||
<option key={curso.id} value={curso.id}>
|
||||
{curso.nombre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{nuevoTipo === "inyeccion" && (
|
||||
<select
|
||||
value={nuevaFormacion}
|
||||
onChange={e => setNuevaFormacion(e.target.value)}
|
||||
className="border rounded px-2 py-1 text-black"
|
||||
required
|
||||
>
|
||||
<option value="">Selecciona inyección</option>
|
||||
{inyecciones.map(inyeccion => (
|
||||
<option key={inyeccion.id} value={inyeccion.id}>
|
||||
{inyeccion.nombre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{nuevoTipo === "pildora" && (
|
||||
<select
|
||||
value={nuevaFormacion}
|
||||
onChange={e => setNuevaFormacion(e.target.value)}
|
||||
className="border rounded px-2 py-1 text-black"
|
||||
required
|
||||
>
|
||||
<option value="">Selecciona píldora</option>
|
||||
{pildoras.map(pildora => (
|
||||
<option key={pildora.id} value={pildora.id}>
|
||||
{pildora.nombre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<button onClick={() => guardarEdicion(alumno.id)} className="bg-green-500 hover:bg-green-700 text-white px-3 py-1 rounded mr-2">Guardar</button>
|
||||
<button onClick={() => setAlumnoEditando(null)} className="bg-gray-400 hover:bg-gray-600 text-white px-3 py-1 rounded">Cancelar</button>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr key={alumno.id}>
|
||||
<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.telefono}</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
{alumno.tipo_formacion === "curso"
|
||||
? "Curso"
|
||||
: alumno.tipo_formacion === "inyeccion"
|
||||
? "Inyección"
|
||||
: alumno.tipo_formacion === "pildora"
|
||||
? "Píldora"
|
||||
: ""}
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
{alumno.tipo_formacion === "curso" && alumno.curso?.nombre}
|
||||
{alumno.tipo_formacion === "inyeccion" && alumno.inyeccion?.nombre}
|
||||
{alumno.tipo_formacion === "pildora" && alumno.pildoras?.nombre}
|
||||
</td>
|
||||
<td className="py-2 px-4 border-b">
|
||||
<button
|
||||
onClick={() => iniciarEdicion(alumno)}
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded mr-2"
|
||||
>
|
||||
Editar
|
||||
</button>
|
||||
<button
|
||||
onClick={() => eliminarAlumno(alumno.id)}
|
||||
className="bg-red-500 hover:bg-red-700 text-white px-3 py-1 rounded"
|
||||
>
|
||||
Eliminar
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue