108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { envConfig } from "@/app/lib/config";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import "./tableEquipos.css";
|
|
import axios from "axios";
|
|
|
|
export default function TableEquipos() {
|
|
const [equipos, setEquipos] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchEquipos = async () => {
|
|
try {
|
|
const response = await axios.get(`${envConfig.apiUrl}/equipo`);
|
|
setEquipos(response.data);
|
|
} catch (error: any) {
|
|
console.error("ERROR API:", error.response?.data || error.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchEquipos();
|
|
}, []);
|
|
|
|
const toggleEquipo = async (id_equipo: number) => {
|
|
try {
|
|
await axios.patch(
|
|
`${envConfig.apiUrl}/equipo/${id_equipo}/activo`
|
|
);
|
|
|
|
setEquipos((prev) =>
|
|
prev.map((e) =>
|
|
e.id_equipo === id_equipo
|
|
? {
|
|
...e,
|
|
activo: {
|
|
data: [e.activo?.data?.[0] === 1 ? 0 : 1],
|
|
},
|
|
}
|
|
: e
|
|
)
|
|
);
|
|
} catch (error: any) {
|
|
console.error(
|
|
"Error al cambiar estado del equipo",
|
|
error.response?.data || error.message
|
|
);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <p>Cargando equipos...</p>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
overflow: "auto",
|
|
height: "430px",
|
|
scrollbarColor: "#2563eb white",
|
|
}}
|
|
>
|
|
<table style={{ width: "100%" }}>
|
|
<thead>
|
|
<tr>
|
|
<th>Ubicación</th>
|
|
<th>Nombre</th>
|
|
<th>Plataforma</th>
|
|
<th>Área</th>
|
|
<th>Activo</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{equipos.map((eq) => {
|
|
const isActivo = eq.activo?.data?.[0] === 1;
|
|
|
|
return (
|
|
<tr key={eq.id_equipo}>
|
|
<td>{eq.ubicacion}</td>
|
|
<td>{eq.nombre_equipo}</td>
|
|
<td className={eq.plataforma?.nombre}>
|
|
{eq.plataforma?.nombre}
|
|
</td>
|
|
<td>{eq.areaUbicacion?.nombre || eq.id_area_ubicacion}</td>
|
|
|
|
<td
|
|
style={{ display: "flex", alignItems: "center", gap: "5px" }}
|
|
>
|
|
<span>{isActivo ? "Sí" : "No"}</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={isActivo}
|
|
style={{ height: "2.5rem" }}
|
|
onChange={() => toggleEquipo(eq.id_equipo)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|