127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
import { Box, Drawer, rem, Tabs } from "@mantine/core";
|
||
import { FC, ReactNode, useEffect } from "react";
|
||
import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
|
||
import { IconBox, IconCalendarUser, IconCubeSend, IconSettings, IconUser, IconUsersGroup } 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 ShippingTab from "../../tabs/ShippingTab/ShippingTab.tsx";
|
||
import EmployeesTab from "../../tabs/EmployeesTab/EmployeesTab.tsx";
|
||
import ClientTab from "./tabs/ClientTab.tsx";
|
||
|
||
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]);
|
||
|
||
const getTabPanel = (value: string, component: ReactNode) => {
|
||
return (
|
||
<Tabs.Panel value={value}>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.2 }}>
|
||
<Box
|
||
h={"100%"}
|
||
w={"100%"}
|
||
p={rem(10)}>
|
||
{component}
|
||
</Box>
|
||
</motion.div>
|
||
</Tabs.Panel>
|
||
);
|
||
};
|
||
|
||
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.Tab
|
||
value={"employees"}
|
||
leftSection={<IconUsersGroup />}>
|
||
Исполнители
|
||
</Tabs.Tab>
|
||
</Tabs.List>
|
||
{getTabPanel("general", <DealEditDrawerGeneralTab />)}
|
||
{getTabPanel("client", <ClientTab />)}
|
||
{getTabPanel("history", <DealEditDrawerStatusChangeTable />)}
|
||
{getTabPanel("servicesAndProducts", <ProductAndServiceTab />)}
|
||
{getTabPanel("shipment", <ShippingTab />)}
|
||
{getTabPanel("employees", <EmployeesTab />)}
|
||
</Tabs>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default DealEditDrawer;
|