150 lines
3.7 KiB
TypeScript
150 lines
3.7 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 Programa {
|
|
id_programa: number;
|
|
programa: string;
|
|
}
|
|
|
|
export default function ProgramSelector({
|
|
ubicacion,
|
|
id,
|
|
}: {
|
|
ubicacion?: string | null;
|
|
id?: number | null;
|
|
}) {
|
|
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 handleTogglePrograma = (id: number) => {
|
|
setCheckboxes((prev) => ({
|
|
...prev,
|
|
[id]: !prev[id],
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const programasSeleccionados = Object.keys(checkboxes)
|
|
.filter((id) => checkboxes[Number(id)])
|
|
.map(Number);
|
|
|
|
try {
|
|
if (ubicacion && ubicacion !== "0") {
|
|
await axios.patch(
|
|
`${envConfig.apiUrl}/programa-equipo/equipo/${ubicacion}`,
|
|
{
|
|
programas: programasSeleccionados,
|
|
},
|
|
);
|
|
|
|
toast.success("Programas actualizados en la máquina");
|
|
return;
|
|
}
|
|
|
|
if (id) {
|
|
await axios.patch(`${envConfig.apiUrl}/programa-equipo/sala`, {
|
|
sala: id,
|
|
programas: programasSeleccionados,
|
|
});
|
|
|
|
toast.success("Programas actualizados en la sala");
|
|
return;
|
|
}
|
|
|
|
toast.error("No se pudo determinar el destino");
|
|
} catch (error) {
|
|
toast.error("Error al guardar cambios");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!programas.length) return;
|
|
if (ubicacion === null && id === null) return;
|
|
|
|
const buildCheckboxes = async () => {
|
|
const baseCheckboxes: Record<number, boolean> = {};
|
|
programas.forEach((p) => {
|
|
baseCheckboxes[p.id_programa] = false;
|
|
});
|
|
|
|
try {
|
|
let res;
|
|
|
|
if (ubicacion && ubicacion !== "0") {
|
|
res = await axios.get(
|
|
`${envConfig.apiUrl}/programa-equipo/${ubicacion}`,
|
|
);
|
|
}
|
|
|
|
if (id) {
|
|
res = await axios.get(
|
|
`${envConfig.apiUrl}/area-ubicacion/programs/${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>
|
|
);
|
|
}
|
|
//IO
|