From 7f769f84fb4a42a129cfef42b24509d2e6e4e0cc Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Thu, 7 Nov 2024 21:39:02 +0400
Subject: [PATCH] feat: deal product comments

---
 src/client/models/DealProductSchema.ts        |  1 +
 .../components/ProductView/ProductView.tsx    | 39 +++++++++++++------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/client/models/DealProductSchema.ts b/src/client/models/DealProductSchema.ts
index 62e042f..1ce0fd5 100644
--- a/src/client/models/DealProductSchema.ts
+++ b/src/client/models/DealProductSchema.ts
@@ -8,5 +8,6 @@ export type DealProductSchema = {
     product: ProductSchema;
     services: Array<DealProductServiceSchema>;
     quantity: number;
+    comment?: string;
 };
 
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
index ac38b8b..a5c351e 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import {
     DealProductSchema,
     DealProductServiceSchema,
@@ -6,23 +6,14 @@ import {
     ProductSchema,
 } from "../../../../../../client";
 import styles from "./ProductView.module.css";
-import {
-    ActionIcon,
-    Box,
-    Flex,
-    Image,
-    NumberInput,
-    rem,
-    Text,
-    Title,
-    Tooltip,
-} from "@mantine/core";
+import { ActionIcon, Box, Flex, Image, NumberInput, rem, Text, Textarea, Title, Tooltip } from "@mantine/core";
 import ProductServicesTable from "../ProductServicesTable/ProductServicesTable.tsx";
 import { isNil, isNumber } from "lodash";
 import { IconBarcode, IconEdit, IconTrash } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
 import { ServiceType } from "../../../../../../shared/enums/ServiceType.ts";
 import useDealProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
+import { useDebouncedValue } from "@mantine/hooks";
 
 type Props = {
     product: DealProductSchema;
@@ -53,11 +44,23 @@ const ProductView: FC<Props> = ({
 }) => {
     const { dealState } = useDealProductAndServiceTabState();
     const isLocked = Boolean(dealState.deal?.billRequest);
+
+    const [productComment, setProductComment] = useState(product.comment);
+    const [debouncedProductComment] = useDebouncedValue(productComment, 600);
+
     const onDeleteClick = () => {
         if (!onDelete) return;
         onDelete(product);
     };
 
+    useEffect(() => {
+        if (!onChange || debouncedProductComment === product.comment) return;
+        onChange({
+            ...product,
+            comment: debouncedProductComment,
+        })
+    }, [debouncedProductComment]);
+
     const onServiceDelete = (item: DealProductServiceSchema) => {
         if (!onChange) return;
         onChange({
@@ -167,6 +170,18 @@ const ProductView: FC<Props> = ({
                     }
                     placeholder={"Введите количество товара"}
                 />
+                <Textarea
+                    mih={rem(140)}
+                    styles={{
+                        wrapper: {height:'90%'},
+                        input: {height:'90%'}
+                    }}
+                    my={rem(10)}
+                    disabled={isLocked}
+                    value={productComment}
+                    onChange={event => setProductComment(event.target.value)}
+                    placeholder={"Введите комментарий для товара"}
+                />
             </div>
 
             <div className={styles["services-container"]}>