81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { envConfig } from "@/app/lib/config";
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import Cookies from "js-cookie";
|
|
|
|
export default function Equipos() {
|
|
const [cuenta, setCuenta] = useState("");
|
|
const [equipoId, setEquipoId] = useState("");
|
|
const [equipos, setEquipos] = useState<any[]>([]);
|
|
const [mensaje, setMensaje] = useState("");
|
|
|
|
useEffect(() => {
|
|
const fetchEquipos = async () => {
|
|
try {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const response = await axios.get(`${envConfig.apiUrl}/equipo`,
|
|
{ headers },
|
|
);
|
|
setEquipos(response.data);
|
|
} catch (error: any) {
|
|
setMensaje(
|
|
error.response?.data?.message || "Error al cargar equipos"
|
|
);
|
|
}
|
|
};
|
|
|
|
fetchEquipos();
|
|
}, []);
|
|
|
|
const handleBuscar = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (!cuenta) {
|
|
setMensaje("Ingresa un número de cuenta");
|
|
return;
|
|
}
|
|
setMensaje(`Buscando cuenta: ${cuenta}`);
|
|
};
|
|
|
|
const handleAsignar = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (!equipoId) {
|
|
setMensaje("Selecciona un equipo");
|
|
return;
|
|
}
|
|
setMensaje(`Equipo ${equipoId} asignado`);
|
|
};
|
|
|
|
return (
|
|
<div className="containerForm">
|
|
<form onSubmit={handleBuscar} className="groupInput">
|
|
<label>No. de cuenta:</label>
|
|
<input
|
|
type="text"
|
|
value={cuenta}
|
|
onChange={(e) => setCuenta(e.target.value)}
|
|
/>
|
|
<button type="submit">Buscar</button>
|
|
</form>
|
|
|
|
<form onSubmit={handleAsignar} className="groupInput">
|
|
<label>Equipos disponibles:</label>
|
|
<select value={equipoId} onChange={(e) => setEquipoId(e.target.value)}>
|
|
<option value="">-- Selecciona un equipo --</option>
|
|
{equipos.map((eq) => (
|
|
<option key={eq.id_equipo} value={eq.id_equipo}>
|
|
{eq.nombre_equipo} - {eq.ubicacion}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<button type="submit">Asignar</button>
|
|
</form>
|
|
|
|
{mensaje && <p>{mensaje}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
//IO
|