Files
front-AT/app/Components/BitacoraSanciones/ApplySanction.tsx
T
2026-02-17 17:14:27 -06:00

107 lines
2.9 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import { Alumno, AlumnoSancion, Sancion } from "@/app/types/sanction";
import TableSanction from "./TableSanction";
import axios from "axios";
import toast from "react-hot-toast";
if (!envConfig.apiUrl) {
console.error("API URL is not defined in envConfig");
}
export default function ApplySanction({ idCuenta }: { idCuenta: number }) {
const [sanciones, setSanciones] = useState<Sancion[]>([]);
const [alumno, setAlumno] = useState<Alumno >();
const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);
const [selectedSancion, setSelectedSancion] = useState("");
const [loading, setLoading] = useState(false);
const fetchAlumnoSanciones = async () => {
try {
const res = await axios.get(
`${envConfig.apiUrl}/alumno-sancion/${idCuenta}`
);
setAlumno(res.data.student ?? null);
setAlumnoSanciones(res.data.alusancion ?? []);
} catch {
}
};
useEffect(() => {
if (!idCuenta) return;
fetchAlumnoSanciones();
axios
.get(`${envConfig.apiUrl}/sancion`)
.then((res) => setSanciones(res.data))
.catch(() =>
toast.error("Error al obtener el catálogo de sanciones")
);
}, [idCuenta]);
const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (!selectedSancion) {
toast.error("Selecciona una sanción");
return;
}
try {
setLoading(true);
await axios.post(`${envConfig.apiUrl}/alumno-sancion/`, {
id_sancion: Number(selectedSancion),
id_cuenta: idCuenta,
});
await fetchAlumnoSanciones();
setSelectedSancion("");
toast.success("Sanción aplicada correctamente");
} catch {
toast.error("Error al aplicar la sanción");
} finally {
setLoading(false);
}
};
return (
<>
<TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
{alumnoSanciones.length === 0 && (
<>
<form className="containerForm">
<div className="groupInput">
<select
value={selectedSancion}
onChange={(e) => setSelectedSancion(e.target.value)}
>
<option value="">-- Selecciona una sanción --</option>
{sanciones.map((sancion) => (
<option key={sancion.id_sancion} value={sancion.id_sancion}>
{sancion.sancion} ({sancion.duracion} semana/s)
</option>
))}
</select>
</div>
</form>
<button
className="button buttonSearch"
style={{ margin: "1rem 0" }}
onClick={handleButton}
disabled={loading}
>
{loading ? "Aplicando..." : "Aplicar sanción"}
</button>
</>
)}
</>
);
}