diff --git a/src/components/ProductSelect/ProductSelect.tsx b/src/components/ProductSelect/ProductSelect.tsx index 5fce96c..8da6203 100644 --- a/src/components/ProductSelect/ProductSelect.tsx +++ b/src/components/ProductSelect/ProductSelect.tsx @@ -1,10 +1,11 @@ import {ProductSchema} from "../../client"; -import {FC} from "react"; +import {FC, useEffect, useState} from "react"; import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx"; import {omit} from "lodash"; import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx"; import {ComboboxItem, Image, Loader, OptionsFilter, rem, SelectProps, Text, Tooltip} from "@mantine/core"; import {getProductFields} from "../../types/utils.ts"; +import {useDebouncedValue} from "@mantine/hooks"; type RestProps = { clientId: number; @@ -12,9 +13,14 @@ type RestProps = { const MAX_PRODUCTS = 200; type Props = Omit, 'data'> & RestProps; const ProductSelect: FC = (props: Props) => { - const {products, isLoading} = useProductsList({ + const [searchValue, setSearchValue] = useState(""); + const [debouncedSearch] = useDebouncedValue(searchValue, 1000); + const [itemsPerPage, setItemsPerPage] = useState(1); + const {products, isLoading, paginationInfo} = useProductsList({ clientId: props.clientId, - searchInput: "" + searchInput: debouncedSearch, + page: 0, + itemsPerPage: itemsPerPage }); const restProps = omit(props, ['clientId']); const renderOption: SelectProps['renderOption'] = (item) => { @@ -38,10 +44,7 @@ const ProductSelect: FC = (props: Props) => { alt={product.name} maw={rem(250)} />} - - - }>
{product.name}
@@ -49,10 +52,7 @@ const ProductSelect: FC = (props: Props) => {
) } - const optionsFilter: OptionsFilter = ({options, search}) => { - - const filtered = (options as ComboboxItem[]).filter((option) => { const product = products.find(product => product.id == parseInt(option.value)); if (!product) return true; @@ -61,18 +61,33 @@ const ProductSelect: FC = (props: Props) => { product.article?.toLowerCase() === search.toLowerCase(); } ); - filtered.sort((a, b) => a.label.localeCompare(b.label)); - return filtered.length > MAX_PRODUCTS ? filtered.slice(0, MAX_PRODUCTS) : filtered; }; + const setSearchValueImpl = (value: string) => { + if (!paginationInfo) return; + if (paginationInfo.totalItems === itemsPerPage) { + setSearchValue(""); + return; + } + setSearchValue(value); + } + + useEffect(() => { + if (!paginationInfo) return; + if (paginationInfo.totalItems < MAX_PRODUCTS) + setItemsPerPage(paginationInfo.totalItems); + else + setItemsPerPage(MAX_PRODUCTS); + }, [paginationInfo]); return ( : null } + onSearchChange={setSearchValueImpl} limit={products.length > MAX_PRODUCTS ? MAX_PRODUCTS : Infinity} renderOption={renderOption} searchable