feat: assignment of employees to deals
This commit is contained in:
@@ -1,282 +1,14 @@
|
||||
import { Box, Drawer, rem, Tabs } from "@mantine/core";
|
||||
import { FC, useEffect } from "react";
|
||||
import { FC, ReactNode, useEffect } from "react";
|
||||
import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
|
||||
import { IconBox, IconCalendarUser, IconCubeSend, IconSettings, IconUser } from "@tabler/icons-react";
|
||||
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 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}
|
||||
// />
|
||||
// );
|
||||
// };
|
||||
import EmployeesTab from "../../tabs/EmployeesTab/EmployeesTab.tsx";
|
||||
|
||||
const useDealStatusChangeState = () => {
|
||||
const { selectedDeal } = useDealPageContext();
|
||||
@@ -306,6 +38,25 @@ const DealEditDrawer: FC = () => {
|
||||
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)"}
|
||||
@@ -354,60 +105,18 @@ const DealEditDrawer: FC = () => {
|
||||
leftSection={<IconCubeSend />}>
|
||||
Отгрузка
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
value={"employees"}
|
||||
leftSection={<IconUsersGroup />}>
|
||||
Исполнители
|
||||
</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>
|
||||
{getTabPanel("general", <DealEditDrawerGeneralTab />)}
|
||||
{getTabPanel("client", <DealEditDrawerStatusChangeTable />)}
|
||||
{getTabPanel("history", <DealEditDrawerStatusChangeTable />)}
|
||||
{getTabPanel("servicesAndProducts", <ProductAndServiceTab />)}
|
||||
{getTabPanel("shipment", <ShippingTab />)}
|
||||
{getTabPanel("employees", <EmployeesTab />)}
|
||||
</Tabs>
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user