feat: client returned, slot is a slot

src/pages/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx

@@ -1,290 +1,281 @@
-import { Box, Drawer, rem, Tabs, Text } from "@mantine/core";
-import { FC, useEffect, useRef } from "react";
-import DealServicesTable from "../../components/DealServicesTable/DealServicesTable.tsx";
+import { Box, Drawer, rem, Tabs } from "@mantine/core";
+import { FC, useEffect } from "react";
 import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
-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 { IconBox, IconCalendarUser, IconSettings } from "@tabler/icons-react";
+import { IconBox, IconCalendarUser, IconSettings, IconUser } from "@tabler/icons-react";
 import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealStatusChangeTable.tsx";
 import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";
 import { useQueryClient } from "@tanstack/react-query";
 import ProductAndServiceTab from "../../tabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
 import { motion } from "framer-motion";
+import ClientTab from "./tabs/ClientTab.tsx";
 // import styles from './DealEditDrawer.module.css';
 
-const useDealServicesTableState = () => {
-    const { selectedDeal, setSelectedDeal } = useDealPageContext();
-    const tableRef = useRef<BaseTableRef<DealServiceSchema>>(null);
+// const useDealServicesTableState = () => {
+//     const { selectedDeal, setSelectedDeal } = useDealPageContext();
+//     const tableRef = useRef<BaseTableRef<DealServiceSchema>>(null);
+//
+//     const onServiceUpdate = (service: DealServiceSchema) => {
+//         if (!selectedDeal) return;
+//         DealService.updateDealService({
+//             requestBody: {
+//                 dealId: selectedDeal.id,
+//                 service,
+//             },
+//         }).then(async ({ ok, message }) => {
+//             if (!ok) {
+//                 notifications.guess(ok, { message });
+//                 return;
+//             }
+//             await DealService.getDealById({ dealId: selectedDeal.id }).then(
+//                 setSelectedDeal,
+//             );
+//         });
+//     };
+//     const onServiceDelete = (service: DealServiceSchema) => {
+//         if (!selectedDeal) return;
+//         modals.openConfirmModal({
+//             title: "Удаление услуги",
+//             children: (
+//                 <>
+//                     <Text>Вы уверены, что хотите удалить услугу:</Text>
+//                     <Text>{service.service.name}?</Text>
+//                 </>
+//             ),
+//             onConfirm: () => {
+//                 DealService.deleteDealService({
+//                     requestBody: {
+//                         dealId: selectedDeal.id,
+//                         serviceId: service.service.id,
+//                     },
+//                 }).then(async ({ ok, message }) => {
+//                     if (!ok) {
+//                         notifications.guess(ok, { message });
+//                         return;
+//                     }
+//                     await DealService.getDealById({
+//                         dealId: selectedDeal.id,
+//                     }).then(setSelectedDeal);
+//                 });
+//             },
+//             labels: {
+//                 cancel: "Отмена",
+//                 confirm: "Удалить",
+//             },
+//         });
+//     };
+//     const onServiceCreate = (service: DealServiceSchema) => {
+//         if (!selectedDeal) return;
+//         DealService.addDealService({
+//             requestBody: {
+//                 dealId: selectedDeal.id,
+//                 serviceId: service.service.id,
+//                 quantity: service.quantity,
+//                 price: service.price,
+//             },
+//         }).then(async ({ ok, message }) => {
+//             if (!ok) {
+//                 notifications.guess(ok, { message });
+//                 return;
+//             }
+//             await DealService.getDealById({ dealId: selectedDeal.id }).then(
+//                 setSelectedDeal,
+//             );
+//         });
+//     };
+//     const onsServiceMultipleDelete = (items: DealServiceSchema[]) => {
+//         if (!selectedDeal) return;
+//         modals.openConfirmModal({
+//             title: "Удаление услуг",
+//             children: (
+//                 <>
+//                     <Text>
+//                         Вы уверены, что хотите удалить выбранные услуги?
+//                     </Text>
+//                 </>
+//             ),
+//             onConfirm: () => {
+//                 DealService.deleteMultipleDealServices({
+//                     requestBody: {
+//                         dealId: selectedDeal.id,
+//                         serviceIds: items.map(item => item.service.id),
+//                     },
+//                 }).then(async ({ ok, message }) => {
+//                     if (!ok) {
+//                         notifications.guess(ok, { message });
+//                         return;
+//                     }
+//                     await DealService.getDealById({
+//                         dealId: selectedDeal.id,
+//                     }).then(setSelectedDeal);
+//                 });
+//             },
+//             labels: {
+//                 cancel: "Отмена",
+//                 confirm: "Удалить",
+//             },
+//         });
+//     };
+//
+//     return {
+//         onServiceUpdate,
+//         onServiceDelete,
+//         onServiceCreate,
+//         onsServiceMultipleDelete,
+//         tableRef,
+//         services: selectedDeal?.services || [],
+//     };
+// };
+// const DealEditDrawerServicesTable = () => {
+//     const {
+//         services,
+//         tableRef,
+//         onServiceCreate,
+//         onServiceUpdate,
+//         onServiceDelete,
+//         onsServiceMultipleDelete,
+//     } = useDealServicesTableState();
+//
+//     return (
+//         <DealServicesTable
+//             tableRef={tableRef}
+//             items={services}
+//             onChange={onServiceUpdate}
+//             onDelete={onServiceDelete}
+//             onCreate={onServiceCreate}
+//             onMultipleDelete={onsServiceMultipleDelete}
+//         />
+//     );
+// };
 
-    const onServiceUpdate = (service: DealServiceSchema) => {
-        if (!selectedDeal) return;
-        DealService.updateDealService({
-            requestBody: {
-                dealId: selectedDeal.id,
-                service,
-            },
-        }).then(async ({ ok, message }) => {
-            if (!ok) {
-                notifications.guess(ok, { message });
-                return;
-            }
-            await DealService.getDealById({ dealId: selectedDeal.id }).then(
-                setSelectedDeal
-            );
-        });
-    };
-    const onServiceDelete = (service: DealServiceSchema) => {
-        if (!selectedDeal) return;
-        modals.openConfirmModal({
-            title: "Удаление услуги",
-            children: (
-                <>
-                    <Text>Вы уверены, что хотите удалить услугу:</Text>
-                    <Text>{service.service.name}?</Text>
-                </>
-            ),
-            onConfirm: () => {
-                DealService.deleteDealService({
-                    requestBody: {
-                        dealId: selectedDeal.id,
-                        serviceId: service.service.id,
-                    },
-                }).then(async ({ ok, message }) => {
-                    if (!ok) {
-                        notifications.guess(ok, { message });
-                        return;
-                    }
-                    await DealService.getDealById({
-                        dealId: selectedDeal.id,
-                    }).then(setSelectedDeal);
-                });
-            },
-            labels: {
-                cancel: "Отмена",
-                confirm: "Удалить",
-            },
-        });
-    };
-    const onServiceCreate = (service: DealServiceSchema) => {
-        if (!selectedDeal) return;
-        DealService.addDealService({
-            requestBody: {
-                dealId: selectedDeal.id,
-                serviceId: service.service.id,
-                quantity: service.quantity,
-                price: service.price,
-            },
-        }).then(async ({ ok, message }) => {
-            if (!ok) {
-                notifications.guess(ok, { message });
-                return;
-            }
-            await DealService.getDealById({ dealId: selectedDeal.id }).then(
-                setSelectedDeal
-            );
-        });
-    };
-    const onsServiceMultipleDelete = (items: DealServiceSchema[]) => {
-        if (!selectedDeal) return;
-        modals.openConfirmModal({
-            title: "Удаление услуг",
-            children: (
-                <>
-                    <Text>
-                        Вы уверены, что хотите удалить выбранные услуги?
-                    </Text>
-                </>
-            ),
-            onConfirm: () => {
-                DealService.deleteMultipleDealServices({
-                    requestBody: {
-                        dealId: selectedDeal.id,
-                        serviceIds: items.map(item => item.service.id),
-                    },
-                }).then(async ({ ok, message }) => {
-                    if (!ok) {
-                        notifications.guess(ok, { message });
-                        return;
-                    }
-                    await DealService.getDealById({
-                        dealId: selectedDeal.id,
-                    }).then(setSelectedDeal);
-                });
-            },
-            labels: {
-                cancel: "Отмена",
-                confirm: "Удалить",
-            },
-        });
-    };
-
-    return {
-        onServiceUpdate,
-        onServiceDelete,
-        onServiceCreate,
-        onsServiceMultipleDelete,
-        tableRef,
-        services: selectedDeal?.services || [],
-    };
-};
-const DealEditDrawerServicesTable = () => {
-    const {
-        services,
-        tableRef,
-        onServiceCreate,
-        onServiceUpdate,
-        onServiceDelete,
-        onsServiceMultipleDelete,
-    } = useDealServicesTableState();
-
-    return (
-        <DealServicesTable
-            tableRef={tableRef}
-            items={services}
-            onChange={onServiceUpdate}
-            onDelete={onServiceDelete}
-            onCreate={onServiceCreate}
-            onMultipleDelete={onsServiceMultipleDelete}
-        />
-    );
-};
-
-const useDealProductTableState = () => {
-    const { selectedDeal, setSelectedDeal } = useDealPageContext();
-
-    const onProductUpdate = (product: DealProductSchema) => {
-        if (!selectedDeal) return;
-        DealService.updateDealProduct({
-            requestBody: {
-                dealId: selectedDeal.id,
-                product: product,
-            },
-        }).then(async ({ ok, message }) => {
-            notifications.guess(ok, { message });
-            if (!ok) 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,
-                product: product,
-            },
-        }).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 || [],
-        onProductUpdate,
-        onProductDelete,
-        onProductCreate,
-        onProductMultipleDelete,
-    };
-};
-const DealEditDrawerProductsTable = () => {
-    const {
-        products,
-        clientId,
-        onProductUpdate,
-        onProductDelete,
-        onProductCreate,
-        onProductMultipleDelete,
-    } = useDealProductTableState();
-    return (
-        <DealProductsTable
-            clientId={clientId}
-            items={products}
-            onChange={onProductUpdate}
-            onMultipleDelete={onProductMultipleDelete}
-            onDelete={onProductDelete}
-            onCreate={onProductCreate}
-        />
-    );
-};
+// const useDealProductTableState = () => {
+//     const { selectedDeal, setSelectedDeal } = useDealPageContext();
+//
+//     const onProductUpdate = (product: DealProductSchema) => {
+//         if (!selectedDeal) return;
+//         DealService.updateDealProduct({
+//             requestBody: {
+//                 dealId: selectedDeal.id,
+//                 product: product,
+//             },
+//         }).then(async ({ ok, message }) => {
+//             notifications.guess(ok, { message });
+//             if (!ok) 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,
+//                 product: product,
+//             },
+//         }).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 || [],
+//         onProductUpdate,
+//         onProductDelete,
+//         onProductCreate,
+//         onProductMultipleDelete,
+//     };
+// };
+// const DealEditDrawerProductsTable = () => {
+//     const {
+//         products,
+//         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();
@@ -292,6 +283,7 @@ const useDealStatusChangeState = () => {
         statusHistory: selectedDeal?.statusHistory || [],
     };
 };
+
 const DealEditDrawerStatusChangeTable = () => {
     const { statusHistory } = useDealStatusChangeState();
 
@@ -341,6 +333,11 @@ const DealEditDrawer: FC = () => {
                         leftSection={<IconSettings />}>
                         Общее
                     </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"client"}
+                        leftSection={<IconUser />}>
+                        Клиент
+                    </Tabs.Tab>
                     <Tabs.Tab
                         value={"history"}
                         leftSection={<IconCalendarUser />}>
@@ -365,6 +362,16 @@ const DealEditDrawer: FC = () => {
                         </Box>
                     </motion.div>
                 </Tabs.Panel>
+                <Tabs.Panel value={"client"}>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.2 }}>
+                        <Box p={rem(10)}>
+                            <ClientTab />
+                        </Box>
+                    </motion.div>
+                </Tabs.Panel>
                 <Tabs.Panel value={"history"}>
                     <motion.div
                         initial={{ opacity: 0 }}
@@ -385,16 +392,6 @@ const DealEditDrawer: FC = () => {
                         </Box>
                     </motion.div>
                 </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>
     );