new product select

src/components/ProductSelect/ProductSelect.tsx

@@ -3,6 +3,9 @@ import {FC} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
 import {omit} from "lodash";
 import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
+import {Text, Tooltip} from "@mantine/core";
+import {ComboboxLikeRenderOptionInput} from "@mantine/core/lib/components/Combobox";
+import {getProductFields} from "../../types/utils.ts";
 
 type RestProps = {
     clientId: number;
@@ -11,8 +14,27 @@ type Props = Omit<ObjectSelectProps<ProductSchema>, 'data'> & RestProps;
 const ProductSelect: FC<Props> = (props: Props) => {
     const {products} = useProductsList({clientId: props.clientId});
     const restProps = omit(props, ['clientId']);
+    const renderOption = (item: ComboboxLikeRenderOptionInput) => {
+        const product = products.find(product => product.id == parseInt(item.option.value));
+        if (!product) return item.option.label;
+        const productFields = getProductFields(product);
+        return (
+            <Tooltip
+                style={{whiteSpace: "pre-line"}}
+                multiline
+                disabled={productFields.length === 0}
+                label={productFields.map(([key, value]) => {
+                    return `${key.toString()}: ${value.toString()}`;
+                }).join('\n')}>
+                <div>
+                    {item.option.label}<br/>
+                    {product.barcodes && <Text size={"xs"}>{product.barcodes[0]}</Text>}
+                </div>
+            </Tooltip>)
+    }
     return (
         <ObjectSelect
+            renderOption={renderOption}
             {...restProps}
             data={products}
         />