crap

2024-04-12 07:35:41 +03:00
parent 9815ebbc3b
commit 2d1fdf1ad9
41 changed files with 1199 additions and 85 deletions
--- a/src/pages/LeadsPage/components/DealProductsTable/DealProductsTable.tsx
+++ b/src/pages/LeadsPage/components/DealProductsTable/DealProductsTable.tsx
@@ -3,26 +3,53 @@ import useDealProductsTableColumns from "./columns.tsx";
 import {FC} from "react";
 import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
 import {DealProductSchema} from "../../../../client";
-import {Button, Flex, rem} from "@mantine/core";
+import {ActionIcon, Button, Flex, rem, Tooltip} from "@mantine/core";
 import {MRT_TableOptions} from "mantine-react-table";
 import {modals} from "@mantine/modals";
+import {IconBarcode, IconTrash} from "@tabler/icons-react";

 type RestProps = {
    clientId: number;
+    onMultipleDelete?: (items: DealProductSchema[]) => void;
 }
 type Props = CRUDTableProps<DealProductSchema> & RestProps;
-const DealProductsTable: FC<Props> = ({items, clientId}) => {
-    const columns = useDealProductsTableColumns();
+const DealProductsTable: FC<Props> = (props: Props) => {
+    const {items, clientId, onChange, onCreate, onDelete, onMultipleDelete} = props;
+
+    const columns = useDealProductsTableColumns({
+        onChange: (product, quantity) => {
+            if (!onChange) return;
+            if (quantity <= 0 && onDelete) {
+                onDelete(product);
+                return;
+            }
+            onChange({...product, quantity})
+        },
+        data: items
+
+    });
+
    const onCreateClick = () => {
+        if (!onCreate) return;
        modals.openContextModal({
            modal: "addDealProduct",
            title: "Добавление товара",
            innerProps: {
-                onCreate: event => console.log(event),
+                onCreate: (product) => onCreate(product as DealProductSchema),
                clientId
            }
        })
-
+    }
+    const onPrintBarcodeClick = (product: DealProductSchema) => {
+        modals.openContextModal({
+            modal: "printBarcode",
+            title: 'Печать штрихкода',
+            withCloseButton: true,
+            innerProps: {
+                productId: product.product.id,
+                defaultQuantity: product.quantity
+            }
+        })
    }

    return (
@@ -30,23 +57,39 @@ const DealProductsTable: FC<Props> = ({items, clientId}) => {
            data={items}
            columns={columns}
            restProps={{
-                renderBottomToolbar: ({}) => (
+                enableBottomToolbar: true,
+                enableRowActions: true,
+                enableRowSelection: true,
+                renderRowActions: ({row}) => (
+                    <Flex gap="md">
+                        <Tooltip label="Удалить">
+                            <ActionIcon onClick={() => onDelete && onDelete(row.original)} variant={"default"}>
+                                <IconTrash/>
+                            </ActionIcon>
+                        </Tooltip>
+                        <Tooltip label="Печать штрихкода">
+                            <ActionIcon onClick={() => onPrintBarcodeClick(row.original)} variant={"default"}>
+                                <IconBarcode/>
+                            </ActionIcon>
+                        </Tooltip>
+                    </Flex>
+                ),
+                renderBottomToolbar: ({table}) => (
                    <Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
-                        {/*{(onMultipleDelete && table.getSelectedRowModel().rows.length > 0) && (*/}
-                        {/*    <Button*/}
-                        {/*        onClick={() => {*/}
-                        {/*            onMultipleDelete(table.getSelectedRowModel().rows.map(row => row.original))*/}
-                        {/*        }}*/}
-                        {/*        variant={"filled"}*/}
-                        {/*        color={"red"}*/}
-                        {/*    >*/}
-                        {/*        Удалить выбранные*/}
-                        {/*    </Button>*/}
-                        {/*)}*/}
+                        {(onMultipleDelete && table.getSelectedRowModel().rows.length > 0) && (
+                            <Button
+                                onClick={() => {
+                                    onMultipleDelete(table.getSelectedRowModel().rows.map(row => row.original))
+                                }}
+                                variant={"filled"}
+                                color={"red"}
+                            >
+                                Удалить выбранные
+                            </Button>
+                        )}
                        <Button onClick={onCreateClick} variant={"default"}>
-                            Добавить услугу
+                            Добавить товар
                        </Button>
-
                    </Flex>
                ),
            } as MRT_TableOptions<DealProductSchema>}
--- a/src/pages/LeadsPage/components/DealProductsTable/columns.tsx
+++ b/src/pages/LeadsPage/components/DealProductsTable/columns.tsx
@@ -1,22 +1,65 @@
 import {useMemo} from "react";
 import {MRT_ColumnDef} from "mantine-react-table";
 import {DealProductSchema} from "../../../../client";
+import PlusMinusInput from "../../../../components/PlusMinusInput/PlusMinusInput.tsx";
+import {List} from "@mantine/core";
+
+type Props = {
+    onChange: (product: DealProductSchema, quantity: number) => void;
+    data: DealProductSchema[];
+}
+const useDealProductsTableColumns = (props: Props) => {
+    const {onChange, data} = props;
+    const totalQuantity = useMemo(() => data.reduce((acc, row) => acc + row.quantity, 0), [data]);

-const useDealProductsTableColumns = () => {
    return useMemo<MRT_ColumnDef<DealProductSchema>[]>(() => [
        {
-            accessorKey: "products.name",
-            header: "Название"
+            accessorKey: "product.article",
+            header: "Артикул",
+            enableSorting: false,
+            enableColumnActions: false,
        },
        {
-            accessorKey: "products.article",
-            header: "Артикул"
+            accessorKey: "product.name",
+            header: "Название",
+            enableSorting: false,
+            enableColumnActions: false,
+        },
+        {
+            accessorKey: "product.barcodes",
+            header: "Штрихкоды",
+            Cell: ({cell}) => {
+                return (
+                    <List size={"sm"}>
+
+                        {cell.getValue<string[]>()?.map(barcode => (
+                            <List.Item key={barcode}>
+                                {barcode}
+                            </List.Item>
+                        ))}
+
+                    </List>
+                )
+            },
+            enableSorting: false,
+            enableColumnActions: false,
        },
        {
            accessorKey: "quantity",
-            header: "Количество"
+            header: "Количество",
+            enableSorting: false,
+            enableColumnActions: false,
+            Footer: <>Всего товаров: {totalQuantity} </>,
+            Cell: ({row}) => {
+                return (
+                    <PlusMinusInput
+                        value={row.original.quantity}
+                        onChange={(value) => onChange(row.original, value)}
+                    />
+                )
+            }
        }
-    ], [])
+    ], [onChange, data])
 }

 export default useDealProductsTableColumns;
--- a/src/pages/LeadsPage/components/DealStatusChangeTable/DealStatusChangeTable.tsx
+++ b/src/pages/LeadsPage/components/DealStatusChangeTable/DealStatusChangeTable.tsx
@@ -0,0 +1,28 @@
+import {DealStatusHistorySchema} from "../../../../client";
+import {useDealStatusChangeTableColumns} from "./columns.tsx";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import {FC} from "react";
+
+type Props = {
+    items: DealStatusHistorySchema[];
+}
+
+const DealStatusChangeTable: FC<Props> = (props: Props) => {
+    const {items} = props;
+
+    return (
+        <BaseTable
+            data={items}
+            columns={useDealStatusChangeTableColumns()}
+            restProps={{
+                enableRowActions: false,
+                enableColumnActions: false,
+                enableSorting: false,
+                enableBottomToolbar: false,
+                enableColumnFilters: false,
+                enableColumnVisibilityToggle: false,
+            }}
+        />
+    );
+}
+export default DealStatusChangeTable;
--- a/src/pages/LeadsPage/components/DealStatusChangeTable/columns.tsx
+++ b/src/pages/LeadsPage/components/DealStatusChangeTable/columns.tsx
@@ -0,0 +1,29 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {DealStatusHistorySchema} from "../../../../client";
+import {DealStatus, DealStatusDictionary} from "../../../../shared/enums/DealStatus.ts";
+
+export const useDealStatusChangeTableColumns = () => {
+    return useMemo<MRT_ColumnDef<DealStatusHistorySchema>[]>(() => [
+        {
+            accessorKey: "changedAt",
+            header: "Дата",
+            accessorFn: (row) => new Date(row.changedAt).toLocaleString('ru-RU'),
+        },
+        {
+            accessorKey: "user.id",
+            header: "ID пользователя",
+        },
+        {
+            accessorKey: "fromStatus",
+            header: "Из статуса",
+            accessorFn: (row) => DealStatusDictionary[row.fromStatus as DealStatus],
+        },
+        {
+            accessorKey: "toStatus",
+            header: "В статус",
+            accessorFn: (row) => DealStatusDictionary[row.toStatus as DealStatus],
+
+        }
+    ], []);
+}
--- a/src/pages/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx
+++ b/src/pages/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx
@@ -1,12 +1,15 @@
-import {Drawer, Text} from "@mantine/core";
+import {Box, Drawer, rem, Tabs, Text} from "@mantine/core";
 import {FC, useRef} from "react";
 import DealServicesTable from "../../components/DealServicesTable/DealServicesTable.tsx";
 import {useDealPageContext} from "../../contexts/DealPageContext.tsx";
-import {DealService, DealServiceSchema} from "../../../../client";
+import {DealProductSchema, DealService, DealServiceSchema} from "../../../../client";
 import {notifications} from "../../../../shared/lib/notifications.ts";
 import {modals} from "@mantine/modals";
 import {BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
 import DealProductsTable from "../../components/DealProductsTable/DealProductsTable.tsx";
+import {IconBarcode, IconBox, IconCalendarUser, IconSettings} from "@tabler/icons-react";
+import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealStatusChangeTable.tsx";
+import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";

 const useDealServicesTableState = () => {
    const {selectedDeal, setSelectedDeal} = useDealPageContext();
@@ -30,7 +33,6 @@ const useDealServicesTableState = () => {
                .then(setSelectedDeal)
        })
    }
-
    const onServiceDelete = (service: DealServiceSchema) => {
        if (!selectedDeal) return;
        modals.openConfirmModal({
@@ -68,7 +70,6 @@ const useDealServicesTableState = () => {
            }
        })
    }
-
    const onServiceCreate = (service: DealServiceSchema) => {
        console.log('-------Drawer')
        console.log(service);
@@ -88,7 +89,6 @@ const useDealServicesTableState = () => {
                .then(setSelectedDeal)
        })
    }
-
    const onsServiceMultipleDelete = (items: DealServiceSchema[]) => {
        if (!selectedDeal) return;
        modals.openConfirmModal({
@@ -152,27 +152,158 @@ const DealEditDrawerServicesTable = () => {
 }

 const useDealProductTableState = () => {
-    const {selectedDeal} = useDealPageContext();
+    const {selectedDeal, setSelectedDeal} = useDealPageContext();

+    const onProductUpdate = (product: DealProductSchema) => {
+        if (!selectedDeal) return;
+        DealService.updateDealProductQuantity({
+            requestBody: {
+                dealId: selectedDeal.id,
+                productId: product.product.id,
+                quantity: product.quantity
+            }
+        }).then(async ({ok, message}) => {
+            if (!ok) {
+                notifications.guess(ok, {message});
+                return;
+            }
+            await DealService.getDealById({dealId: selectedDeal.id})
+                .then(setSelectedDeal)
+        })
+    }
+    const onProductDelete = (product: DealProductSchema) => {
+        if (!selectedDeal) return;
+        modals.openConfirmModal({
+            title: "Удаление товара",
+            children: (
+                <>
+                    <Text>
+                        Вы уверены, что хотите удалить товар:
+                    </Text>
+                    <Text>
+                        {product.product.name}?
+                    </Text>
+
+                </>
+
+            ),
+            onConfirm: () => {
+                DealService.deleteDealProduct({
+                    requestBody: {
+                        dealId: selectedDeal.id,
+                        productId: product.product.id
+                    }
+                }).then(async ({ok, message}) => {
+                    if (!ok) {
+                        notifications.guess(ok, {message});
+                        return;
+                    }
+                    await DealService.getDealById({dealId: selectedDeal.id})
+                        .then(setSelectedDeal)
+                })
+            },
+            labels: {
+                cancel: "Отмена",
+                confirm: "Удалить"
+            }
+        })
+    }
+    const onProductCreate = (product: DealProductSchema) => {
+        if (!selectedDeal) return;
+        DealService.addDealProduct({
+            requestBody: {
+                dealId: selectedDeal.id,
+                productId: product.product.id,
+                quantity: product.quantity
+            }
+        }).then(async ({ok, message}) => {
+            if (!ok) {
+                notifications.guess(ok, {message});
+                return;
+            }
+            await DealService.getDealById({dealId: selectedDeal.id})
+                .then(setSelectedDeal)
+        })
+    }
+    const onProductMultipleDelete = (items: DealProductSchema[]) => {
+        if (!selectedDeal) return;
+        modals.openConfirmModal({
+            title: "Удаление товаров",
+            children: (
+                <>
+                    <Text>
+                        Вы уверены, что хотите удалить выбранные товары?
+                    </Text>
+                </>
+            ),
+            onConfirm: () => {
+                DealService.deleteMultipleDealProducts({
+                    requestBody: {
+                        dealId: selectedDeal.id,
+                        productIds: items.map(item => item.product.id)
+                    }
+                }).then(async ({ok, message}) => {
+                    if (!ok) {
+                        notifications.guess(ok, {message});
+                        return;
+                    }
+                    await DealService.getDealById({dealId: selectedDeal.id})
+                        .then(setSelectedDeal)
+                })
+            },
+            labels: {
+                cancel: "Отмена",
+                confirm: "Удалить"
+            }
+        })
+    }
    return {
        clientId: selectedDeal?.clientId || -1,
-        products: selectedDeal?.products || []
+        products: selectedDeal?.products || [],
+        onProductUpdate,
+        onProductDelete,
+        onProductCreate,
+        onProductMultipleDelete
    }
 }
-
 const DealEditDrawerProductsTable = () => {
    const {
        products,
-        clientId
+        clientId,
+        onProductUpdate,
+        onProductDelete,
+        onProductCreate,
+        onProductMultipleDelete,
    } = useDealProductTableState();
    return (
        <DealProductsTable
            clientId={clientId}
            items={products}
+            onChange={onProductUpdate}
+            onMultipleDelete={onProductMultipleDelete}
+            onDelete={onProductDelete}
+            onCreate={onProductCreate}
+
        />
    )
 }

+const useDealStatusChangeState = () => {
+    const {selectedDeal} = useDealPageContext();
+
+    return {
+        statusHistory: selectedDeal?.statusHistory || []
+    }
+}
+const DealEditDrawerStatusChangeTable = () => {
+    const {statusHistory} = useDealStatusChangeState();
+
+    return (
+        <DealStatusChangeTable
+            items={statusHistory}
+        />)
+}
+
 const useDealEditDrawerState = () => {
    const {selectedDeal, setSelectedDeal} = useDealPageContext();
    return {
@@ -189,9 +320,55 @@ const DealEditDrawer: FC = () => {
            size={"95%"}
            position={"right"}
            onClose={onClose}
-            opened={isVisible}>
-            <DealEditDrawerServicesTable/>
-            <DealEditDrawerProductsTable/>
+            removeScrollProps={{allowPinchZoom: true}}
+            withCloseButton={false}
+            opened={isVisible}
+            styles={{body: {height: '100%'}}}
+        >
+            <Tabs
+                defaultValue={"general"}
+                h={'100%'}
+                variant={"outline"}
+                orientation={"vertical"}>
+                <Tabs.List
+                >
+                    <Tabs.Tab value={"general"} leftSection={<IconSettings/>}>
+                        Общее
+                    </Tabs.Tab>
+                    <Tabs.Tab value={"history"} leftSection={<IconCalendarUser/>}>
+                        История
+                    </Tabs.Tab>
+                    <Tabs.Tab value={"services"} leftSection={<IconBox/>}>
+                        Услуги
+                    </Tabs.Tab>
+                    <Tabs.Tab value={"products"} leftSection={<IconBarcode/>}>
+                        Товары
+                    </Tabs.Tab>
+                </Tabs.List>
+                <Tabs.Panel value={"general"}>
+                    <Box h={"100%"} w={"100%"} p={rem(10)}>
+                        <DealEditDrawerGeneralTab/>
+                    </Box>
+                </Tabs.Panel>
+                <Tabs.Panel value={"history"}>
+                    <Box p={rem(10)}>
+                        <DealEditDrawerStatusChangeTable/>
+                    </Box>
+                </Tabs.Panel>
+                <Tabs.Panel value={"services"}>
+                    <Box p={rem(10)}>
+
+                        <DealEditDrawerServicesTable/>
+                    </Box>
+                </Tabs.Panel>
+                <Tabs.Panel value={"products"}>
+                    <Box p={rem(10)}>
+
+                        <DealEditDrawerProductsTable/>
+                    </Box>
+
+                </Tabs.Panel>
+            </Tabs>
        </Drawer>
    );
 }
--- a/src/pages/LeadsPage/drawers/DealEditDrawer/tabs/DealEditDrawerGeneralTab.tsx
+++ b/src/pages/LeadsPage/drawers/DealEditDrawer/tabs/DealEditDrawerGeneralTab.tsx
@@ -0,0 +1,148 @@
+import {FC} from "react";
+import {useDealPageContext} from "../../../contexts/DealPageContext.tsx";
+import {Button, Checkbox, Fieldset, Flex, Group, rem, TextInput} from "@mantine/core";
+import {useForm} from "@mantine/form";
+import {ClientService, DealSchema, DealService} from "../../../../../client";
+import {DealStatus, DealStatusDictionary} from "../../../../../shared/enums/DealStatus.ts";
+import {isEqual} from "lodash";
+import {notifications} from "../../../../../shared/lib/notifications.ts";
+import {useQueryClient} from "@tanstack/react-query";
+
+type Props = {
+    deal: DealSchema
+}
+type FormType = Omit<DealSchema, 'statusHistory' | 'services' | 'products'>
+
+const Content: FC<Props> = ({deal}) => {
+    const {setSelectedDeal} = useDealPageContext();
+    const queryClient = useQueryClient();
+
+    const initialValues: FormType = deal;
+    const form = useForm<FormType>(
+        {
+            initialValues: initialValues,
+            validate: {
+                name: (value: string) => value.length > 0 ? null : 'Название сделки не может быть пустым'
+            }
+        }
+    )
+    const updateDealInfo = async (values: FormType) => {
+        return DealService.updateDealGeneralInfo({
+            requestBody: {
+                dealId: deal.id,
+                data: values
+            }
+        }).then(({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            DealService.getDealById({dealId: deal.id})
+                .then((data) => {
+                    setSelectedDeal(data);
+                    form.setInitialValues(data);
+                    queryClient.invalidateQueries({
+                        queryKey: ['getDealSummaries']
+                    })
+                })
+        });
+    }
+    const updateClientInfo = async (values: FormType) => {
+        return ClientService.updateClient({
+            requestBody: {
+                data: values.client
+            }
+        }).then(({ok, message}) =>
+            notifications.guess(ok, {message}));
+    }
+    const handleSubmit = async (values: FormType) => {
+        // Updating client info if there changes
+        if (!isEqual(values.client, deal.client)) {
+            await updateClientInfo(values);
+        }
+        // updating deal info
+        await updateDealInfo(values);
+    }
+    return (
+        <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+            <Fieldset legend={"Общие параметры"}>
+                <Flex direction={"column"} gap={rem(10)}>
+                    <TextInput
+                        placeholder={"Название сделки"}
+                        label={"Название сделки"}
+                        {...form.getInputProps('name')}
+                    />
+                    <TextInput
+                        disabled
+                        placeholder={"Дата создания"}
+                        label={"Дата создания"}
+                        value={new Date(deal.createdAt).toLocaleString('ru-RU')}
+                    />
+                    <TextInput
+                        disabled
+                        placeholder={"Текущий статус"}
+                        label={"Текущий статус"}
+                        value={DealStatusDictionary[deal.currentStatus as DealStatus]}/>
+                    <Checkbox
+                        label={"Сделка завершена"}
+                        {...form.getInputProps('isCompleted')}
+                    />
+
+                    <Checkbox
+                        label={"Сделка удалена"}
+                        {...form.getInputProps('isDeleted')}
+                    />
+
+                </Flex>
+            </Fieldset>
+            <Fieldset legend={"Клиент"}>
+                <TextInput
+                    disabled
+                    placeholder={"Название"}
+                    label={"Название"}
+                    value={deal.client.name}
+                />
+                <TextInput
+                    placeholder={"Введите телефон"}
+                    label={"Телефон клиента"}
+                    {...form.getInputProps('client.details.phoneNumber')}
+                />
+                <TextInput
+                    placeholder={"Введите email"}
+                    label={"Email"}
+                    {...form.getInputProps('client.details.email')}
+                />
+                <TextInput
+                    placeholder={"Введите адрес"}
+                    label={"Адрес"}
+                    {...form.getInputProps('client.details.address')}
+                />
+                <TextInput
+                    placeholder={"Введите ИНН"}
+                    label={"ИНН"}
+                    {...form.getInputProps('client.details.inn')}
+                />
+            </Fieldset>
+            <Group justify={"flex-end"} mt={"md"}>
+                <Button
+                    color={"red"}
+                    type={"reset"}
+                    disabled={isEqual(initialValues, form.values)}
+                    onClick={() => form.reset()}
+                >Отменить изменения</Button>
+                <Button
+                    variant={"default"}
+                    type={"submit"}
+                    disabled={isEqual(initialValues, form.values)}
+                >Сохранить изменения</Button>
+            </Group>
+        </form>
+
+    )
+}
+const DealEditDrawerGeneralTab: FC = () => {
+    const {selectedDeal} = useDealPageContext();
+    if (!selectedDeal) return <>No deal selected</>;
+    return (
+        <Content deal={selectedDeal}/>
+    );
+}
+export default DealEditDrawerGeneralTab;
--- a/src/pages/LeadsPage/modals/AddDealProductModal.tsx
+++ b/src/pages/LeadsPage/modals/AddDealProductModal.tsx
@@ -29,7 +29,6 @@ const AddDealProductModal = ({
        context.closeContextModal(id);
    }

-
    return (
        <BaseFormModal
            {...innerProps}
@@ -39,10 +38,10 @@ const AddDealProductModal = ({
            <BaseFormModal.Body>
                <>
                    <ProductSelect
-                        placeholder={"Выберите услугу"}
-                        label={"Услуга"}
+                        placeholder={"Выберите товар"}
+                        label={"Товар"}
                        clientId={innerProps.clientId}
-                        {...form.getInputProps('service')}
+                        {...form.getInputProps('product')}
                    />
                    <NumberInput
                        placeholder={"Введите количество"}