From 5ba316eec6a2027367fa7d797f140622c656e8c0 Mon Sep 17 00:00:00 2001
From: fakz9 <fakc445@gmail.com>
Date: Mon, 29 Jul 2024 00:35:35 +0300
Subject: [PATCH] new product select

---
 .../ProductSelect/ProductSelect.tsx           | 20 +++++++++++++++++--
 .../ServiceSelectNew/ServiceSelectNew.tsx     | 17 +++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductSelect/ProductSelect.tsx b/src/components/ProductSelect/ProductSelect.tsx
index 9c96524..87d93bf 100644
--- a/src/components/ProductSelect/ProductSelect.tsx
+++ b/src/components/ProductSelect/ProductSelect.tsx
@@ -3,7 +3,7 @@ import {FC} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
 import {omit} from "lodash";
 import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
-import {SelectProps, Text, Tooltip} from "@mantine/core";
+import {ComboboxItem, OptionsFilter, SelectProps, Text, Tooltip} from "@mantine/core";
 import {getProductFields} from "../../types/utils.ts";
 
 type RestProps = {
@@ -26,16 +26,32 @@ const ProductSelect: FC<Props> = (props: Props) => {
                     return `${key.toString()}: ${value.toString()}`;
                 }).join('\n')}>
                 <div>
-                    {item.option.label}<br/>
+                    {product.name}<br/>
                     {product.barcodes && <Text size={"xs"}>{product.barcodes[0]}</Text>}
                 </div>
             </Tooltip>)
     }
+
+    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;
+                return product.name.toLowerCase().includes(search) || product.barcodes.some((value) => value.toLowerCase().includes(search));
+            }
+        );
+
+        filtered.sort((a, b) => a.label.localeCompare(b.label));
+        return filtered;
+    };
     return (
         <ObjectSelect
             renderOption={renderOption}
+            searchable
             {...restProps}
             data={products}
+            filter={optionsFilter}
         />
     )
 }
diff --git a/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx b/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx
index 0704b0f..9a6ae3a 100644
--- a/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx
+++ b/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx
@@ -4,6 +4,10 @@ import {ServiceSchema} from "../../../client";
 import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.tsx";
 import {omit} from "lodash";
 import {ServiceType} from "../../../shared/enums/ServiceType.ts";
+import {ComboboxItem, OptionsFilter} from "@mantine/core";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import {ComboboxParsedItemGroup} from "@mantine/core/lib/components/Combobox/Combobox.types";
 
 
 type RestProps = {
@@ -15,12 +19,23 @@ const ServiceSelectNew: FC<Props> = (props: Props) => {
     const data = props.filterType ? services.filter(service => service.serviceType === props.filterType) : services;
 
     const restProps = omit(props, ['filterType']);
-
+    const optionsFilter: OptionsFilter = ({options, search}) => {
+        return (options as ComboboxParsedItemGroup<ComboboxItem>[]).map((option) => {
+                return {
+                    ...option,
+                    items:
+                        option.items.filter((item: ComboboxItem) => item.label.toLowerCase().includes(search.toLowerCase()))
+                }
+            }
+        );
+    };
     return (
         <ObjectSelect
+            searchable
             {...restProps}
             data={data}
             groupBy={item => item.category.name}
+            filter={optionsFilter}
         />
     )
 }