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

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: "Размер",

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) || [];
 }