From 71a88c9e1a41931cefc26978fe84c3357b30d0ea Mon Sep 17 00:00:00 2001 From: admin Date: Tue, 3 Sep 2024 21:46:08 +0300 Subject: [PATCH] feat: product select --- .../ProductSelect/ProductSelect.tsx | 31 ++++++------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/src/components/ProductSelect/ProductSelect.tsx b/src/components/ProductSelect/ProductSelect.tsx index 8da6203..bdcb432 100644 --- a/src/components/ProductSelect/ProductSelect.tsx +++ b/src/components/ProductSelect/ProductSelect.tsx @@ -1,5 +1,5 @@ import {ProductSchema} from "../../client"; -import {FC, useEffect, useState} from "react"; +import {FC, useState} from "react"; import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx"; import {omit} from "lodash"; import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx"; @@ -14,13 +14,12 @@ const MAX_PRODUCTS = 200; type Props = Omit, 'data'> & RestProps; const ProductSelect: FC = (props: Props) => { const [searchValue, setSearchValue] = useState(""); - const [debouncedSearch] = useDebouncedValue(searchValue, 1000); - const [itemsPerPage, setItemsPerPage] = useState(1); - const {products, isLoading, paginationInfo} = useProductsList({ + const [debounced] = useDebouncedValue(searchValue, 500); + const {products, isLoading} = useProductsList({ clientId: props.clientId, - searchInput: debouncedSearch, + searchInput: debounced, page: 0, - itemsPerPage: itemsPerPage + itemsPerPage: MAX_PRODUCTS }); const restProps = omit(props, ['clientId']); const renderOption: SelectProps['renderOption'] = (item) => { @@ -53,6 +52,7 @@ const ProductSelect: FC = (props: Props) => { ) } const optionsFilter: OptionsFilter = ({options, search}) => { + return options; const filtered = (options as ComboboxItem[]).filter((option) => { const product = products.find(product => product.id == parseInt(option.value)); if (!product) return true; @@ -65,30 +65,19 @@ const ProductSelect: FC = (props: Props) => { return filtered.length > MAX_PRODUCTS ? filtered.slice(0, MAX_PRODUCTS) : filtered; }; const setSearchValueImpl = (value: string) => { - if (!paginationInfo) return; - if (paginationInfo.totalItems === itemsPerPage) { - setSearchValue(""); - return; - } + const names = products.map(product => product.name); + if (names.includes(value)) 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 {...restProps}