148 lines
4.2 KiB
TypeScript
148 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { envConfig } from "@/app/lib/config";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import Cookies from "js-cookie";
|
|
|
|
import "../../(private)/AsignacionEquipo/asignacion.css";
|
|
|
|
interface Equipos {
|
|
id_equipo: number;
|
|
id_plataforma: number;
|
|
id_area_ubicacion: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
activo: boolean;
|
|
ip: string;
|
|
areaUbicacion: { area: string };
|
|
plataforma: { nombre: string };
|
|
}
|
|
|
|
interface Props {
|
|
onSearch: (id_equipo: number) => void;
|
|
}
|
|
|
|
export default function SelectorEquipo({ onSearch }: Props) {
|
|
const [equipos, setEquipos] = useState<Equipos[]>([]);
|
|
const searchParams = useSearchParams();
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
const paramEquipo = Number(searchParams.get("equipo")) || 0;
|
|
const [selected, setSelected] = useState<Equipos | null>(null);
|
|
const [loadingEquipos, setLoadingEquipos] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setLoadingEquipos(true);
|
|
const response = await axios.get(`${envConfig.apiUrl}/equipo`, { headers },
|
|
);
|
|
setEquipos(response.data);
|
|
setLoadingEquipos(false);
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (paramEquipo && equipos.length > 0) {
|
|
const eq = equipos.find(e => e.id_equipo === paramEquipo);
|
|
if (eq) {
|
|
setSelected(eq);
|
|
onSearch(eq.id_equipo);
|
|
}
|
|
}
|
|
}, [paramEquipo, equipos]);
|
|
|
|
const equiposFiltrados = equipos.filter((eq) => {
|
|
const texto = search.toLowerCase();
|
|
|
|
return (
|
|
eq.ubicacion?.toString().toLowerCase().includes(texto) ||
|
|
eq.plataforma?.nombre?.toLowerCase().includes(texto) ||
|
|
eq.nombre_equipo?.toLowerCase().includes(texto)
|
|
);
|
|
});
|
|
|
|
return (
|
|
<form className="form-container">
|
|
<label>Ubicacion de equipo</label>
|
|
|
|
<div
|
|
className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
|
|
>
|
|
<div
|
|
className={`selectHeader ${selected && selected.plataforma?.nombre?.toUpperCase()}`}
|
|
onClick={() => !loadingEquipos && setOpen(!open)} >
|
|
{open ? (
|
|
<input
|
|
autoFocus
|
|
type="text"
|
|
placeholder="Buscar equipo..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="inputSelect"
|
|
/>
|
|
) : selected ? (
|
|
<span>
|
|
{selected.ubicacion} {selected.nombre_equipo}
|
|
</span>
|
|
) : (
|
|
<span className="placeholder">
|
|
{loadingEquipos
|
|
? "Cargando equipos..."
|
|
: "Seleccione un equipo"}
|
|
</span>
|
|
)}
|
|
|
|
<span className="arrow">{open ? "▲" : "▼"}</span>
|
|
</div>
|
|
|
|
{open && (
|
|
<div className="options" style={{ bottom: "auto" }}>
|
|
{equiposFiltrados.length === 0 && (
|
|
<div className="option disabled">
|
|
No hay equipos disponibles
|
|
</div>
|
|
)}
|
|
|
|
{equiposFiltrados.map((eq) => (
|
|
<div
|
|
key={eq.id_equipo}
|
|
className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
|
|
onClick={() => {
|
|
setSelected(eq);
|
|
setOpen(false);
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
|
|
if (eq.id_equipo === 0) {
|
|
params.delete("equipo");
|
|
} else {
|
|
params.set("equipo", String(eq.id_equipo));
|
|
}
|
|
|
|
router.push(`${pathname}?${params.toString()}`);
|
|
setSearch("");
|
|
|
|
}}
|
|
>
|
|
{eq.ubicacion} {eq.nombre_equipo} {eq.areaUbicacion.area}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
//IO
|