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(() => {
|
useEffect(() => {
|
||||||
cargarAlumnos();
|
cargarAlumnos();
|
||||||
cargarCursos();
|
// ...cargar cursos, inyecciones, pildoras...
|
||||||
supabaseClient
|
|
||||||
.from("pildoras")
|
|
||||||
.select("id, nombre")
|
|
||||||
.then(({ data }) => setPildoras(data || []));
|
|
||||||
supabaseClient
|
|
||||||
.from("inyeccion")
|
|
||||||
.select("id, nombre")
|
|
||||||
.then(({ data }) => setInyecciones(data || []));
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const cargarCursos = async () => {
|
const cargarCursos = async () => {
|
||||||
|
|
@ -74,11 +66,11 @@ export default function AlumnosVista() {
|
||||||
telefono,
|
telefono,
|
||||||
tipo_formacion,
|
tipo_formacion,
|
||||||
curso_id,
|
curso_id,
|
||||||
curso(id, nombre),
|
curso(nombre),
|
||||||
inyeccion_id,
|
inyeccion_id,
|
||||||
inyeccion(id, nombre),
|
inyeccion(nombre),
|
||||||
pildoras_id,
|
pildoras_id,
|
||||||
pildoras(id, nombre)
|
pildoras(nombre)
|
||||||
`)
|
`)
|
||||||
.order("id", { ascending: true });
|
.order("id", { ascending: true });
|
||||||
setAlumnos(data || []);
|
setAlumnos(data || []);
|
||||||
|
|
@ -185,7 +177,7 @@ export default function AlumnosVista() {
|
||||||
<div className="overflow-x-auto w-full">
|
<div className="overflow-x-auto w-full">
|
||||||
<table className="min-w-full bg-white border">
|
<table className="min-w-full bg-white border">
|
||||||
<thead>
|
<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">ID</th>
|
||||||
<th className="py-2 border-b">Nombre</th>
|
<th className="py-2 border-b">Nombre</th>
|
||||||
<th className="py-2 border-b">Correo</th>
|
<th className="py-2 border-b">Correo</th>
|
||||||
|
|
@ -196,39 +188,125 @@ export default function AlumnosVista() {
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{alumnos.map((alumno) => (
|
{alumnos.map(alumno =>
|
||||||
<tr key={alumno.id}>
|
alumnoEditando === alumno.id ? (
|
||||||
<td className="py-2 px-4 border-b">{alumno.id}</td>
|
<tr key={alumno.id}>
|
||||||
<td className="py-2 px-4 border-b">{alumno.nombre}</td>
|
<td className="py-2 px-4 border-b text-center">
|
||||||
<td className="py-2 px-4 border-b">{alumno.correo}</td>
|
{alumno.id}
|
||||||
<td className="py-2 px-4 border-b">{alumno.telefono}</td>
|
</td>
|
||||||
<td className="py-2 px-4 border-b">
|
<td className="py-2 px-4 border-b">
|
||||||
{alumno.tipo_formacion === "curso"
|
<input value={nuevoNombre} onChange={e => setNuevoNombre(e.target.value)} className="border rounded px-2 py-1 text-black" />
|
||||||
? "Curso"
|
</td>
|
||||||
: alumno.tipo_formacion === "inyeccion"
|
<td className="py-2 px-4 border-b">
|
||||||
? "Inyección"
|
<input value={nuevoCorreo} onChange={e => setNuevoCorreo(e.target.value)} className="border rounded px-2 py-1 text-black" />
|
||||||
: alumno.tipo_formacion === "pildora"
|
</td>
|
||||||
? "Píldora"
|
<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>
|
||||||
<td className="py-2 px-4 border-b">
|
<td className="py-2 px-4 border-b">
|
||||||
{alumno.tipo_formacion === "curso" && alumno.curso?.nombre}
|
<select
|
||||||
{alumno.tipo_formacion === "inyeccion" && alumno.inyeccion?.nombre}
|
value={nuevoTipo}
|
||||||
{alumno.tipo_formacion === "pildora" && alumno.pildoras?.nombre}
|
onChange={e => {
|
||||||
</td>
|
setNuevoTipo(e.target.value);
|
||||||
<td className="py-2 px-4 border-b">
|
setNuevaFormacion("");
|
||||||
<Button
|
}}
|
||||||
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
|
className="border rounded px-2 py-1 text-black"
|
||||||
onClick={() => {
|
>
|
||||||
setAlumnoSeleccionado(alumno);
|
<option value="">Selecciona tipo</option>
|
||||||
setMostrarDialog(true);
|
<option value="curso">Curso</option>
|
||||||
}}
|
<option value="inyeccion">Inyección</option>
|
||||||
>
|
<option value="pildora">Píldora</option>
|
||||||
Crear Diploma
|
</select>
|
||||||
</Button>
|
</td>
|
||||||
</td>
|
<td className="py-2 px-4 border-b">
|
||||||
</tr>
|
{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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue