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}

14
src/pages/ServicesPage/components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx
View File

@@ -1,17 +1,25 @@
import {FC} from "react";
import {SegmentedControl, SegmentedControlProps} from "@mantine/core";
import {ServiceType} from "../../../../shared/enums/ServiceType.ts";
export enum ServicesTab {
DEAL_SERVICE,
PRODUCT_SERVICE,
SERVICES_KITS
}
type Props = Omit<SegmentedControlProps, 'data'>;
const data = [
{
label: 'Для товара',
value: ServiceType.PRODUCT_SERVICE.toString()
value: ServicesTab.PRODUCT_SERVICE.toString()
},
{
label: 'Для сделки',
value: ServiceType.DEAL_SERVICE.toString()
value: ServicesTab.DEAL_SERVICE.toString()
},
{
label: 'Наборы услуг',
value: ServicesTab.SERVICES_KITS.toString()
}
]
const ServiceTypeSegmentedControl: FC<Props> = (props) => {

61
src/pages/ServicesPage/components/ServicesKitsTable/ServicesKitsTable.tsx Normal file
View File

@@ -0,0 +1,61 @@
import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
import {GetServiceKitSchema} from "../../../../client";
import {FC} from "react";
import useServicesKitsTableColumns from "./columns.tsx";
import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
import {ActionIcon, Flex, Tooltip} from "@mantine/core";
import {IconEdit, IconTrash} from "@tabler/icons-react";
import {MRT_TableOptions} from "mantine-react-table";
import {modals} from "@mantine/modals";
type Props = CRUDTableProps<GetServiceKitSchema>;
const ServicesKitsTable: FC<Props> = ({items, onDelete, onChange}) => {
const columns = useServicesKitsTableColumns();
const onEditClick = (kit: GetServiceKitSchema) => {
if (!onChange) return;
modals.openContextModal({
modal: 'serviceKitModalForm',
title: 'Создание набора услуг',
withCloseButton: false,
innerProps: {
element: kit,
onChange
}
})
}
const onDeleteClick = (kit: GetServiceKitSchema) => {
if (!onDelete) return;
console.log(kit)
}
return (
<BaseTable
data={items}
columns={columns}
restProps={{
enableSorting: false,
enableColumnActions: false,
enableRowActions: true,
renderRowActions: ({row}) => (
<Flex gap="md">
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onEditClick(row.original)}
variant={"default"}>
<IconEdit/>
</ActionIcon>
</Tooltip>
<Tooltip label="Удалить">
<ActionIcon onClick={() => {
if (onDelete) onDeleteClick(row.original);
}} variant={"default"}>
<IconTrash/>
</ActionIcon>
</Tooltip>
</Flex>
)
} as MRT_TableOptions<GetServiceKitSchema>}
/>
)
}
export default ServicesKitsTable;

17
src/pages/ServicesPage/components/ServicesKitsTable/columns.tsx Normal file
View File

@@ -0,0 +1,17 @@
import {useMemo} from "react";
import {MRT_ColumnDef} from "mantine-react-table";
import {GetServiceKitSchema} from "../../../../client";
const useServicesKitsTableColumns = () => {
return useMemo<MRT_ColumnDef<GetServiceKitSchema>[]>(() => [
{
accessorKey: "name",
header: "Название набора"
},
{
header: "Кол-во услуг",
Cell: ({row}) => row.original.services.length
}
], []);
}
export default useServicesKitsTableColumns;

10
src/pages/ServicesPage/hooks/useServicesKitsList.tsx Normal file
View File

@@ -0,0 +1,10 @@
import ObjectList from "../../../hooks/objectList.tsx";
import {ServiceService} from "../../../client";
const useServicesKitsList = () => ObjectList({
queryFn: ServiceService.getAllServicesKits,
getObjectsFn: (response) => response.servicesKits,
queryKey: "getAllServicesKits"
})
export default useServicesKitsList;

60
src/pages/ServicesPage/modals/ServicesKitModalForm.tsx Normal file
View File

@@ -0,0 +1,60 @@
import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {GetServiceKitSchema} from "../../../client";
import {ContextModalProps} from "@mantine/modals";
import {useForm} from "@mantine/form";
import {ServiceType} from "../../../shared/enums/ServiceType.ts";
import {TextInput} from "@mantine/core";
import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
import ServicesMultiselect from "../../../components/Selects/ServicesMultiselect/ServicesMultiselect.tsx";
type Props = CreateEditFormProps<GetServiceKitSchema>;
const ServiceKitModalForm = ({
context,
id,
innerProps,
}: ContextModalProps<Props>) => {
const isEditing = 'element' in innerProps;
const initialValues: Partial<GetServiceKitSchema> = isEditing ? innerProps.element : {
name: "",
serviceType: ServiceType.DEAL_SERVICE,
services: []
}
const form = useForm<Partial<GetServiceKitSchema>>(
{
initialValues
}
);
return (
<BaseFormModal
{...innerProps}
form={form}
closeOnSubmit
onClose={() => context.closeContextModal(id)}
>
<BaseFormModal.Body>
<>
<TextInput
label={"Название"}
placeholder={"Введите название набора услуг"}
{...form.getInputProps("name")}
/>
<ServiceTypeSelect
label={"Тип услуг"}
placeholder={"Выберите тип услуг"}
{...form.getInputProps("serviceType")}
/>
<ServicesMultiselect
label={"Услуги"}
placeholder={"Выберите услуги"}
filterBy={(service) => service.serviceType === form.values.serviceType}
groupBy={(service) => service.category.name}
{...form.getInputProps("services")}
/>
</>
</BaseFormModal.Body>
</BaseFormModal>
)
}
export default ServiceKitModalForm;

83
src/pages/ServicesPage/ui/ServicesPage.tsx
View File

@@ -4,15 +4,21 @@ import useServicesList from "../hooks/useServicesList.tsx";
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import styles from './ServicesPage.module.css';
import {Button, Text} from "@mantine/core";
import {ServiceCategorySchema, ServiceSchema, ServiceService} from "../../../client";
import {GetServiceKitSchema, ServiceCategorySchema, ServiceSchema, ServiceService} from "../../../client";
import {notifications} from "../../../shared/lib/notifications.ts";
import {modals} from "@mantine/modals";
import ServiceTypeSegmentedControl from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
import {ServiceType} from "../../../shared/enums/ServiceType.ts";
import ServiceTypeSegmentedControl, {
ServicesTab
} from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
import useServicesKitsList from "../hooks/useServicesKitsList.tsx";
import ServicesKitsTable from "../components/ServicesKitsTable/ServicesKitsTable.tsx";
import {omit} from "lodash";
export const ServicesPage: FC = () => {
const {services, refetch} = useServicesList();
const [serviceType, setServiceType] = useState(ServiceType.DEAL_SERVICE)
const {objects: servicesKits, refetch: refetchKits} = useServicesKitsList();
const [serviceType, setServiceType] = useState(ServicesTab.DEAL_SERVICE)
// region Service create
const onCreateClick = () => {
modals.openContextModal({
@@ -86,15 +92,60 @@ export const ServicesPage: FC = () => {
await refetch();
})
}
const onKitCreate = (kit: GetServiceKitSchema) => {
ServiceService.createServicesKit({
requestBody: {
data: {
...omit(kit, ["services", "id"]),
servicesIds: kit.services.map(service => service.id)
}
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message: message});
if (!ok) return;
await refetchKits();
})
}
const onKitCreateClick = () => {
modals.openContextModal({
modal: 'serviceKitModalForm',
title: 'Создание набора услуг',
withCloseButton: false,
innerProps: {
onCreate: onKitCreate
}
})
}
const onKitUpdate = (kit: GetServiceKitSchema) => {
ServiceService.updateServicesKit({
requestBody: {
data: {
...omit(kit, ["services"]),
servicesIds: kit.services.map(service => service.id)
}
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message: message});
if (!ok) return;
await refetchKits();
})
}
return (
<div className={styles['container']}>
<PageBlock>
<div className={styles['top-panel']}>
<Button onClick={onCreateClick} variant={"default"}>Создать услугу</Button>
<Button onClick={onCreateCategoryClick} variant={"default"}>Создать категорию</Button>
{
serviceType === ServicesTab.SERVICES_KITS ?
<Button onClick={onKitCreateClick} variant={"default"}>Создать набор</Button> :
<>
<Button onClick={onCreateClick} variant={"default"}>Создать услугу</Button>
<Button onClick={onCreateCategoryClick} variant={"default"}>Создать
категорию</Button>
</>
}
<ServiceTypeSegmentedControl
className={styles['top-panel-last-item']}
value={serviceType.toString()}
@@ -103,11 +154,19 @@ export const ServicesPage: FC = () => {
</div>
</PageBlock>
<PageBlock>
<ServicesTable
onDelete={onServiceDelete}
onChange={onServiceUpdate}
items={services.filter(service => service.serviceType == serviceType)}
/>
{
serviceType === ServicesTab.SERVICES_KITS ?
<ServicesKitsTable
items={servicesKits}
onChange={onKitUpdate}
/>
:
<ServicesTable
onDelete={onServiceDelete}
onChange={onServiceUpdate}
items={services.filter(service => service.serviceType == serviceType)}
/>
}
</PageBlock>
</div>
)