new product select

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}
         />
     )
 }

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}
         />
     )
 }