129 lines
3.4 KiB
TypeScript
129 lines
3.4 KiB
TypeScript
"use client";
|
|
import axios from "axios";
|
|
import { envConfig } from "@/app/lib/config";
|
|
import { useState } from "react";
|
|
|
|
interface Data {
|
|
nombre_equipo: string;
|
|
id_equipo: number;
|
|
id_plataforma: number;
|
|
id_area_ubicacion: number;
|
|
ubicacion: string;
|
|
}
|
|
|
|
interface Plataforma {
|
|
id_plataforma: number;
|
|
nombre: string;
|
|
}
|
|
|
|
interface Area {
|
|
id_area_ubicacion: number;
|
|
area: string;
|
|
extra: string;
|
|
}
|
|
|
|
export default function Equipos() {
|
|
const [id, setId] = useState("");
|
|
const [data, setData] = useState<Data | null>(null);
|
|
|
|
const [plataforma, setPlataforma] = useState<Plataforma[]>([]);
|
|
const [area, setArea] = useState<Area[]>([]);
|
|
|
|
const [ubicacion, setUbicacion] = useState("");
|
|
const [nombre, setNombre] = useState("");
|
|
|
|
const [idPlataforma, setIdPlataforma] = useState<number | "">("");
|
|
const [idArea, setIdArea] = useState<number | "">("");
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
|
|
const [equipoRes, plataformaRes, areaRes] = await Promise.all([
|
|
axios.get(`${envConfig.apiUrl}/equipo/${id}`),
|
|
axios.get(`${envConfig.apiUrl}/alumno-inscrito/plataforma`),
|
|
axios.get(`${envConfig.apiUrl}/area-ubicacion`)
|
|
]);
|
|
|
|
const equipo = equipoRes.data as Data;
|
|
|
|
setData(equipo);
|
|
setNombre(equipo.nombre_equipo);
|
|
setUbicacion(equipo.ubicacion);
|
|
setIdPlataforma(equipo.id_plataforma);
|
|
setIdArea(equipo.id_area_ubicacion);
|
|
|
|
setPlataforma(plataformaRes.data);
|
|
setArea(areaRes.data);
|
|
};
|
|
|
|
return (
|
|
<form className="containerForm" onSubmit={handleSubmit}>
|
|
<div className="groupInput">
|
|
<input
|
|
placeholder="Número de Equipo a buscar..."
|
|
value={id}
|
|
onChange={(e) => setId(e.target.value)}
|
|
/>
|
|
|
|
<button type="submit" className="button buttonSearch">
|
|
Buscar
|
|
</button>
|
|
</div>
|
|
|
|
{data && (
|
|
<div>
|
|
<label className="label">Ubicación</label>
|
|
<input
|
|
type="text"
|
|
value={ubicacion}
|
|
onChange={(e) => setUbicacion(e.target.value)}
|
|
/>
|
|
|
|
<label className="label">Nombre</label>
|
|
<input
|
|
type="text"
|
|
value={nombre}
|
|
onChange={(e) => setNombre(e.target.value)}
|
|
/>
|
|
|
|
<label className="label">Plataforma</label>
|
|
<select
|
|
value={idPlataforma}
|
|
onChange={(e) => setIdPlataforma(Number(e.target.value))}
|
|
>
|
|
<option value="">Elige</option>
|
|
{plataforma.map((plat) => (
|
|
<option key={plat.id_plataforma} value={plat.id_plataforma}>
|
|
{plat.nombre}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<label className="label">Área Ubicación</label>
|
|
<select
|
|
value={idArea}
|
|
onChange={(e) => setIdArea(Number(e.target.value))}
|
|
>
|
|
<option value="">Elige</option>
|
|
{area.map((a) => (
|
|
<option key={a.id_area_ubicacion} value={a.id_area_ubicacion}>
|
|
{a.area}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<div className="containerButton" style={{ marginTop: "1rem" }}>
|
|
<button type="button" className="button buttonSearch">
|
|
Nuevo
|
|
</button>
|
|
<button type="button" className="button buttonSearch">
|
|
Editar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|