417 lines
15 KiB
TypeScript
417 lines
15 KiB
TypeScript
import { Box, Drawer, rem, Tabs } from "@mantine/core";
|
||
import { FC, useEffect } from "react";
|
||
import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
|
||
import { IconBox, IconCalendarUser, IconCubeSend, 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 ShippingTab from "../../tabs/ShippingTab/ShippingTab.tsx";
|
||
// import styles from './DealEditDrawer.module.css';
|
||
|
||
// 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 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();
|
||
return {
|
||
statusHistory: selectedDeal?.statusHistory || [],
|
||
};
|
||
};
|
||
|
||
const DealEditDrawerStatusChangeTable = () => {
|
||
const { statusHistory } = useDealStatusChangeState();
|
||
|
||
return <DealStatusChangeTable items={statusHistory} />;
|
||
};
|
||
|
||
const useDealEditDrawerState = () => {
|
||
const { selectedDeal, setSelectedDeal } = useDealPageContext();
|
||
return {
|
||
isVisible: selectedDeal !== undefined,
|
||
onClose: () => setSelectedDeal(undefined),
|
||
};
|
||
};
|
||
|
||
const DealEditDrawer: FC = () => {
|
||
const { isVisible, onClose } = useDealEditDrawerState();
|
||
const queryClient = useQueryClient();
|
||
useEffect(() => {
|
||
if (isVisible) return;
|
||
queryClient.invalidateQueries({ queryKey: ["getDealSummaries"] });
|
||
}, [isVisible]);
|
||
return (
|
||
<Drawer
|
||
size={"calc(100vw - 150px)"}
|
||
position={"right"}
|
||
onClose={onClose}
|
||
removeScrollProps={{ allowPinchZoom: true }}
|
||
withCloseButton={false}
|
||
opened={isVisible}
|
||
styles={{
|
||
body: {
|
||
height: "100%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: rem(10),
|
||
},
|
||
}}>
|
||
<Tabs
|
||
defaultValue={"general"}
|
||
flex={1}
|
||
variant={"outline"}
|
||
orientation={"vertical"}
|
||
keepMounted={false}>
|
||
<Tabs.List>
|
||
<Tabs.Tab
|
||
value={"general"}
|
||
leftSection={<IconSettings />}>
|
||
Общее
|
||
</Tabs.Tab>
|
||
<Tabs.Tab
|
||
value={"client"}
|
||
leftSection={<IconUser />}>
|
||
Клиент
|
||
</Tabs.Tab>
|
||
<Tabs.Tab
|
||
value={"history"}
|
||
leftSection={<IconCalendarUser />}>
|
||
История
|
||
</Tabs.Tab>
|
||
<Tabs.Tab
|
||
value={"servicesAndProducts"}
|
||
leftSection={<IconBox />}>
|
||
Товары и услуги
|
||
</Tabs.Tab>
|
||
<Tabs.Tab
|
||
value={"shipment"}
|
||
leftSection={<IconCubeSend />}>
|
||
Отгрузка
|
||
</Tabs.Tab>
|
||
</Tabs.List>
|
||
<Tabs.Panel value={"general"}>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.2 }}>
|
||
<Box
|
||
h={"100%"}
|
||
w={"100%"}
|
||
p={rem(10)}>
|
||
<DealEditDrawerGeneralTab />
|
||
</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 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.2 }}>
|
||
<Box p={rem(10)}>
|
||
<DealEditDrawerStatusChangeTable />
|
||
</Box>
|
||
</motion.div>
|
||
</Tabs.Panel>
|
||
<Tabs.Panel value={"servicesAndProducts"}>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.2 }}>
|
||
<Box p={rem(10)}>
|
||
<ProductAndServiceTab />
|
||
</Box>
|
||
</motion.div>
|
||
</Tabs.Panel>
|
||
<Tabs.Panel value={"shipment"}>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.2 }}>
|
||
<Box p={rem(10)}>
|
||
<ShippingTab />
|
||
</Box>
|
||
</motion.div>
|
||
</Tabs.Panel>
|
||
</Tabs>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default DealEditDrawer;
|