Files
front-AT/app/Components/AsignacionMesas.tsx
T

110 lines
2.5 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import toast from "react-hot-toast";
type Props = {
idCuenta: number;
inscripcion: any[];
};
export default function AsignacionMesas({
idCuenta,
inscripcion,
}: Props) {
const [puedeContinuar, setPuedeContinuar] = useState(false);
const [mesas, setMesas] = useState<any[]>([]);
const [loadingMesas, setLoadingMesas] = useState(false);
useEffect(() => {
if (!Array.isArray(inscripcion) || inscripcion.length === 0) return;
const todasAsistieron = inscripcion.every(
(ins) => ins.platica?.data?.[0] === 1
);
if (!todasAsistieron) {
toast.error("El alumno no asistió a todas las pláticas");
setPuedeContinuar(false);
return;
}
setPuedeContinuar(true);
}, [inscripcion]);
useEffect(() => {
if (!puedeContinuar || !idCuenta) return;
const fetchMesas = async () => {
try {
setLoadingMesas(true);
const res = await fetch(
`${envConfig.apiUrl}/mesa/activo`,
{ cache: "no-store" }
);
if (!res.ok) {
throw new Error("No se pudieron cargar las mesas");
}
const data = await res.json();
setMesas(data);
} catch (error) {
toast.error("Error al cargar mesas disponibles");
} finally {
setLoadingMesas(false);
}
};
fetchMesas();
}, [puedeContinuar, idCuenta]);
if (!puedeContinuar) return null;
return (
<div className="containerForm">
<label style={{ marginTop: "1rem" }}>
Seleccionar tiempo
</label>
<select>
<option>15 minutos</option>
<option>30 minutos</option>
<option>40 minutos</option>
<option>60 minutos</option>
</select>
<label style={{ marginTop: "1rem" }}>
Seleccione una mesa
</label>
<div className="groupInput">
<select disabled={loadingMesas || mesas.length === 0}>
{loadingMesas && <option>Cargando mesas...</option>}
{!loadingMesas && mesas.length === 0 && (
<option>No hay mesas disponibles</option>
)}
{!loadingMesas &&
mesas.map((mesa) => (
<option key={mesa.idMesa} value={mesa.idMesa}>
Mesa {mesa.idMesa}
</option>
))}
</select>
<button
className="button buttonSearch"
disabled={loadingMesas || mesas.length === 0}
>
Asignar Mesa
</button>
</div>
</div>
);
}