From 814c06301b0950be473de0b4beebedd811acb03b Mon Sep 17 00:00:00 2001
From: fakz9 <fakc445@gmail.com>
Date: Wed, 24 Jul 2024 16:15:23 +0300
Subject: [PATCH] new product select

---
 .../ProductSelect/ProductSelect.tsx           | 22 +++++++++++++++++++
 .../components/ProductView/ProductView.tsx    |  2 +-
 src/types/utils.ts                            | 13 +++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/ProductSelect/ProductSelect.tsx b/src/components/ProductSelect/ProductSelect.tsx
index 61eec03..be41210 100644
--- a/src/components/ProductSelect/ProductSelect.tsx
+++ b/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}
         />
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
index ecd3c55..247ddeb 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
@@ -15,7 +15,7 @@ type Props = {
 type ProductFieldNames = {
     [K in keyof ProductSchema]: string
 }
-const ProductFieldNames: Partial<ProductFieldNames> = {
+export const ProductFieldNames: Partial<ProductFieldNames> = {
     color: "Цвет",
     article: "Артикул",
     size: "Размер",
diff --git a/src/types/utils.ts b/src/types/utils.ts
index 9866dc8..40179df 100644
--- a/src/types/utils.ts
+++ b/src/types/utils.ts
@@ -1,3 +1,8 @@
+import {ProductSchema} from "../client";
+import {isNil} from "lodash";
+import {Text} from "@mantine/core";
+import {ProductFieldNames} from "../pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx";
+
 export type ObjectWithNameAndId = {
     id: number;
     name: string;
@@ -10,4 +15,12 @@ export type BaseFormInputProps<T> = {
 }
 export const formatDate = (date: string) => {
     return new Date(date).toLocaleDateString("ru-RU");
+}
+
+export const getProductFields = (product: ProductSchema) => {
+    return Object.entries(product).map(([key, value]) => {
+        const fieldName = ProductFieldNames[key as keyof ProductSchema];
+        if (!fieldName || isNil(value) || value === '' || !value) return;
+        return [fieldName.toString(), value.toString()];
+    }).filter(obj => obj !== undefined) || [];
 }
\ No newline at end of file