From 75860395b22d0be3fc36859a3196ea8b6c20b26b Mon Sep 17 00:00:00 2001
From: fakz9 <fakc445@gmail.com>
Date: Thu, 8 Aug 2024 09:07:39 +0300
Subject: [PATCH] feat: additional stuff

---
 .../ProductAndServiceTab.module.css           |  6 +-
 .../ProductAndServiceTab.tsx                  | 72 +++++++++++--------
 .../DealServicesTable/DealServicesTable.tsx   | 20 ++++--
 .../ProductServicesTable.tsx                  | 34 +++++++--
 .../ProductView/ProductView.module.css        |  2 +
 .../components/ProductView/ProductView.tsx    | 17 ++++-
 6 files changed, 104 insertions(+), 47 deletions(-)

diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.module.css b/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.module.css
index 1df3a93..2ec1547 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.module.css
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.module.css
@@ -6,22 +6,22 @@
 }
 
 .container-disabled {
-    pointer-events: none;
-    opacity: 0.4;
 }
 
+
 .products-list {
     width: 60%;
     display: flex;
     flex-direction: column;
     gap: rem(10);
+    flex: 2;
 }
 
 .deal-container {
     display: flex;
     flex-direction: column;
-    height: 100%;
     gap: rem(10);
+    flex: 1;
 }
 
 .deal-container-wrapper {
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx b/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx
index e767dfa..2f53b65 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx
@@ -19,7 +19,7 @@ import classNames from "classnames";
 
 const ProductAndServiceTab: FC = () => {
     const {dealState, dealServicesState, dealProductsState} = useDealProductAndServiceTabState();
-
+    const isLocked = Boolean(dealState.deal?.billRequest);
     const onAddProductClick = () => {
         if (!dealProductsState.onCreate || !dealState.deal) return;
         const productIds = dealState.deal.products.map(product => product.product.id);
@@ -130,7 +130,7 @@ const ProductAndServiceTab: FC = () => {
         if (!dealState.deal) return;
         const dealId = dealState.deal.id;
         modals.openConfirmModal({
-            title: "Выставление счета",
+            withCloseButton: false,
             size: "xl",
             children:
                 <Text style={{textAlign: "justify"}}>
@@ -181,35 +181,47 @@ const ProductAndServiceTab: FC = () => {
                 </ScrollArea>
 
             </div>
+
             <div className={styles['deal-container']}>
-                <Flex direction={"column"} className={styles['deal-container-wrapper']}>
-                    <DealServicesTable
-                        onKitAdd={onDealKitAdd}
-                        {...dealServicesState}
-                    />
-                    <Divider my={rem(15)}/>
-                    <div className={styles['deal-container-buttons']}>
-                        <Button
-                            variant={"default"}
-                            fullWidth
-                            onClick={onCreateProductClick}
-                        >Создать товар</Button>
-                        <Button
-                            onClick={onAddProductClick}
-                            variant={"default"}
-                            fullWidth>Добавить товар</Button>
-                    </div>
-                    <Divider my={rem(15)}/>
-                    <div className={styles['deal-container-buttons']}>
-                        <Button
-                            onClick={onCreateBillClick}
-                            variant={"default"}
-                            fullWidth>Выставить счет</Button>
-                    </div>
-                </Flex>
-                <Flex direction={"column"} className={styles['deal-container-wrapper']}>
-                    <Title order={3}>Общая стоимость всех услуг: {getTotalPrice().toLocaleString("ru")}₽</Title>
-                </Flex>
+                <ScrollArea offsetScrollbars>
+
+                    <Flex direction={"column"} className={styles['deal-container-wrapper']}>
+                        <DealServicesTable
+                            onKitAdd={onDealKitAdd}
+                            {...dealServicesState}
+                        />
+
+                        <Divider my={rem(15)}/>
+                        <div className={styles['deal-container-buttons']}>
+                            <Button
+                                disabled={isLocked}
+
+                                variant={"default"}
+                                fullWidth
+                                onClick={onCreateProductClick}
+                            >Создать товар</Button>
+                            <Button
+                                disabled={isLocked}
+
+                                onClick={onAddProductClick}
+                                variant={"default"}
+                                fullWidth>Добавить товар</Button>
+                        </div>
+                        <Divider my={rem(15)}/>
+                        <div className={styles['deal-container-buttons']}>
+                            <Button
+                                disabled={isLocked}
+                                onClick={onCreateBillClick}
+                                variant={"default"}
+                                fullWidth>Выставить счет</Button>
+                        </div>
+
+                    </Flex>
+                    <Flex direction={"column"} className={styles['deal-container-wrapper']}>
+                        <Title order={3}>Общая стоимость всех услуг: {getTotalPrice().toLocaleString("ru")}₽</Title>
+                    </Flex>
+                </ScrollArea>
+
             </div>
 
         </div>
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx
index b05c468..19a71b9 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx
@@ -9,6 +9,7 @@ import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUser
 import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
 import {useSelector} from "react-redux";
 import {RootState} from "../../../../../../redux/store.ts";
+import useDealProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
 
 type RestProps = {
     onKitAdd?: (kit: GetServiceKitSchema) => void
@@ -17,6 +18,9 @@ type Props = CRUDTableProps<DealServiceSchema> & RestProps;
 const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKitAdd}) => {
     const authState = useSelector((state: RootState) => state.auth);
 
+    const {dealState} = useDealProductAndServiceTabState();
+    const isLocked = Boolean(dealState.deal?.billRequest);
+
     const [currentService, setCurrentService] = useState<DealServiceSchema | undefined>();
     const [employeesModalVisible, setEmployeesModalVisible] = useState(false);
 
@@ -81,7 +85,8 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
                 onSelect: onKitAdd,
                 serviceType: ServiceType.DEAL_SERVICE
             },
-            title: 'Печать штрихкода',
+            withCloseButton: false
+
         })
     }
     return (
@@ -101,11 +106,11 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
                         style={{textAlign: "center"}}
                         mb={rem(10)}
                     >Общие услуги</Title>
+
                     <Flex
                         direction={"column"}
                         gap={rem(10)}
                     >
-
                         {items.map(service => (
                             <Flex
                                 key={service.service.id}
@@ -114,9 +119,11 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
                                 align={"center"}
                             >
                                 <Tooltip
+
                                     onClick={() => onDeleteClick(service)}
                                     label="Удалить услугу">
                                     <ActionIcon
+                                        disabled={isLocked}
                                         variant={"default"}>
                                         <IconTrash/>
                                     </ActionIcon>
@@ -132,15 +139,18 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
                                     flex={1}
                                 >{service.service.name}</Text>
                                 <NumberInput
+                                    disabled={isLocked}
+                                    flex={1}
                                     suffix={" шт."}
                                     onChange={event => isNumber(event) && onQuantityChange(service, event)}
                                     value={service.quantity}
                                 />
                                 <NumberInput
+                                    flex={1}
                                     onChange={event => isNumber(event) && onPriceChange(service, event)}
                                     suffix={"₽"}
                                     value={service.price}
-                                    disabled={authState.isGuest}
+                                    disabled={authState.isGuest || isLocked}
                                 />
                             </Flex>
                         ))}
@@ -152,13 +162,15 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
                         order={3}
                     >Итог: {items.reduce((acc, item) => acc + (item.price * item.quantity), 0)}₽</Title>
                 </Flex>
-                <Flex direction={"column"} gap={rem(10)}  mt={"auto"}>
+                <Flex direction={"column"} gap={rem(10)} mt={"auto"}>
                     <Button
+                        disabled={isLocked}
                         onClick={onCreateClick}
                         fullWidth
                         variant={"default"}
                     >Добавить услугу</Button>
                     <Button
+                        disabled={isLocked}
                         onClick={onAddKitClick}
                         fullWidth
                         variant={"default"}
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx
index 6353e58..1aaee02 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx
@@ -10,6 +10,7 @@ import {modals} from "@mantine/modals";
 import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUsersTable.tsx";
 import {useSelector} from "react-redux";
 import {RootState} from "../../../../../../redux/store.ts";
+import useDealProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
 
 type RestProps = {
     quantity: number;
@@ -27,6 +28,8 @@ const ProductServicesTable: FC<Props> = ({
                                              onCopyServices,
                                              onKitAdd
                                          }) => {
+    const {dealState} = useDealProductAndServiceTabState();
+    const isLocked = Boolean(dealState.deal?.billRequest);
     const authState = useSelector((state: RootState) => state.auth);
 
     const columns = useProductServicesTableColumns({data: items, quantity});
@@ -99,14 +102,26 @@ const ProductServicesTable: FC<Props> = ({
                         enableBottomToolbar: true,
                         renderBottomToolbar: (
                             <Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
-                                <Button onClick={() => onKitAdd && onKitAdd()} variant={"default"}>
+                                <Button
+                                    disabled={isLocked}
+                                    onClick={() => onKitAdd && onKitAdd()}
+                                    variant={"default"}
+                                >
                                     Добавить набор услуг
                                 </Button>
-                                <Button onClick={() => onCopyServices && onCopyServices()} variant={"default"}>
+                                <Button
+                                    disabled={isLocked}
+                                    onClick={() => onCopyServices && onCopyServices()}
+                                    variant={"default"}
+                                >
                                     Продублировать услуги
                                 </Button>
 
-                                <Button onClick={onCreateClick} variant={"default"}>
+                                <Button
+                                    disabled={isLocked}
+                                    onClick={onCreateClick}
+                                    variant={"default"}
+                                >
                                     Добавить услугу
                                 </Button>
 
@@ -115,14 +130,19 @@ const ProductServicesTable: FC<Props> = ({
                         renderRowActions: ({row}) => (
                             <Flex gap="md">
                                 <Tooltip label="Удалить">
-                                    <ActionIcon onClick={() => {
-                                        if (onDelete) onDelete(row.original);
-                                    }} variant={"default"}>
+                                    <ActionIcon
+
+                                        onClick={() => {
+                                            if (onDelete) onDelete(row.original);
+                                        }} variant={"default"}>
                                         <IconTrash/>
                                     </ActionIcon>
                                 </Tooltip>
-                                <Tooltip label="Редактировать">
+                                <Tooltip
+
+                                    label="Редактировать">
                                     <ActionIcon
+
                                         onClick={() => onChangeClick(row.original)}
                                         variant={"default"}>
                                         <IconEdit/>
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.module.css b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.module.css
index b9b416b..5937e4e 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.module.css
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.module.css
@@ -5,6 +5,7 @@
     gap: rem(20);
     padding: rem(10);
     margin-bottom: rem(10);
+    flex: 1;
 }
 
 .image-container {
@@ -26,6 +27,7 @@
     display: flex;
     flex-direction: column;
     gap: rem(10);
+    flex: 1;
 }
 
 .attributes-container {
diff --git a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
index 71c84b2..f0d2027 100644
--- a/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
+++ b/src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
@@ -6,12 +6,13 @@ import {
     ProductSchema
 } from "../../../../../../client";
 import styles from './ProductView.module.css';
-import {ActionIcon, Flex, Image, NumberInput, rem, Spoiler, Text, Title, Tooltip} from '@mantine/core';
+import {ActionIcon, Box, Flex, Image, NumberInput, rem, Spoiler, Text, 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";
 
 type Props = {
     product: DealProductSchema;
@@ -40,6 +41,8 @@ const ProductView: FC<Props> = ({
                                     onKitAdd,
                                     onProductEdit
                                 }) => {
+    const {dealState} = useDealProductAndServiceTabState();
+    const isLocked = Boolean(dealState.deal?.billRequest);
     const onDeleteClick = () => {
         if (!onDelete) return;
         onDelete(product);
@@ -95,7 +98,7 @@ const ProductView: FC<Props> = ({
                 onSelect: (kit) => onKitAdd(product, kit),
                 serviceType: ServiceType.PRODUCT_SERVICE
             },
-            title: 'Печать штрихкода',
+            withCloseButton: false
         })
     }
 
@@ -134,7 +137,10 @@ const ProductView: FC<Props> = ({
                     </Spoiler>
 
                 </div>
+                <Box/>
                 <NumberInput
+                    mt={rem(10)}
+                    disabled={isLocked}
                     suffix={" шт."}
                     value={product.quantity}
                     onChange={event => isNumber(event) && onQuantityChange(event)}
@@ -158,9 +164,11 @@ const ProductView: FC<Props> = ({
                     gap={rem(10)}
                 >
                     <Tooltip
+
                         onClick={onPrintBarcodeClick}
                         label="Печать штрихкода">
                         <ActionIcon
+
                             variant={"default"}>
                             <IconBarcode/>
                         </ActionIcon>
@@ -169,13 +177,16 @@ const ProductView: FC<Props> = ({
                         onClick={onProductEditClick}
                         label="Редактировать товар">
                         <ActionIcon
+
                             variant={"default"}>
                             <IconEdit/>
                         </ActionIcon>
                     </Tooltip>
                     <Tooltip onClick={onDeleteClick} label="Удалить товар">
                         <ActionIcon
-                            variant={"default"}>
+                            disabled={isLocked}
+                            variant={"default"}
+                        >
                             <IconTrash/>
                         </ActionIcon>
                     </Tooltip>