From 0a4e20e8886e64391227940848886ef808ead80d Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Fri, 31 Jan 2025 20:18:01 +0400
Subject: [PATCH] feat: searchable product select and department select

---
 .../ProductSelect/ProductSelect.tsx           | 137 +-----------------
 .../ProductSelect/utils/getRenderOptions.tsx  |  50 +++++++
 .../components/DepartmentSelect.tsx           |   1 +
 .../components/ShippingProductSelect.tsx      |  40 +++++
 .../modals/ShippingProductModal.tsx           |  33 +++--
 .../ShippingTab/types/ShippingProductData.tsx |  14 +-
 .../ShippingTab/utils/getRestProducts.tsx     |   7 +-
 7 files changed, 126 insertions(+), 156 deletions(-)
 create mode 100644 src/components/ProductSelect/utils/getRenderOptions.tsx
 create mode 100644 src/pages/LeadsPage/tabs/ShippingTab/components/ShippingProductSelect.tsx

diff --git a/src/components/ProductSelect/ProductSelect.tsx b/src/components/ProductSelect/ProductSelect.tsx
index 4ad6796..cae05b4 100644
--- a/src/components/ProductSelect/ProductSelect.tsx
+++ b/src/components/ProductSelect/ProductSelect.tsx
@@ -2,21 +2,10 @@ import { ProductSchema } from "../../client";
 import { FC, 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 ObjectSelect, { ObjectSelectProps } from "../ObjectSelect/ObjectSelect.tsx";
+import { Loader, OptionsFilter } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
+import getRenderOptions from "./utils/getRenderOptions.tsx";
 
 type RestProps = {
     clientId: number;
@@ -33,68 +22,8 @@ const ProductSelect: FC<Props> = (props: Props) => {
         itemsPerPage: MAX_PRODUCTS,
     });
     const restProps = omit(props, ["clientId"]);
-    const renderOption: SelectProps["renderOption"] = item => {
-        const product = products.find(
-            product => product.id == parseInt(item.option.value)
-        );
-        if (!product) return item.option.label;
-        const productFields = getProductFields(product);
-        const imageUrl =
-            product.images && product.images[0]
-                ? product.images[0].imageUrl
-                : undefined;
 
-        return (
-            <Tooltip
-                style={{ whiteSpace: "pre-line" }}
-                multiline
-                disabled={productFields.length === 0}
-                label={
-                    <>
-                        {productFields
-                            .map(([key, value]) => {
-                                return `${key.toString()}: ${value.toString()}`;
-                            })
-                            .join("\n")}
-                        {imageUrl && (
-                            <Image
-                                src={imageUrl}
-                                alt={product.name}
-                                maw={rem(250)}
-                            />
-                        )}
-                    </>
-                }>
-                <div>
-                    {product.name}
-                    <br />
-                    {product.barcodes && (
-                        <Text size={"xs"}>{product.barcodes[0]}</Text>
-                    )}
-                </div>
-            </Tooltip>
-        );
-    };
-    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;
-            return (
-                product.name.toLowerCase().includes(search.toLowerCase()) ||
-                product.barcodes.some(value =>
-                    value.toLowerCase().includes(search.toLowerCase())
-                ) ||
-                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 optionsFilter: OptionsFilter = ({ options }) => options;
     const setSearchValueImpl = (value: string) => {
         const names = products.map(product => product.name);
         if (names.includes(value)) return;
@@ -103,14 +32,13 @@ const ProductSelect: FC<Props> = (props: Props) => {
 
     return (
         <ObjectSelect
-            // disabled={isLoading}
             rightSection={
                 isLoading || searchValue !== debounced ? (
                     <Loader size={"sm"} />
                 ) : null
             }
             onSearchChange={setSearchValueImpl}
-            renderOption={renderOption}
+            renderOption={getRenderOptions(products)}
             searchable
             {...restProps}
             data={products}
@@ -118,58 +46,5 @@ const ProductSelect: FC<Props> = (props: Props) => {
         />
     );
 };
+
 export default ProductSelect;
-// type ControlledValueProps = {
-//     value: ProductSchema;
-//     onChange: (value: ProductSchema) => void;
-// }
-// type RestProps = {
-//     defaultValue?: ProductSchema;
-//     onChange: (value: ProductSchema) => void;
-//     clientId: number;
-// }
-// type Props = (RestProps & Partial<ControlledValueProps>) & Omit<SelectProps, 'value' | 'onChange'>;
-//
-// const ProductSelect: FC<Props> = (props) => {
-//     const isControlled = 'value' in props;
-//     const [intertalValue, setInternalValue] = useState<ProductSchema | undefined>(props.defaultValue);
-//     const value = isControlled ? props.value : intertalValue
-//
-//     const {products} = useProductsList({clientId: props.clientId});
-//
-//
-//     const data = useMemo(() => products.reduce((acc, product) => {
-//         acc.push({
-//             label: product.name,
-//             value: product.id.toString()
-//         });
-//         return acc;
-//     }, [] as { label: string, value: string }[]), [products]);
-//
-//     const handleOnChange = (event: string | null) => {
-//         if (!event) return;
-//         const product = products.find(product => parseInt(event) == product.id);
-//         if (!product) return;
-//         if (isControlled) {
-//             props.onChange(product);
-//             return;
-//         }
-//         setInternalValue(product);
-//     }
-//     useEffect(() => {
-//         if (isControlled || !intertalValue) return;
-//         props.onChange(intertalValue);
-//     }, [intertalValue]);
-//     const restProps = omit(props, ['clientId'])
-//     return (
-//         <Select
-//             {...restProps}
-//             withCheckIcon={false}
-//             searchable
-//             value={value?.id.toString()}
-//             onChange={handleOnChange}
-//             data={data}
-//         />
-//     )
-// }
-// export default ProductSelect;
diff --git a/src/components/ProductSelect/utils/getRenderOptions.tsx b/src/components/ProductSelect/utils/getRenderOptions.tsx
new file mode 100644
index 0000000..3f33a85
--- /dev/null
+++ b/src/components/ProductSelect/utils/getRenderOptions.tsx
@@ -0,0 +1,50 @@
+import { ProductSchema } from "../../../client";
+import { ComboboxItem, ComboboxLikeRenderOptionInput, Image, rem, SelectProps, Text, Tooltip } from "@mantine/core";
+import { getProductFields } from "../../../types/utils.ts";
+
+const getRenderOptions = (products: ProductSchema[]): SelectProps["renderOption"] => {
+    return (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+        const product = products.find(
+            product => product.id == parseInt(item.option.value),
+        );
+        if (!product) return item.option.label;
+        const productFields = getProductFields(product);
+        const imageUrl =
+            product.images && product.images[0]
+                ? product.images[0].imageUrl
+                : undefined;
+
+        return (
+            <Tooltip
+                style={{ whiteSpace: "pre-line" }}
+                multiline
+                disabled={productFields.length === 0}
+                label={
+                    <>
+                        {productFields
+                            .map(([key, value]) => {
+                                return `${key.toString()}: ${value.toString()}`;
+                            })
+                            .join("\n")}
+                        {imageUrl && (
+                            <Image
+                                src={imageUrl}
+                                alt={product.name}
+                                maw={rem(250)}
+                            />
+                        )}
+                    </>
+                }>
+                <div>
+                    {product.name}
+                    <br />
+                    {product.barcodes && (
+                        <Text size={"xs"}>{product.barcodes[0]}</Text>
+                    )}
+                </div>
+            </Tooltip>
+        );
+    };
+};
+
+export default getRenderOptions;
diff --git a/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx
index 81f2927..8a0e7d5 100644
--- a/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx
+++ b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx
@@ -73,6 +73,7 @@ const DepartmentSelect = ({
             value={getDepartmentValue()}
             onChange={setDepartmentValue}
             label={"Родительский департамент/отдел"}
+            searchable
         />
     );
 };
diff --git a/src/pages/LeadsPage/tabs/ShippingTab/components/ShippingProductSelect.tsx b/src/pages/LeadsPage/tabs/ShippingTab/components/ShippingProductSelect.tsx
new file mode 100644
index 0000000..cdf8842
--- /dev/null
+++ b/src/pages/LeadsPage/tabs/ShippingTab/components/ShippingProductSelect.tsx
@@ -0,0 +1,40 @@
+import { ProductSchema } from "../../../../../client";
+import { FC, useState } from "react";
+import ObjectSelect, { ObjectSelectProps } from "../../../../../components/ObjectSelect/ObjectSelect.tsx";
+import getRenderOptions from "../../../../../components/ProductSelect/utils/getRenderOptions.tsx";
+
+
+type Props = Omit<ObjectSelectProps<ProductSchema>, "searchValue" | "onSearchChange">;
+
+const ShippingProductSelect: FC<Props> = (props: Props) => {
+    const [search, setSearch] = useState("");
+
+    const getFilteredData = () => {
+        const searchValue: string = search.toLowerCase();
+
+        const data: ProductSchema[] = props.data.filter(product => {
+            return (
+                product.name.toLowerCase().includes(searchValue) ||
+                product.article?.toLowerCase().includes(searchValue) ||
+                product.barcodes && product.barcodes[0].toLowerCase().includes(searchValue)
+            );
+        });
+        return data;
+    };
+
+    return (
+        <ObjectSelect
+            label={"Товар"}
+            placeholder={"Выберите товар"}
+            searchable
+            {...props}
+            data={getFilteredData()}
+            searchValue={search}
+            onSearchChange={setSearch}
+            renderOption={getRenderOptions(props.data)}
+            filter={({ options }) => options}
+        />
+    );
+};
+
+export default ShippingProductSelect;
diff --git a/src/pages/LeadsPage/tabs/ShippingTab/modals/ShippingProductModal.tsx b/src/pages/LeadsPage/tabs/ShippingTab/modals/ShippingProductModal.tsx
index be4b677..c8d357b 100644
--- a/src/pages/LeadsPage/tabs/ShippingTab/modals/ShippingProductModal.tsx
+++ b/src/pages/LeadsPage/tabs/ShippingTab/modals/ShippingProductModal.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "@mantine/form";
 import { ContextModalProps } from "@mantine/modals";
-import { Button, Flex, NumberInput, rem, Select, Text } from "@mantine/core";
+import { Button, Flex, NumberInput, rem, Text } from "@mantine/core";
 import getRestProducts from "../utils/getRestProducts.tsx";
 import {
     CreateBoxInDealSchema,
@@ -8,14 +8,15 @@ import {
     CreateShippingProductSchema,
     DealProductSchema,
     DealSchema,
+    ProductSchema,
     ShippingService,
     UpdateBoxSchema,
     UpdateShippingProductSchema,
 } from "../../../../../client";
 import { notifications } from "../../../../../shared/lib/notifications.ts";
-import { ShippingData, ShippingModalForm, ShippingProductOption } from "../types/ShippingProductData.tsx";
+import { ShippingData, ShippingModalForm } from "../types/ShippingProductData.tsx";
 import { useEffect, useState } from "react";
-
+import ShippingProductSelect from "../components/ShippingProductSelect.tsx";
 
 
 type Props = {
@@ -31,11 +32,11 @@ const ShippingProductModal = ({
                                   innerProps,
                               }: ContextModalProps<Props>) => {
     const [restProducts, setRestProducts] = useState<Map<number, DealProductSchema>>(new Map());
-    const [restProductsSelectData, setRestProductSelectData] = useState<ShippingProductOption[]>([]);
+    const [restProductsSelectData, setRestProductSelectData] = useState<ProductSchema[]>([]);
 
     const getRestProductQuantity = () => {
-        if (form.values.productId) {
-            const restProduct = restProducts.get(Number(form.values.productId));
+        if (form.values.product) {
+            const restProduct = restProducts.get(form.values.product.id);
             if (restProduct) {
                 return restProduct.quantity;
             }
@@ -43,14 +44,19 @@ const ShippingProductModal = ({
         return 10000;
     };
 
+    const findProductById = (productId?: number | null) => {
+        const dealProduct = innerProps.deal.products.find(p => p.product.id === productId);
+        return dealProduct ? dealProduct.product : null;
+    };
+
     const initialValues: ShippingModalForm = {
         quantity: innerProps.shippingData.quantity ?? 0,
-        productId: innerProps.shippingData.productId,
+        product: findProductById(innerProps.shippingData.productId),
     };
     const form = useForm<ShippingModalForm>({
         initialValues,
         validate: {
-            productId: productId => !productId && "Необходимо выбрать товар",
+            product: product => !product && "Необходимо выбрать товар",
             quantity: quantity => quantity > getRestProductQuantity() ? "Слишком много товара" :
                 quantity === 0 && "Слишком мало товара",
         },
@@ -69,6 +75,7 @@ const ShippingProductModal = ({
         const data = {
             ...innerProps.shippingData,
             ...form.values,
+            productId: form.values.product?.id,
         } as CreateBoxInPalletSchema | CreateBoxInDealSchema | UpdateBoxSchema;
 
         ShippingService.updateBox({
@@ -86,6 +93,7 @@ const ShippingProductModal = ({
         const data = {
             ...innerProps.shippingData,
             ...form.values,
+            productId: form.values.product?.id,
         } as CreateShippingProductSchema | UpdateShippingProductSchema;
 
         ShippingService.updateShippingProduct({
@@ -108,7 +116,7 @@ const ShippingProductModal = ({
     };
 
     const getRestQuantityText = () => {
-        if (!form.values.productId) return;
+        if (!form.values.product) return;
 
         const restQuantityInDeal = getRestProductQuantity();
         const restQuantity = restQuantityInDeal - form.values.quantity;
@@ -125,12 +133,9 @@ const ShippingProductModal = ({
                 direction={"column"}
                 gap={rem(10)}
             >
-                <Select
+                <ShippingProductSelect
+                    {...form.getInputProps("product")}
                     data={restProductsSelectData}
-                    label={"Товар"}
-                    placeholder={"Выберите товар"}
-                    {...form.getInputProps("productId")}
-                    value={form.values.productId?.toString()}
                 />
 
                 {getRestQuantityText()}
diff --git a/src/pages/LeadsPage/tabs/ShippingTab/types/ShippingProductData.tsx b/src/pages/LeadsPage/tabs/ShippingTab/types/ShippingProductData.tsx
index 1acfea9..5c1944f 100644
--- a/src/pages/LeadsPage/tabs/ShippingTab/types/ShippingProductData.tsx
+++ b/src/pages/LeadsPage/tabs/ShippingTab/types/ShippingProductData.tsx
@@ -1,13 +1,13 @@
-import { CreateShippingProductSchema, UpdateBoxSchema, UpdateShippingProductSchema } from "../../../../../client";
+import {
+    CreateShippingProductSchema,
+    ProductSchema,
+    UpdateBoxSchema,
+    UpdateShippingProductSchema,
+} from "../../../../../client";
 
 export type ShippingModalForm = {
     quantity: number;
-    productId?: number | null;
-}
-
-export type ShippingProductOption = {
-    value: string;
-    label: string;
+    product?: ProductSchema | null;
 }
 
 export type ShippingData =
diff --git a/src/pages/LeadsPage/tabs/ShippingTab/utils/getRestProducts.tsx b/src/pages/LeadsPage/tabs/ShippingTab/utils/getRestProducts.tsx
index 4088e0b..dc87e00 100644
--- a/src/pages/LeadsPage/tabs/ShippingTab/utils/getRestProducts.tsx
+++ b/src/pages/LeadsPage/tabs/ShippingTab/utils/getRestProducts.tsx
@@ -1,4 +1,3 @@
-import { ShippingProductOption } from "../types/ShippingProductData.tsx";
 import { DealProductSchema, DealSchema, ProductSchema } from "../../../../../client";
 
 type UnaccountedValues = {
@@ -61,11 +60,11 @@ const getRestProducts = ({
         }
     });
 
-    const restProductsSelectData: ShippingProductOption[] = [];
+    const restProductsSelectData: ProductSchema[] = [];
 
     restProducts.forEach(
-        (restProduct, id) => {
-            restProductsSelectData.push({ value: String(id), label: restProduct.product.name });
+        (restProduct) => {
+            restProductsSelectData.push(restProduct.product);
         },
     );