Files
front-AT/app/Components/BitacoraSanciones/ApplySanction.tsx
T
2026-02-16 18:45:05 -06:00

98 lines
2.9 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import { useRouter } from "next/navigation";
import { Alumno, AlumnoSancion, Sancion } from "@/app/types/student";
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 router = useRouter();
useEffect(() => {
if (!idCuenta) return;
axios
.get(`${envConfig.apiUrl}/alumno-sancion/${idCuenta}`)
.then((res) => {
setAlumno(res.data.student);
setAlumnoSanciones(
res.data.alusancion?.length ? res.data.alusancion : [],
);
})
.catch((err) => {
const mensaje =
err.response?.data?.message ||
"Error al obtener las sanciones del alumno";
});
axios
.get(`${envConfig.apiUrl}/sancion`)
.then((res) => setSanciones(res.data))
.catch((err) =>
toast.error("Error al obtener el catálogo de sanciones:", err),
);
}, [idCuenta]);
const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
const fecha = new Date(fechaInicio);
fecha.setDate(fecha.getDate() + duracionSemanas * 7);
return fecha.toLocaleDateString();
};
const handleButton = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (!selectedSancion) {
toast.error("selecciona una sancion")
}
axios.post(`${envConfig.apiUrl}/alumno-sancion/`, { id_sancion: Number(selectedSancion), id_cuenta: idCuenta })
router.refresh();
}
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}
>
Aplicar sanción
</button>
</>
}
</>
);
}