feat: additional stuff

2024-08-08 09:07:39 +03:00
parent 1ad96e3a69
commit 75860395b2
6 changed files with 104 additions and 47 deletions
--- 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 {
--- 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>
--- 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"}
--- 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/>
--- 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 {
--- 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>