fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: services kit and copy

Browse Source
This commit is contained in:
fakz9
2024-08-06 04:55:24 +03:00
parent 4ad843e465
commit 925f1b4407
33 changed files with 844 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/LeadsPage/modals/SelectDealProductsModal.tsx Normal file
View File

@@ -0,0 +1,64 @@
import {DealProductSchema} from "../../../client";
import {ContextModalProps} from "@mantine/modals";
import {Button, Flex, rem} from "@mantine/core";
import {useState} from "react";
import ObjectMultiSelect from "../../../components/ObjectMultiSelect/ObjectMultiSelect.tsx";
import {notifications} from "../../../shared/lib/notifications.ts";
type Props = {
dealProducts: DealProductSchema[];
dealProduct: DealProductSchema;
onSelect: (
sourceProduct: DealProductSchema,
destinationProducts: DealProductSchema[]
) => void
}
const SelectDealProductsModal = ({
context,
id,
innerProps
}: ContextModalProps<Props>) => {
const [dealProducts, setDealProducts] = useState<DealProductSchema[]>([]);
const onSelectClick = () => {
if (!dealProducts) {
notifications.error({message: "Выберите товары на которые необходимо продублировать услуги"});
return;
}
innerProps.onSelect(innerProps.dealProduct, dealProducts);
context.closeContextModal(id);
}
return (
<Flex direction={"column"} gap={rem(10)}>
<Flex>
<ObjectMultiSelect<DealProductSchema>
w={"100%"}
label={"Товары"}
placeholder={"Выберите товары на которые нужно продублировать услуги"}
onChange={setDealProducts}
value={dealProducts}
data={innerProps.dealProducts}
getLabelFn={item => item.product.name}
getValueFn={item => item.product.id.toString()}
filterBy={item => item !== innerProps.dealProduct}
/>
</Flex>
<Flex gap={rem(10)} justify={"flex-end"}>
<Button
variant={"subtle"}
onClick={() => context.closeContextModal(id)}
>
Отменить
</Button>
<Button
onClick={onSelectClick}
variant={"default"}
>
Продублировать
</Button>
</Flex>
</Flex>
)
}
export default SelectDealProductsModal;

63
src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx
View File

@@ -5,6 +5,8 @@ import {Button, Flex, ScrollArea, Title} from "@mantine/core";
import DealServicesTable from "./components/DealServicesTable/DealServicesTable.tsx";
import useDealProductAndServiceTabState from "./hooks/useProductAndServiceTabState.tsx";
import {modals} from "@mantine/modals";
import {DealProductSchema, DealService, GetServiceKitSchema} from "../../../../client";
import {notifications} from "../../../../shared/lib/notifications.ts";
const ProductAndServiceTab: FC = () => {
const {dealState, dealServicesState, dealProductsState} = useDealProductAndServiceTabState();
@@ -28,6 +30,64 @@ const ProductAndServiceTab: FC = () => {
const dealServicesPrice = dealState.deal.services.reduce((acc, row) => acc + row.price * row.quantity, 0);
return dealServicesPrice + productServicesPrice;
}
const onCopyServices = (
sourceProduct: DealProductSchema,
destinationProducts: DealProductSchema[]
) => {
if (!dealState.deal) return;
DealService.copyProductServices({
requestBody: {
dealId: dealState.deal.id,
destinationProductIds: destinationProducts.map(product => product.product.id),
sourceProductId: sourceProduct.product.id
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (!ok) return;
await dealState.refetch()
})
}
const onCopyServicesClick = (product: DealProductSchema) => {
modals.openContextModal({
modal: "selectDealProductsModal",
title: "Дублирование услуг",
size: "lg",
innerProps: {
dealProducts: dealState.deal?.products || [],
dealProduct: product,
onSelect: onCopyServices
},
withCloseButton: false
})
}
const onKitAdd = (item: DealProductSchema, kit: GetServiceKitSchema) => {
if (!dealState.deal) return;
DealService.addKitToDealProduct({
requestBody: {
dealId: dealState.deal.id,
kitId: kit.id,
productId: item.product.id
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (!ok) return;
await dealState.refetch();
});
}
const onDealKitAdd = (kit: GetServiceKitSchema) => {
if (!dealState.deal) return;
DealService.addKitToDeal({
requestBody: {
dealId: dealState.deal.id,
kitId: kit.id,
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (!ok) return;
await dealState.refetch();
});
}
return (
<div className={styles['container']}>
@@ -36,6 +96,8 @@ const ProductAndServiceTab: FC = () => {
{dealState.deal?.products.map(product => (
<ProductView
onKitAdd={onKitAdd}
onCopyServices={onCopyServicesClick}
key={product.product.id}
product={product}
onChange={dealProductsState.onChange}
@@ -48,6 +110,7 @@ const ProductAndServiceTab: FC = () => {
<div className={styles['deal-container']}>
<Flex direction={"column"} className={styles['deal-container-wrapper']}>
<DealServicesTable
onKitAdd={onDealKitAdd}
{...dealServicesState}
/>
<div className={styles['deal-container-buttons']}>

30
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx
View File

@@ -1,14 +1,18 @@
import {CRUDTableProps} from "../../../../../../types/CRUDTable.tsx";
import {DealServiceSchema, UserSchema} from "../../../../../../client";
import {DealServiceSchema, GetServiceKitSchema, UserSchema} from "../../../../../../client";
import {FC, useState} from "react";
import {ActionIcon, Button, Flex, Modal, NumberInput, rem, Text, Title, Tooltip} from "@mantine/core";
import {IconTrash, IconUsersGroup} from "@tabler/icons-react";
import {modals} from "@mantine/modals";
import {isNumber} from "lodash";
import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUsersTable.tsx";
import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
type Props = CRUDTableProps<DealServiceSchema>;
const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) => {
type RestProps = {
onKitAdd?: (kit: GetServiceKitSchema) => void
};
type Props = CRUDTableProps<DealServiceSchema> & RestProps;
const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKitAdd}) => {
const [currentService, setCurrentService] = useState<DealServiceSchema | undefined>();
const [employeesModalVisible, setEmployeesModalVisible] = useState(false);
@@ -66,6 +70,17 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) =>
employees: items
});
}
const onAddKitClick = () => {
if (!onKitAdd) return;
modals.openContextModal({
modal: "servicesKitSelectModal",
innerProps: {
onSelect: onKitAdd,
serviceType: ServiceType.DEAL_SERVICE
},
title: 'Печать штрихкода',
})
}
return (
<>
<Flex
@@ -131,12 +146,19 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) =>
order={3}
>Итог: {items.reduce((acc, item) => acc + (item.price * item.quantity), 0)}₽</Title>
</Flex>
<Flex pb={rem(10)} mt={"auto"}>
<Flex direction={"column"} gap={rem(10)} pb={rem(10)} mt={"auto"}>
<Button
onClick={onCreateClick}
fullWidth
variant={"default"}
>Добавить услугу</Button>
<Button
onClick={onAddKitClick}
fullWidth
variant={"default"}
>
Добавить набор услуг
</Button>
</Flex>
</Flex>
<Modal

18
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx
View File

@@ -11,10 +11,20 @@ import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUser
type RestProps = {
quantity: number;
onCopyServices?: () => void;
onKitAdd?: () => void;
}
type Props = CRUDTableProps<DealProductServiceSchema> & RestProps;
const ProductServicesTable: FC<Props> = ({items, quantity, onCreate, onDelete, onChange}) => {
const ProductServicesTable: FC<Props> = ({
items,
quantity,
onCreate,
onDelete,
onChange,
onCopyServices,
onKitAdd
}) => {
const columns = useProductServicesTableColumns({data: items, quantity});
const serviceIds = items.map(service => service.service.id);
@@ -85,6 +95,12 @@ const ProductServicesTable: FC<Props> = ({items, quantity, onCreate, onDelete, o
enableBottomToolbar: true,
renderBottomToolbar: (
<Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
<Button onClick={() => onKitAdd && onKitAdd()} variant={"default"}>
Добавить набор услуг
</Button>
<Button onClick={() => onCopyServices && onCopyServices()} variant={"default"}>
Продублировать услуги
</Button>
<Button onClick={onCreateClick} variant={"default"}>
Добавить услугу

26
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
View File

@@ -1,16 +1,24 @@
import {FC} from "react";
import {DealProductSchema, DealProductServiceSchema, ProductSchema} from "../../../../../../client";
import {
DealProductSchema,
DealProductServiceSchema,
GetServiceKitSchema,
ProductSchema
} from "../../../../../../client";
import styles from './ProductView.module.css';
import {ActionIcon, Flex, Image, NumberInput, rem, Spoiler, Text, Title, Tooltip} from '@mantine/core';
import ProductServicesTable from "../ProductServicesTable/ProductServicesTable.tsx";
import {isNil, isNumber} from "lodash";
import {IconBarcode, IconTrash} from "@tabler/icons-react";
import {modals} from "@mantine/modals";
import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
type Props = {
product: DealProductSchema;
onChange?: (item: DealProductSchema) => void;
onDelete?: (item: DealProductSchema) => void
onCopyServices?: (item: DealProductSchema) => void;
onKitAdd?: (item: DealProductSchema, kit: GetServiceKitSchema) => void;
}
type ProductFieldNames = {
[K in keyof ProductSchema]: string
@@ -23,7 +31,7 @@ export const ProductFieldNames: Partial<ProductFieldNames> = {
composition: "Состав",
additionalInfo: "Доп. информация",
}
const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
const ProductView: FC<Props> = ({product, onDelete, onChange, onCopyServices, onKitAdd}) => {
const onDeleteClick = () => {
if (!onDelete) return;
onDelete(product);
@@ -68,10 +76,20 @@ const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
defaultQuantity: product.quantity
},
title: 'Печать штрихкода',
})
}
const onKitAddClick = () => {
if (!onKitAdd) return;
modals.openContextModal({
modal: "servicesKitSelectModal",
innerProps: {
onSelect: (kit) => onKitAdd(product, kit),
serviceType: ServiceType.PRODUCT_SERVICE
},
title: 'Печать штрихкода',
})
}
return (
<div className={styles['container']}>
@@ -106,6 +124,8 @@ const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
<div className={styles['services-container']}>
<ProductServicesTable
onKitAdd={onKitAddClick}
onCopyServices={() => onCopyServices && onCopyServices(product)}
items={product.services}
quantity={product.quantity}
onCreate={onServiceCreate}