62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { router, usePage } from '@inertiajs/react';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { controlClass } from '@/components/procurement';
|
|
|
|
export type CatalogueEntry = {
|
|
id: number;
|
|
version: number;
|
|
stock_item_id: number;
|
|
code: string;
|
|
description: string;
|
|
unit: string;
|
|
category: string;
|
|
purchase_type: string;
|
|
};
|
|
export type CatalogueOptions = {
|
|
ready: boolean;
|
|
search: string;
|
|
items: CatalogueEntry[];
|
|
more: boolean;
|
|
};
|
|
export function CatalogueSearch({ data }: { data: CatalogueOptions }) {
|
|
const [search, setSearch] = useState(data.search);
|
|
const path = usePage().url.split('?')[0];
|
|
function lookup() {
|
|
router.get(
|
|
path,
|
|
{ catalogo: search },
|
|
{ only: ['catalogue'], preserveState: true, preserveScroll: true },
|
|
);
|
|
}
|
|
return (
|
|
<fieldset className="mb-4 space-y-3 rounded-lg border p-4">
|
|
<legend>Artigos do catálogo da empresa</legend>
|
|
<p className="text-sm">
|
|
Seleccione uma fonte em cada linha. Descrição, categoria,
|
|
unidade e tipo são reutilizados; quantidade, estimativa e IVA
|
|
são dados deste pedido.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<input
|
|
aria-label="Pesquisar catálogo"
|
|
className={controlClass}
|
|
value={search}
|
|
maxLength={100}
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
lookup();
|
|
}
|
|
}}
|
|
/>
|
|
<Button type="button" variant="outline" onClick={lookup}>
|
|
Pesquisar catálogo
|
|
</Button>
|
|
</div>
|
|
{data.more && <p>Há mais artigos; refine a pesquisa.</p>}
|
|
</fieldset>
|
|
);
|
|
}
|