135 lines
3.5 KiB
TypeScript
135 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { envConfig } from "@/app/lib/config";
|
|
import { Alumno, AlumnoSancion, Sancion } from "@/app/types/sanction";
|
|
import { GetSancionByStudent } from "@/app/lib/getSancionByStudent";
|
|
import TableSanction from "./TableSanction";
|
|
import axios from "axios";
|
|
import Swal from "sweetalert2";
|
|
import Cookies from "js-cookie";
|
|
|
|
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 [loadingTable, setLoadingTable] = useState(false);
|
|
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const fetchAlumnoSanciones = async () => {
|
|
|
|
const res = await GetSancionByStudent(idCuenta);
|
|
|
|
setAlumno(res.student ?? null);
|
|
setAlumnoSanciones(res.alusancion ?? []);
|
|
setLoadingTable(true)
|
|
|
|
if (res.error) {
|
|
setLoadingTable(false)
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!idCuenta) return;
|
|
|
|
fetchAlumnoSanciones();
|
|
|
|
axios
|
|
.get(`${envConfig.apiUrl}/sancion`, { headers })
|
|
.then((res) => setSanciones(res.data))
|
|
.catch(() =>
|
|
|
|
Swal.fire({
|
|
title: "Error al obtener el catálogo de sanciones!",
|
|
icon: "error",
|
|
draggable: true
|
|
})
|
|
);
|
|
|
|
}, [idCuenta]);
|
|
|
|
const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
|
|
if (!selectedSancion) {
|
|
|
|
Swal.fire({
|
|
title: "Selecciona una sanción!",
|
|
icon: "error",
|
|
draggable: true
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
|
|
await axios.post(`${envConfig.apiUrl}/alumno-sancion/`, {
|
|
id_sancion: Number(selectedSancion),
|
|
id_cuenta: idCuenta,
|
|
}, { headers });
|
|
|
|
await fetchAlumnoSanciones();
|
|
setSelectedSancion("");
|
|
|
|
Swal.fire({
|
|
title: "Sanción aplicada correctamente!",
|
|
icon: "success",
|
|
draggable: true
|
|
});
|
|
} catch {
|
|
|
|
Swal.fire({
|
|
title: "Error al aplicar la sanción!",
|
|
icon: "error",
|
|
draggable: true
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
|
|
|
|
{loadingTable && 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>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|