91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
"use client";
|
|
import axios from "axios";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Mesa {
|
|
id_mesa: number;
|
|
nombre?: string;
|
|
}
|
|
|
|
interface Props {
|
|
id_cuenta: number;
|
|
}
|
|
|
|
function Mesas({ id_cuenta }: Props) {
|
|
const [mesas, setMesas] = useState<Mesa[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!id_cuenta) return;
|
|
|
|
setLoading(true);
|
|
|
|
axios
|
|
.get(`/cuenta/${id_cuenta}`)
|
|
.then((res) => {
|
|
setMesas(res.data);
|
|
})
|
|
.catch((err) => console.error(err))
|
|
.finally(() => setLoading(false));
|
|
}, [id_cuenta]);
|
|
|
|
if (loading) return <p>Cargando mesas...</p>;
|
|
|
|
return (
|
|
<div>
|
|
<h3>Mesas asignadas</h3>
|
|
|
|
{mesas.length === 0 ? (
|
|
<p>No hay mesas</p>
|
|
) : (
|
|
<ul>
|
|
{mesas.map((mesa) => (
|
|
<li key={mesa.id_mesa}>
|
|
Mesa {mesa.id_mesa} {mesa.nombre && `- ${mesa.nombre}`}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SearchMesa() {
|
|
const [inputValue, setInputValue] = useState("");
|
|
const [idCuenta, setIdCuenta] = useState<number | null>(null);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
|
|
const buscar = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
if (inputValue) {
|
|
params.set("table", `${inputValue}`);
|
|
router.push(`${pathname}?${params.toString()}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<form className="containerForm" onSubmit={buscar}>
|
|
<label>Numero de mesa</label>
|
|
|
|
<div className="groupInput">
|
|
<input
|
|
type="number"
|
|
placeholder="Coloca el numero de mesa"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
/>
|
|
|
|
<button type="submit" className="button buttonSearch">
|
|
Buscar
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</>
|
|
);
|
|
}
|