138 lines
3.4 KiB
TypeScript
138 lines
3.4 KiB
TypeScript
"use client";
|
|
import { envConfig } from "@/app/lib/config";
|
|
import axios from "axios";
|
|
import { useEffect, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
|
|
interface Equipos {
|
|
id_equipo: number;
|
|
id_plataforma: number;
|
|
id_area_ubicacion: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
activo: boolean;
|
|
ip: string;
|
|
}
|
|
|
|
interface Programa {
|
|
id_programa: number;
|
|
programa: string;
|
|
}
|
|
|
|
export default function ProgramSelector({
|
|
ubicacion,
|
|
id,
|
|
}: {
|
|
ubicacion?: string | null;
|
|
id?: number | null;
|
|
}) {
|
|
const [equipoSeleccionado, setEquipoSeleccionado] = useState<number | "">("");
|
|
const [programas, setProgramas] = useState<Programa[]>([]);
|
|
const [checkboxes, setCheckboxes] = useState<Record<number, boolean>>({});
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
const [programasRes] = await Promise.all([
|
|
axios.get(`${envConfig.apiUrl}/programa`),
|
|
]);
|
|
|
|
setProgramas(programasRes.data);
|
|
|
|
const initialCheckboxes: Record<number, boolean> = {};
|
|
programasRes.data.forEach((p: Programa) => {
|
|
initialCheckboxes[p.id_programa] = false;
|
|
});
|
|
setCheckboxes(initialCheckboxes);
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setEquipoSeleccionado(Number(e.target.value));
|
|
};
|
|
|
|
const handleTogglePrograma = (id: number) => {
|
|
setCheckboxes((prev) => ({
|
|
...prev,
|
|
[id]: !prev[id],
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const programasSeleccionados = Object.keys(checkboxes)
|
|
.filter((id) => checkboxes[Number(id)])
|
|
.map(Number);
|
|
|
|
console.log("Equipo:", equipoSeleccionado);
|
|
console.log("Programas seleccionados:", programasSeleccionados);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!programas.length) return;
|
|
if (!ubicacion && !id) return;
|
|
|
|
const buildCheckboxes = async () => {
|
|
const baseCheckboxes: Record<number, boolean> = {};
|
|
programas.forEach((p) => {
|
|
baseCheckboxes[p.id_programa] = false;
|
|
});
|
|
|
|
try {
|
|
let res;
|
|
|
|
if (ubicacion) {
|
|
res = await axios.get(
|
|
`${envConfig.apiUrl}/programa-equipo/${ubicacion}`,
|
|
);
|
|
}
|
|
|
|
if (id) {
|
|
res = await axios.get(`${envConfig.apiUrl}/programa-area/${id}`);
|
|
}
|
|
|
|
res?.data.forEach((item: any) => {
|
|
baseCheckboxes[item.id_programa] = true;
|
|
});
|
|
} catch (error: any) {
|
|
if (axios.isAxiosError(error)) {
|
|
if (error.response?.status === 404) {
|
|
toast.error("Sin programas asignados");
|
|
} else {
|
|
toast.error("Error al cargar programas");
|
|
}
|
|
} else {
|
|
toast.error("Error inesperado");
|
|
}
|
|
}
|
|
|
|
setCheckboxes(baseCheckboxes);
|
|
};
|
|
|
|
buildCheckboxes();
|
|
}, [programas, ubicacion, id]);
|
|
|
|
return (
|
|
<form className="form-container" onSubmit={handleSubmit}>
|
|
<div className="checkbox-grid">
|
|
{programas.map((prog) => (
|
|
<label key={prog.id_programa}>
|
|
<input
|
|
type="checkbox"
|
|
checked={checkboxes[prog.id_programa] || false}
|
|
onChange={() => handleTogglePrograma(prog.id_programa)}
|
|
/>
|
|
{prog.programa}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<button className="button buttonSearch" type="submit">
|
|
Guardar cambios
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|