feat: generation of modules from the server, moved modules fields from the general tab
This commit is contained in:
@@ -1,15 +1,12 @@
|
||||
import { Box, Drawer, rem, Tabs } from "@mantine/core";
|
||||
import { FC, ReactNode, useEffect } from "react";
|
||||
import { useCardPageContext } from "../../contexts/CardPageContext.tsx";
|
||||
import { IconBox, IconCalendarUser, IconCubeSend, IconSettings, IconUser, IconUsersGroup } from "@tabler/icons-react";
|
||||
import CardStatusChangeTable from "../../components/CardStatusChangeTable/CardStatusChangeTable.tsx";
|
||||
import GeneralTab from "../../tabs/GeneralTab/GeneralTab.tsx";
|
||||
import { IconCalendarUser, IconSettings } from "@tabler/icons-react";
|
||||
import CardStatusChangeTable from "./tabs/CardStatusChangeTable/CardStatusChangeTable.tsx";
|
||||
import GeneralTab from "./tabs/GeneralTab/GeneralTab.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/ClientTab.tsx";
|
||||
import { useModulesContext } from "../../../../modules/context/ModulesContext.tsx";
|
||||
|
||||
const useCardStatusChangeState = () => {
|
||||
const { selectedCard } = useCardPageContext();
|
||||
@@ -36,8 +33,7 @@ const CardEditDrawer: FC = () => {
|
||||
const { isVisible, onClose } = useCardEditDrawerState();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { selectedCard } = useCardPageContext();
|
||||
const modules = new Set<string>(selectedCard?.board.project.modules.map(module => module.key));
|
||||
const { modules } = useModulesContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) return;
|
||||
@@ -62,23 +58,27 @@ const CardEditDrawer: FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const getTab = (
|
||||
key: string,
|
||||
icon: ReactNode,
|
||||
label: string,
|
||||
enablingModules: string[] | null = null, // Show if at least one of modules is in project
|
||||
) => {
|
||||
if (!enablingModules) {
|
||||
enablingModules = [key];
|
||||
}
|
||||
if (!enablingModules.some(key => modules.has(key))) return;
|
||||
const getTabs = () => {
|
||||
const moduleTabs = modules.map(module => (
|
||||
<Tabs.Tab
|
||||
value={module.info.key}
|
||||
leftSection={module.info.icon}
|
||||
>
|
||||
{module.info.label}
|
||||
</Tabs.Tab>
|
||||
));
|
||||
|
||||
return (
|
||||
<Tabs.Tab
|
||||
value={key}
|
||||
leftSection={icon}>
|
||||
{label}
|
||||
</Tabs.Tab>
|
||||
<>{moduleTabs}</>
|
||||
);
|
||||
};
|
||||
|
||||
const getTabPanels = () => {
|
||||
const moduleTabPanels = modules.map(
|
||||
module => getTabPanel(module.info.key, module.tab),
|
||||
);
|
||||
return (
|
||||
<>{moduleTabPanels}</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -115,18 +115,12 @@ const CardEditDrawer: FC = () => {
|
||||
leftSection={<IconCalendarUser />}>
|
||||
История
|
||||
</Tabs.Tab>
|
||||
{getTab("clients", <IconUser />, "Клиент", ["servicesAndProducts", "clients"])}
|
||||
{getTab("servicesAndProducts", <IconBox />, "Товары и услуги")}
|
||||
{getTab("shipment", <IconCubeSend />, "Отгрузка")}
|
||||
{getTab("employees", <IconUsersGroup />, "Исполнители")}
|
||||
{getTabs()}
|
||||
</Tabs.List>
|
||||
|
||||
{getTabPanel("general", <GeneralTab />)}
|
||||
{getTabPanel("clients", <ClientTab />)}
|
||||
{getTabPanel("history", <CardEditDrawerStatusChangeTable />)}
|
||||
{getTabPanel("servicesAndProducts", <ProductAndServiceTab />)}
|
||||
{getTabPanel("shipment", <ShippingTab />)}
|
||||
{getTabPanel("employees", <EmployeesTab />)}
|
||||
{getTabPanels()}
|
||||
</Tabs>
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { CardStatusHistorySchema } from "../../../../client";
|
||||
import { CardStatusHistorySchema } from "../../../../../../client";
|
||||
import { useDealStatusChangeTableColumns } from "./columns.tsx";
|
||||
import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
|
||||
import { BaseTable } from "../../../../../../components/BaseTable/BaseTable.tsx";
|
||||
import { FC } from "react";
|
||||
|
||||
type Props = {
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useMemo } from "react";
|
||||
import { MRT_ColumnDef } from "mantine-react-table";
|
||||
import { CardStatusHistorySchema } from "../../../../client";
|
||||
import { CardStatusHistorySchema } from "../../../../../../client";
|
||||
import { Spoiler, Text } from "@mantine/core";
|
||||
|
||||
export const useDealStatusChangeTableColumns = () => {
|
||||
@@ -1,5 +1,5 @@
|
||||
import { FC, useState } from "react";
|
||||
import { useCardPageContext } from "../../contexts/CardPageContext.tsx";
|
||||
import { useCardPageContext } from "../../../../contexts/CardPageContext.tsx";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
@@ -14,31 +14,17 @@ import {
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import {
|
||||
CardSchema,
|
||||
CardService,
|
||||
ClientService,
|
||||
ProjectSchema,
|
||||
ShippingWarehouseSchema,
|
||||
StatusSchema,
|
||||
} from "../../../../client";
|
||||
import { CardSchema, CardService, ClientService, ProjectSchema, StatusSchema } from "../../../../../../client";
|
||||
import { isEqual } from "lodash";
|
||||
import { notifications } from "../../../../shared/lib/notifications.ts";
|
||||
import { notifications } from "../../../../../../shared/lib/notifications.ts";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import ShippingWarehouseAutocomplete
|
||||
from "../../../../components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
|
||||
import { ButtonCopyControlled } from "../../../../components/ButtonCopyControlled/ButtonCopyControlled.tsx";
|
||||
import { ButtonCopyControlled } from "../../../../../../components/ButtonCopyControlled/ButtonCopyControlled.tsx";
|
||||
import { useClipboard } from "@mantine/hooks";
|
||||
import ManagerSelect from "../../../../components/ManagerSelect/ManagerSelect.tsx";
|
||||
import ProjectSelect from "../../../../components/ProjectSelect/ProjectSelect.tsx";
|
||||
import BoardSelect from "../../../../components/BoardSelect/BoardSelect.tsx";
|
||||
import DealStatusSelect from "../../../../components/DealStatusSelect/DealStatusSelect.tsx";
|
||||
import CardAttributeFields from "../../../../components/CardAttributeFields/CardAttributeFields.tsx";
|
||||
import getAttributesFromCard from "../../../../components/CardAttributeFields/utils/getAttributesFromCard.ts";
|
||||
import isModuleInProject, { Modules } from "../../utils/isModuleInProject.ts";
|
||||
import PaymentLinkButton from "./components/PaymentLinkButton.tsx";
|
||||
import PrintDealBarcodesButton from "./components/PrintDealBarcodesButton.tsx";
|
||||
import ClientSelect from "../../../../components/Selects/ClientSelect/ClientSelect.tsx";
|
||||
import ProjectSelect from "../../../../../../components/ProjectSelect/ProjectSelect.tsx";
|
||||
import BoardSelect from "../../../../../../components/BoardSelect/BoardSelect.tsx";
|
||||
import CardStatusSelect from "../../../../../../components/DealStatusSelect/CardStatusSelect.tsx";
|
||||
import CardAttributeFields from "../../../../../../components/CardAttributeFields/CardAttributeFields.tsx";
|
||||
import getAttributesFromCard from "../../../../../../components/CardAttributeFields/utils/getAttributesFromCard.ts";
|
||||
|
||||
type Props = {
|
||||
card: CardSchema;
|
||||
@@ -56,10 +42,6 @@ const Content: FC<Props> = ({ card }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [project, setProject] = useState<ProjectSchema | null>(card.board.project);
|
||||
|
||||
const isServicesAndProductsIncluded = isModuleInProject(Modules.SERVICES_AND_PRODUCTS, card.board.project);
|
||||
const isManagerIncluded = isModuleInProject(Modules.MANAGERS, card.board.project);
|
||||
const isClientIncluded = isModuleInProject(Modules.CLIENTS, card.board.project);
|
||||
|
||||
const getInitialValues = (card: CardSchema): CardGeneralFormType => {
|
||||
return {
|
||||
...card,
|
||||
@@ -99,7 +81,6 @@ const Content: FC<Props> = ({ card }) => {
|
||||
statusId: values.status.id,
|
||||
boardId: values.board.id,
|
||||
clientId: values.client?.id ?? null,
|
||||
shippingWarehouse: values.shippingWarehouse?.toString(),
|
||||
attributes,
|
||||
},
|
||||
},
|
||||
@@ -107,7 +88,6 @@ const Content: FC<Props> = ({ card }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
CardService.getCardById({ cardId: card.id }).then(data => {
|
||||
console.log(data);
|
||||
setSelectedCard(data);
|
||||
initialValues = getInitialValues(data);
|
||||
form.setValues(initialValues);
|
||||
@@ -131,21 +111,7 @@ const Content: FC<Props> = ({ card }) => {
|
||||
await updateClientInfo(values);
|
||||
}
|
||||
|
||||
const shippingWarehouse = isShippingWarehouse(values.shippingWarehouse)
|
||||
? values.shippingWarehouse.name
|
||||
: values.shippingWarehouse;
|
||||
await updateCardInfo(
|
||||
{
|
||||
...values,
|
||||
shippingWarehouse,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const isShippingWarehouse = (
|
||||
value: ShippingWarehouseSchema | string | null | undefined,
|
||||
): value is ShippingWarehouseSchema => {
|
||||
return !!value && !["string"].includes(typeof value);
|
||||
await updateCardInfo(values);
|
||||
};
|
||||
|
||||
const onCopyGuestUrlClick = () => {
|
||||
@@ -196,7 +162,7 @@ const Content: FC<Props> = ({ card }) => {
|
||||
{...form.getInputProps("board")}
|
||||
label={"Доска"}
|
||||
/>
|
||||
<DealStatusSelect
|
||||
<CardStatusSelect
|
||||
board={form.values.board}
|
||||
{...form.getInputProps("status")}
|
||||
label={"Статус"}
|
||||
@@ -211,49 +177,6 @@ const Content: FC<Props> = ({ card }) => {
|
||||
placeholder={"Введите коментарий"}
|
||||
{...form.getInputProps("comment")}
|
||||
/>
|
||||
{isClientIncluded && (
|
||||
<ClientSelect
|
||||
{...form.getInputProps("client")}
|
||||
withLabel
|
||||
/>
|
||||
)}
|
||||
{isServicesAndProductsIncluded && (
|
||||
<ShippingWarehouseAutocomplete
|
||||
placeholder={"Введите склад отгрузки"}
|
||||
label={"Склад отгрузки"}
|
||||
value={
|
||||
isShippingWarehouse(
|
||||
form.values.shippingWarehouse,
|
||||
)
|
||||
? form.values.shippingWarehouse
|
||||
: undefined
|
||||
}
|
||||
onChange={event => {
|
||||
if (isShippingWarehouse(event)) {
|
||||
form.getInputProps(
|
||||
"shippingWarehouse",
|
||||
).onChange(event.name);
|
||||
return;
|
||||
}
|
||||
form.getInputProps(
|
||||
"shippingWarehouse",
|
||||
).onChange(event);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isManagerIncluded && (
|
||||
<ManagerSelect
|
||||
placeholder={"Укажите менеджера"}
|
||||
label={"Менеджер"}
|
||||
{...form.getInputProps("manager")}
|
||||
/>
|
||||
)}
|
||||
{isServicesAndProductsIncluded && (
|
||||
<Checkbox
|
||||
label={"Учет выручки с услуг в статистике"}
|
||||
{...form.getInputProps("isServicesProfitAccounted", { type: "checkbox" })}
|
||||
/>
|
||||
)}
|
||||
{project && (
|
||||
<CardAttributeFields
|
||||
project={project}
|
||||
@@ -273,36 +196,16 @@ const Content: FC<Props> = ({ card }) => {
|
||||
align={"center"}
|
||||
gap={rem(10)}
|
||||
justify={"center"}>
|
||||
<Flex
|
||||
gap={rem(10)}
|
||||
align={"center"}
|
||||
justify={"space-between"}>
|
||||
{isServicesAndProductsIncluded && (
|
||||
<PrintDealBarcodesButton card={card} />
|
||||
)}
|
||||
<Flex gap={rem(10)}>
|
||||
{isServicesAndProductsIncluded && (
|
||||
<PaymentLinkButton card={card} />
|
||||
)}
|
||||
<ButtonCopyControlled
|
||||
onCopyClick={onCopyGuestUrlClick}
|
||||
onCopiedLabel={
|
||||
"Ссылка скопирована в буфер обмена"
|
||||
}
|
||||
copied={clipboard.copied}
|
||||
>
|
||||
Ссылка на редактирование
|
||||
</ButtonCopyControlled>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<ButtonCopyControlled
|
||||
onCopyClick={onCopyGuestUrlClick}
|
||||
onCopiedLabel={
|
||||
"Ссылка скопирована в буфер обмена"
|
||||
}
|
||||
copied={clipboard.copied}
|
||||
>
|
||||
Ссылка на редактирование
|
||||
</ButtonCopyControlled>
|
||||
<Flex gap={rem(10)}>
|
||||
{isServicesAndProductsIncluded && (
|
||||
<Checkbox
|
||||
label={"Оплачен"}
|
||||
checked={card.billRequest?.paid || card.group?.billRequest?.paid || false}
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
<Checkbox
|
||||
label={"Завершена"}
|
||||
{...form.getInputProps("isCompleted", { type: "checkbox" })}
|
||||
@@ -2,7 +2,7 @@ import { FC } from "react";
|
||||
import { CardProductSchema, ProductSchema } from "../../../../../../client";
|
||||
import { Image, rem, Text, Title } from "@mantine/core";
|
||||
import { isNil } from "lodash";
|
||||
import { ProductFieldNames } from "../../../../tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx";
|
||||
import { ProductFieldNames } from "../../../../../../modules/cardModules/cardEditorTabs/ProductAndServiceTab/components/ProductView/ProductView.tsx";
|
||||
import ProductServicesTable from "../tables/ProductServicesTable/ProductServicesTable.tsx";
|
||||
import styles from "./ProductPreview.module.css";
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useForm } from "@mantine/form";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BaseMarketplaceSchema } from "../../../../../client";
|
||||
import { useCardSummariesFull } from "../../../hooks/useCardSummaries.tsx";
|
||||
import isModuleInProject, { Modules } from "../../../utils/isModuleInProject.ts";
|
||||
import isModuleInProject, { Modules } from "../../../../../modules/utils/isModuleInProject.ts";
|
||||
|
||||
type State = {
|
||||
idOrName: string | null;
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import BaseFormModal, {
|
||||
CreateEditFormProps,
|
||||
} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
||||
import { CardProductSchema, CardProductServiceSchema } from "../../../client";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { NumberInput } from "@mantine/core";
|
||||
import ProductSelect from "../../../components/ProductSelect/ProductSelect.tsx";
|
||||
import { omit } from "lodash";
|
||||
|
||||
type RestProps = {
|
||||
clientId: number;
|
||||
productIds?: number[];
|
||||
};
|
||||
|
||||
type Props = CreateEditFormProps<CardProductSchema> & RestProps;
|
||||
const AddCardProductModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps,
|
||||
}: ContextModalProps<Props>) => {
|
||||
const isEditing = "element" in innerProps;
|
||||
const restProps = omit(innerProps, ["clientId"]);
|
||||
|
||||
const validateServices = (services?: CardProductServiceSchema[]) => {
|
||||
if (!services || services.length == 0) return null;
|
||||
return services.find(service => service.service === undefined)
|
||||
? "Удалите пустые услуги"
|
||||
: null;
|
||||
};
|
||||
const form = useForm<Partial<CardProductSchema>>({
|
||||
initialValues: isEditing
|
||||
? innerProps.element
|
||||
: {
|
||||
product: undefined,
|
||||
services: [],
|
||||
quantity: 1,
|
||||
},
|
||||
validate: {
|
||||
product: (product?: CardProductSchema["product"]) =>
|
||||
product !== undefined ? null : "Необходимо выбрать товар",
|
||||
quantity: (quantity?: number) =>
|
||||
quantity && quantity > 0
|
||||
? null
|
||||
: "Количество должно быть больше 0",
|
||||
services: validateServices,
|
||||
},
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
context.closeContextModal(id);
|
||||
};
|
||||
return (
|
||||
<BaseFormModal
|
||||
{...(restProps as CreateEditFormProps<CardProductSchema>)}
|
||||
form={form}
|
||||
closeOnSubmit
|
||||
onClose={onClose}>
|
||||
<BaseFormModal.Body>
|
||||
<>
|
||||
<ProductSelect
|
||||
placeholder={"Выберите товар"}
|
||||
label={"Товар"}
|
||||
clientId={innerProps.clientId}
|
||||
disabled={isEditing}
|
||||
filterBy={item =>
|
||||
!(innerProps.productIds || []).includes(item.id)
|
||||
}
|
||||
{...form.getInputProps("product")}
|
||||
/>
|
||||
<NumberInput
|
||||
placeholder={"Введите количество"}
|
||||
label={"Количество"}
|
||||
min={1}
|
||||
{...form.getInputProps("quantity")}
|
||||
/>
|
||||
{/*<Fieldset legend={'Услуги'}>*/}
|
||||
{/* <DealProductServiceTable*/}
|
||||
{/* quantity={form.values.quantity || 1}*/}
|
||||
{/* {...form.getInputProps('services') as*/}
|
||||
{/* BaseFormInputProps<CardProductServiceSchema[]>}*/}
|
||||
{/* />*/}
|
||||
{/*</Fieldset>*/}
|
||||
</>
|
||||
</BaseFormModal.Body>
|
||||
</BaseFormModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCardProductModal;
|
||||
@@ -1,106 +0,0 @@
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import BaseFormModal, { CreateEditFormProps } from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
||||
import { CardServiceSchema } from "../../../client";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { ComboboxItem, ComboboxItemGroup, NumberInput, OptionsFilter } from "@mantine/core";
|
||||
import ServiceWithPriceInput from "../../../components/ServiceWithPriceInput/ServiceWithPriceInput.tsx";
|
||||
import { ServiceType } from "../../../shared/enums/ServiceType.ts";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../redux/store.ts";
|
||||
|
||||
type RestProps = {
|
||||
serviceIds?: number[];
|
||||
};
|
||||
type Props = CreateEditFormProps<Partial<CardServiceSchema>> & RestProps;
|
||||
const AddCardServiceModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps,
|
||||
}: ContextModalProps<Props>) => {
|
||||
const authState = useSelector((state: RootState) => state.auth);
|
||||
const isEditing = "element" in innerProps;
|
||||
const form = useForm<Partial<CardServiceSchema>>({
|
||||
initialValues: isEditing
|
||||
? innerProps.element
|
||||
: {
|
||||
service: undefined,
|
||||
quantity: 1,
|
||||
employees: [],
|
||||
},
|
||||
validate: {
|
||||
service: (service?: CardServiceSchema["service"]) =>
|
||||
service !== undefined ? null : "Необходимо выбрать услугу",
|
||||
quantity: (quantity?: number) =>
|
||||
quantity && quantity > 0
|
||||
? null
|
||||
: "Количество должно быть больше 0",
|
||||
},
|
||||
});
|
||||
const onClose = () => {
|
||||
context.closeContextModal(id);
|
||||
};
|
||||
|
||||
const serviceOptionsFilter = ({
|
||||
options,
|
||||
}: {
|
||||
options: ComboboxItemGroup[];
|
||||
}) => {
|
||||
if (!innerProps.serviceIds) return options;
|
||||
const productServiceIds = innerProps.serviceIds;
|
||||
return (options as ComboboxItemGroup[]).map(({ items, group }) => {
|
||||
return {
|
||||
group,
|
||||
items: items.filter(
|
||||
item =>
|
||||
!productServiceIds.includes(
|
||||
parseInt((item as ComboboxItem).value)
|
||||
)
|
||||
),
|
||||
};
|
||||
});
|
||||
};
|
||||
return (
|
||||
<BaseFormModal
|
||||
{...innerProps}
|
||||
form={form}
|
||||
closeOnSubmit
|
||||
onClose={onClose}>
|
||||
<BaseFormModal.Body>
|
||||
<>
|
||||
<ServiceWithPriceInput
|
||||
serviceProps={{
|
||||
...form.getInputProps("service"),
|
||||
label: "Услуга",
|
||||
placeholder: "Выберите услугу",
|
||||
style: { width: "100%" },
|
||||
disabled: isEditing,
|
||||
filter: serviceOptionsFilter as OptionsFilter,
|
||||
}}
|
||||
priceProps={{
|
||||
...form.getInputProps("price"),
|
||||
label: "Цена",
|
||||
placeholder: "Введите цену",
|
||||
style: { width: "100%" },
|
||||
disabled: authState.isGuest,
|
||||
}}
|
||||
quantity={form.values.quantity || 1}
|
||||
containerProps={{
|
||||
direction: "column",
|
||||
style: { width: "100%" },
|
||||
}}
|
||||
filterType={ServiceType.DEAL_SERVICE}
|
||||
lockOnEdit={isEditing}
|
||||
/>
|
||||
<NumberInput
|
||||
placeholder={"Введите количество"}
|
||||
label={"Количество"}
|
||||
min={1}
|
||||
{...form.getInputProps("quantity")}
|
||||
/>
|
||||
</>
|
||||
</BaseFormModal.Body>
|
||||
</BaseFormModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCardServiceModal;
|
||||
@@ -3,7 +3,7 @@ import { Flex, Modal, NumberInput, rem } from "@mantine/core";
|
||||
import { UseFormReturnType } from "@mantine/form";
|
||||
import { CardsPageState } from "../hooks/useCardsPageState.tsx";
|
||||
import ObjectSelect from "../../../components/ObjectSelect/ObjectSelect.tsx";
|
||||
import DealStatusSelect from "../../../components/DealStatusSelect/DealStatusSelect.tsx";
|
||||
import CardStatusSelect from "../../../components/DealStatusSelect/CardStatusSelect.tsx";
|
||||
import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
|
||||
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
@@ -25,7 +25,7 @@ const CardsTableFiltersModal = ({ form, projects }: Props) => {
|
||||
<IconFilter />
|
||||
Фильтры
|
||||
</InlineButton>
|
||||
<Modal title={"Фильтры для сделок"} opened={opened} onClose={close}>
|
||||
<Modal title={"Фильтры"} opened={opened} onClose={close}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}
|
||||
@@ -49,7 +49,7 @@ const CardsTableFiltersModal = ({ form, projects }: Props) => {
|
||||
{...form.getInputProps("board")}
|
||||
clearable
|
||||
/>
|
||||
<DealStatusSelect
|
||||
<CardStatusSelect
|
||||
board={form.values.board}
|
||||
{...form.getInputProps("status")}
|
||||
clearable
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
import BaseFormModal, {
|
||||
CreateEditFormProps,
|
||||
} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
||||
import {
|
||||
CardProductServiceSchema,
|
||||
ServiceSchema,
|
||||
} from "../../../client";
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import { useForm, UseFormReturnType } from "@mantine/form";
|
||||
import { isNil, isNumber } from "lodash";
|
||||
import ServiceWithPriceInput from "../../../components/ServiceWithPriceInput/ServiceWithPriceInput.tsx";
|
||||
import { Checkbox, Flex, rem } from "@mantine/core";
|
||||
import { ServiceType } from "../../../shared/enums/ServiceType.ts";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../redux/store.ts";
|
||||
|
||||
type RestProps = {
|
||||
quantity: number;
|
||||
serviceIds: number[];
|
||||
};
|
||||
type Props = CreateEditFormProps<CardProductServiceSchema> & RestProps;
|
||||
|
||||
const ProductServiceFormModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps,
|
||||
}: ContextModalProps<Props>) => {
|
||||
const authState = useSelector((state: RootState) => state.auth);
|
||||
|
||||
const isEditing = "onChange" in innerProps;
|
||||
const initialValues: Partial<CardProductServiceSchema> = isEditing
|
||||
? innerProps.element
|
||||
: {
|
||||
service: undefined,
|
||||
price: undefined,
|
||||
employees: [],
|
||||
isFixedPrice: false,
|
||||
};
|
||||
const form = useForm<Partial<CardProductServiceSchema>>({
|
||||
initialValues,
|
||||
validate: {
|
||||
service: (service?: ServiceSchema) =>
|
||||
isNil(service) || service.id < 0 ? "Укажите услугу" : null,
|
||||
price: (price?: number) =>
|
||||
!isNumber(price) || price < 0 ? "Укажите цену" : null,
|
||||
},
|
||||
});
|
||||
const onClose = () => {
|
||||
context.closeContextModal(id);
|
||||
};
|
||||
return (
|
||||
<BaseFormModal
|
||||
{...innerProps}
|
||||
form={form as UseFormReturnType<CardProductServiceSchema>}
|
||||
onClose={onClose}
|
||||
closeOnSubmit>
|
||||
<BaseFormModal.Body>
|
||||
<>
|
||||
<Flex w={"100%"} direction={"column"} gap={rem(10)}>
|
||||
<ServiceWithPriceInput
|
||||
serviceProps={{
|
||||
...form.getInputProps("service"),
|
||||
label: "Услуга",
|
||||
placeholder: "Выберите услугу",
|
||||
disabled: isEditing,
|
||||
filterBy: item =>
|
||||
!innerProps.serviceIds.includes(item.id) ||
|
||||
isEditing,
|
||||
style: { width: "100%" },
|
||||
}}
|
||||
priceProps={{
|
||||
...form.getInputProps("price"),
|
||||
label: "Цена",
|
||||
placeholder: "Введите цену",
|
||||
style: { width: "100%" },
|
||||
disabled: authState.isGuest,
|
||||
}}
|
||||
filterType={ServiceType.PRODUCT_SERVICE}
|
||||
containerProps={{
|
||||
direction: "column",
|
||||
style: { width: "100%" },
|
||||
}}
|
||||
lockOnEdit={isEditing}
|
||||
quantity={innerProps.quantity}
|
||||
/>
|
||||
<Checkbox
|
||||
{...form.getInputProps("isFixedPrice", { type: "checkbox" })}
|
||||
label={"Зафиксировать цену"}
|
||||
placeholder={"Зафиксировать цену"}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
</BaseFormModal.Body>
|
||||
</BaseFormModal>
|
||||
);
|
||||
};
|
||||
export default ProductServiceFormModal;
|
||||
@@ -1,103 +0,0 @@
|
||||
import { Button, Fieldset, Flex, rem, Stack, Textarea, TextInput } from "@mantine/core";
|
||||
import { useCardPageContext } from "../../contexts/CardPageContext.tsx";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { CardGeneralFormType } from "../GeneralTab/GeneralTab.tsx";
|
||||
import { CardSchema, CardService, ClientService } from "../../../../client";
|
||||
import { isEqual } from "lodash";
|
||||
import { notifications } from "../../../../shared/lib/notifications.ts";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
const ClientTab = () => {
|
||||
const { selectedCard: card, setSelectedCard } = useCardPageContext();
|
||||
const initialValues: CardGeneralFormType = card as CardSchema;
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
if (!card?.client) return;
|
||||
|
||||
const form = useForm<CardGeneralFormType>(
|
||||
{
|
||||
initialValues: initialValues,
|
||||
validate: {
|
||||
name: (value: string) => value.length > 0 ? null : "Название сделки не может быть пустым",
|
||||
},
|
||||
},
|
||||
);
|
||||
const hasChanges = !isEqual(form.values, initialValues);
|
||||
const updateClientInfo = async (values: CardGeneralFormType) => {
|
||||
if (!values.client) return;
|
||||
|
||||
return ClientService.updateClient({
|
||||
requestBody: {
|
||||
data: values.client,
|
||||
},
|
||||
}).then(({ ok, message }) => notifications.guess(ok, { message }));
|
||||
};
|
||||
const update = async () => {
|
||||
return CardService.getCardById({ cardId: form.values.id }).then(data => {
|
||||
setSelectedCard(data);
|
||||
form.setInitialValues(data);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["getCardSummaries"],
|
||||
});
|
||||
});
|
||||
};
|
||||
const handleSave = () => {
|
||||
updateClientInfo(form.values).then(async () => {
|
||||
await update();
|
||||
});
|
||||
};
|
||||
const handleCancel = () => {
|
||||
form.setInitialValues(initialValues);
|
||||
};
|
||||
return (
|
||||
<Flex direction={"column"} flex={1} gap={rem(10)}>
|
||||
<Flex flex={1}>
|
||||
<Fieldset legend={"Клиент"} flex={1}>
|
||||
<Stack gap={rem(10)}>
|
||||
<TextInput
|
||||
disabled
|
||||
placeholder={"Название"}
|
||||
label={"Название"}
|
||||
value={card?.client.name}
|
||||
/>
|
||||
<TextInput
|
||||
placeholder={"Введите телефон"}
|
||||
label={"Телефон клиента"}
|
||||
{...form.getInputProps("client.details.phoneNumber")}
|
||||
/>
|
||||
<TextInput
|
||||
placeholder={"Введите email"}
|
||||
label={"Email"}
|
||||
{...form.getInputProps("client.details.email")}
|
||||
/>
|
||||
<TextInput
|
||||
placeholder={"Введите телеграм"}
|
||||
label={"Телеграм"}
|
||||
{...form.getInputProps("client.details.telegram")}
|
||||
/>
|
||||
<TextInput
|
||||
placeholder={"Введите ИНН"}
|
||||
label={"ИНН"}
|
||||
{...form.getInputProps("client.details.inn")}
|
||||
/>
|
||||
<Textarea
|
||||
placeholder={"Введите комментарий"}
|
||||
label={"Комментарий"}
|
||||
{...form.getInputProps("client.comment")}
|
||||
/>
|
||||
</Stack>
|
||||
</Fieldset>
|
||||
</Flex>
|
||||
<Flex
|
||||
gap={rem(10)}
|
||||
justify={"flex-end"}
|
||||
display={!hasChanges ? "none" : "flex"}
|
||||
>
|
||||
<Button onClick={handleCancel} variant={"default"}>Отмена</Button>
|
||||
<Button onClick={handleSave} variant={"default"}>Сохранить</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
);
|
||||
};
|
||||
export default ClientTab;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
import EmployeeInput from "./components/EmployeeInput.tsx";
|
||||
import EmployeesTable from "./components/EmployeesTable.tsx";
|
||||
|
||||
const EmployeesTab = () => {
|
||||
return (
|
||||
<Stack>
|
||||
<EmployeeInput />
|
||||
<EmployeesTable />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeesTab;
|
||||
@@ -1,28 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import ObjectSelect, { ObjectSelectProps } from "../../../../../components/ObjectSelect/ObjectSelect.tsx";
|
||||
import { UserSchema } from "../../../../../client";
|
||||
import useAvailableEmployeesList from "../hooks/useAvailableEmployeesList.tsx";
|
||||
|
||||
type DealData = {
|
||||
cardId: number;
|
||||
}
|
||||
|
||||
type Props = DealData & Omit<
|
||||
ObjectSelectProps<UserSchema | null>,
|
||||
"data" | "getValueFn" | "getLabelFn"
|
||||
>;
|
||||
|
||||
const UserForDepartmentSelect: FC<Props> = ({ cardId, ...selectProps }) => {
|
||||
const { objects: employees } = useAvailableEmployeesList({ cardId });
|
||||
|
||||
return (
|
||||
<ObjectSelect
|
||||
data={employees}
|
||||
getLabelFn={(user: UserSchema) => `${user.firstName} ${user.secondName}`}
|
||||
getValueFn={(user: UserSchema) => user.id.toString()}
|
||||
searchable
|
||||
{...selectProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default UserForDepartmentSelect;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Button, Group } from "@mantine/core";
|
||||
import { IconQrcode, IconTablePlus } from "@tabler/icons-react";
|
||||
import useEmployeesTab from "../hooks/useEmployeesTab.tsx";
|
||||
|
||||
const EmployeeInput = () => {
|
||||
const {
|
||||
onAssignEmployeeByQrClick,
|
||||
onAssignEmployeeManuallyClick,
|
||||
} = useEmployeesTab();
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<Button variant={"default"} onClick={onAssignEmployeeByQrClick}>
|
||||
<Group gap={"md"}>
|
||||
<IconQrcode />
|
||||
Добавить исполнителя по QR коду
|
||||
</Group>
|
||||
</Button>
|
||||
<Button variant={"default"} onClick={onAssignEmployeeManuallyClick}>
|
||||
<Group gap={"md"}>
|
||||
<IconTablePlus />
|
||||
Добавить исполнителя вручную
|
||||
</Group>
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeInput;
|
||||
@@ -1,42 +0,0 @@
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
|
||||
import useEmployeeTableColumns from "../hooks/useEmployeesTableColumns.tsx";
|
||||
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
|
||||
import { IconTrash } from "@tabler/icons-react";
|
||||
import { MRT_TableOptions } from "mantine-react-table";
|
||||
import { CardEmployeesSchema } from "../../../../../client";
|
||||
import useEmployeesTab from "../hooks/useEmployeesTab.tsx";
|
||||
|
||||
|
||||
const EmployeesTable = () => {
|
||||
const { selectedCard: card } = useCardPageContext();
|
||||
const columns = useEmployeeTableColumns();
|
||||
const { onUnassignEmployeeClick } = useEmployeesTab();
|
||||
|
||||
return (
|
||||
<BaseTable
|
||||
data={card?.employees}
|
||||
columns={columns}
|
||||
restProps={
|
||||
{
|
||||
enableSorting: false,
|
||||
enableColumnActions: false,
|
||||
enableRowActions: true,
|
||||
renderRowActions: ({ row }) => (
|
||||
<Flex gap="md">
|
||||
<Tooltip label="Удалить">
|
||||
<ActionIcon
|
||||
onClick={() => onUnassignEmployeeClick(row.original)}
|
||||
variant={"default"}>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
),
|
||||
} as MRT_TableOptions<CardEmployeesSchema>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeesTable;
|
||||
@@ -1,16 +0,0 @@
|
||||
import { CardService } from "../../../../../client";
|
||||
import ObjectList from "../../../../../hooks/objectList.tsx";
|
||||
|
||||
|
||||
type Props = {
|
||||
cardId: number;
|
||||
}
|
||||
|
||||
const useAvailableEmployeesList = ({ cardId }: Props) =>
|
||||
ObjectList({
|
||||
queryFn: () => CardService.getAvailableEmployeesToAssign({ cardId }),
|
||||
getObjectsFn: response => response.employees,
|
||||
queryKey: "getAvailableEmployeesToAssign",
|
||||
});
|
||||
|
||||
export default useAvailableEmployeesList;
|
||||
@@ -1,73 +0,0 @@
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
import { CardEmployeesSchema, CardService } from "../../../../../client";
|
||||
|
||||
const useEmployeesTab = () => {
|
||||
const { selectedCard: card, refetchCard } = useCardPageContext();
|
||||
|
||||
const manageEmployee = (cardId: number, userId: number, isAssign: boolean) => {
|
||||
CardService.manageEmployee({
|
||||
requestBody: {
|
||||
cardId,
|
||||
userId,
|
||||
isAssign,
|
||||
},
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
refetchCard();
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
|
||||
const onInputFinish = (userIdInput: string) => {
|
||||
const userId = parseInt(userIdInput);
|
||||
if (isNaN(userId)) {
|
||||
notifications.error({ message: "Ошибка, некорректные данные в QR-коде" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!card) return;
|
||||
manageEmployee(card.id, userId, true);
|
||||
};
|
||||
|
||||
const onAssignEmployeeByQrClick = () => {
|
||||
modals.openContextModal({
|
||||
modal: "scanningModal",
|
||||
innerProps: {
|
||||
label: "Отсканируйте QR-код",
|
||||
onScan: onInputFinish,
|
||||
closeOnScan: true,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
|
||||
const onUnassignEmployeeClick = (assignment: CardEmployeesSchema) => {
|
||||
if (!card) return;
|
||||
manageEmployee(card.id, assignment.user.id, false);
|
||||
};
|
||||
|
||||
const onAssignEmployeeManuallyClick = () => {
|
||||
if (!card) return;
|
||||
|
||||
modals.openContextModal({
|
||||
modal: "assignEmployeeModal",
|
||||
title: `Назначение исполнителя`,
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
card,
|
||||
manageEmployee,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
onAssignEmployeeByQrClick,
|
||||
onAssignEmployeeManuallyClick,
|
||||
onUnassignEmployeeClick,
|
||||
};
|
||||
};
|
||||
|
||||
export default useEmployeesTab;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { MRT_ColumnDef } from "mantine-react-table";
|
||||
import { CardEmployeesSchema } from "../../../../../client";
|
||||
|
||||
|
||||
const useEmployeeTableColumns = () => {
|
||||
return useMemo<MRT_ColumnDef<CardEmployeesSchema>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "createdAt",
|
||||
header: "Дата назначения",
|
||||
Cell: ({ cell }) => new Date(cell.getValue() as string).toLocaleString("ru"),
|
||||
},
|
||||
{
|
||||
header: "ФИО",
|
||||
Cell: ({ row }) =>
|
||||
`${row.original.user.secondName} ${row.original.user.firstName} ${row.original.user.patronymic}`,
|
||||
},
|
||||
{
|
||||
accessorKey: "user.role.name",
|
||||
header: "Роль",
|
||||
},
|
||||
{
|
||||
accessorKey: "user.position.name",
|
||||
header: "Должность",
|
||||
},
|
||||
{
|
||||
accessorKey: "user.comment",
|
||||
header: "Дополнительная информация",
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
};
|
||||
|
||||
export default useEmployeeTableColumns;
|
||||
@@ -1,58 +0,0 @@
|
||||
import { useForm } from "@mantine/form";
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import { Button, Flex, rem } from "@mantine/core";
|
||||
import { CardSchema } from "../../../../../client";
|
||||
import AssignUserModalForm from "../types/AssignUserModalForm.tsx";
|
||||
import AvailableEmployeesSelect from "../components/AvailableEmployeesSelect.tsx";
|
||||
|
||||
type Props = {
|
||||
card: CardSchema;
|
||||
manageEmployee: (cardId: number, userId: number, isAssign: boolean) => void;
|
||||
}
|
||||
|
||||
const AssignEmployeeModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps,
|
||||
}: ContextModalProps<Props>) => {
|
||||
const {
|
||||
card,
|
||||
manageEmployee,
|
||||
} = innerProps;
|
||||
|
||||
const form = useForm<Partial<AssignUserModalForm>>({
|
||||
validate: {
|
||||
employee: employee => !employee && "Необходимо выбрать работника",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = () => {
|
||||
if (!form.values.employee) return;
|
||||
manageEmployee(card.id, form.values.employee.id, true);
|
||||
context.closeContextModal(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(() => onSubmit())}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}
|
||||
>
|
||||
<AvailableEmployeesSelect
|
||||
label={"Работник"}
|
||||
placeholder={"Выберите работника"}
|
||||
{...form.getInputProps("employee")}
|
||||
cardId={card.id}
|
||||
/>
|
||||
<Button
|
||||
variant={"default"}
|
||||
type={"submit"}
|
||||
>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignEmployeeModal;
|
||||
@@ -1,7 +0,0 @@
|
||||
import { UserSchema } from "../../../../../client";
|
||||
|
||||
type AssignUserModalForm = {
|
||||
employee: UserSchema;
|
||||
}
|
||||
|
||||
export default AssignUserModalForm;
|
||||
@@ -1,43 +0,0 @@
|
||||
import { CardSchema } from "../../../../../client";
|
||||
import ButtonCopy from "../../../../../components/ButtonCopy/ButtonCopy.tsx";
|
||||
import { ButtonCopyControlled } from "../../../../../components/ButtonCopyControlled/ButtonCopyControlled.tsx";
|
||||
import { getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts";
|
||||
import FileSaver from "file-saver";
|
||||
|
||||
type Props = {
|
||||
card: CardSchema;
|
||||
}
|
||||
|
||||
const PaymentLinkButton = ({ card }: Props) => {
|
||||
const billRequestPdfUrl = card?.billRequest?.pdfUrl || card?.group?.billRequest?.pdfUrl;
|
||||
|
||||
if (billRequestPdfUrl) {
|
||||
return (
|
||||
<ButtonCopy
|
||||
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
|
||||
value={billRequestPdfUrl}
|
||||
>
|
||||
Ссылка на оплату
|
||||
</ButtonCopy>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ButtonCopyControlled
|
||||
onCopyClick={() => {
|
||||
const date =
|
||||
getCurrentDateTimeForFilename();
|
||||
FileSaver.saveAs(
|
||||
`${import.meta.env.VITE_API_URL}/card/billing-document/${card.id}`,
|
||||
`bill_${card.id}_${date}.pdf`,
|
||||
);
|
||||
}}
|
||||
copied={false}
|
||||
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
|
||||
>
|
||||
Ссылка на оплату (PDF)
|
||||
</ButtonCopyControlled>
|
||||
);
|
||||
}
|
||||
|
||||
export default PaymentLinkButton;
|
||||
@@ -1,63 +0,0 @@
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import styles from "../../../ui/CardsPage.module.css";
|
||||
import { CardSchema, CardService } from "../../../../../client";
|
||||
import { base64ToBlob } from "../../../../../shared/lib/utils.ts";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { IconBarcode, IconPrinter } from "@tabler/icons-react";
|
||||
|
||||
|
||||
type Props = {
|
||||
card: CardSchema;
|
||||
}
|
||||
|
||||
const PrintDealBarcodesButton = ({ card }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip
|
||||
className={styles["print-deals-button"]}
|
||||
label={"Распечатать штрихкоды сделки"}
|
||||
>
|
||||
<ActionIcon
|
||||
onClick={async () => {
|
||||
const response =
|
||||
await CardService.getCardProductsBarcodesPdf({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
},
|
||||
});
|
||||
const pdfBlob = base64ToBlob(
|
||||
response.base64String,
|
||||
response.mimeType,
|
||||
);
|
||||
const pdfUrl = URL.createObjectURL(pdfBlob);
|
||||
const pdfWindow = window.open(pdfUrl);
|
||||
if (!pdfWindow) {
|
||||
notifications.error({ message: "Ошибка" });
|
||||
return;
|
||||
}
|
||||
pdfWindow.onload = () => {
|
||||
pdfWindow.print();
|
||||
};
|
||||
}}
|
||||
variant={"default"}>
|
||||
<IconBarcode />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={"Распечатать сделку"}>
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
const pdfWindow = window.open(
|
||||
`${import.meta.env.VITE_API_URL}/card/tech-spec/${card.id}`,
|
||||
);
|
||||
if (!pdfWindow) return;
|
||||
pdfWindow.print();
|
||||
}}
|
||||
variant={"default"}>
|
||||
<IconPrinter />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrintDealBarcodesButton;
|
||||
@@ -1,38 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
//flex-direction: column;
|
||||
gap: rem(10);
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.container-disabled {
|
||||
}
|
||||
|
||||
.products-list {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(10);
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(10);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-container-wrapper {
|
||||
border: dashed var(--item-border-size) var(--mantine-color-default-border);
|
||||
border-radius: var(--item-border-radius);
|
||||
padding: rem(10);
|
||||
}
|
||||
|
||||
.card-container-buttons {
|
||||
gap: rem(10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import styles from "./ProductAndServiceTab.module.css";
|
||||
import ProductView from "./components/ProductView/ProductView.tsx";
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Flex,
|
||||
rem,
|
||||
ScrollArea,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import CardServicesTable from "./components/DealServicesTable/CardServicesTable.tsx";
|
||||
import useCardProductAndServiceTabState from "./hooks/useProductAndServiceTabState.tsx";
|
||||
import { modals } from "@mantine/modals";
|
||||
import {
|
||||
BillingService,
|
||||
CardProductSchema,
|
||||
CardService,
|
||||
GetServiceKitSchema,
|
||||
ProductSchema,
|
||||
ProductService,
|
||||
} from "../../../../client";
|
||||
import { notifications } from "../../../../shared/lib/notifications.ts";
|
||||
import { CreateProductRequest } from "../../../ProductsPage/types.ts";
|
||||
import classNames from "classnames";
|
||||
|
||||
const ProductAndServiceTab: FC = () => {
|
||||
const { cardState, cardServicesState, cardProductsState } =
|
||||
useCardProductAndServiceTabState();
|
||||
const isLocked = Boolean(cardState.card?.billRequest || cardState.card?.group?.billRequest);
|
||||
const onAddProductClick = () => {
|
||||
if (!cardProductsState.onCreate || !cardState.card || !cardState.card.clientId) return;
|
||||
const productIds = cardState.card.products.map(
|
||||
product => product.product.id
|
||||
);
|
||||
modals.openContextModal({
|
||||
modal: "addCardProduct",
|
||||
innerProps: {
|
||||
onCreate: cardProductsState.onCreate,
|
||||
clientId: cardState.card.clientId,
|
||||
productIds: productIds,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
const getTotalPrice = () => {
|
||||
if (!cardState.card) return 0;
|
||||
const productServicesPrice = cardState.card.products.reduce(
|
||||
(acc, row) =>
|
||||
acc +
|
||||
row.services.reduce(
|
||||
(acc2, row2) => acc2 + row2.price * row.quantity,
|
||||
0
|
||||
),
|
||||
0
|
||||
);
|
||||
const cardServicesPrice = cardState.card.services.reduce(
|
||||
(acc, row) => acc + row.price * row.quantity,
|
||||
0
|
||||
);
|
||||
return cardServicesPrice + productServicesPrice;
|
||||
};
|
||||
const onCopyServices = (
|
||||
sourceProduct: CardProductSchema,
|
||||
destinationProducts: CardProductSchema[]
|
||||
) => {
|
||||
if (!cardState.card) return;
|
||||
CardService.copyProductServices({
|
||||
requestBody: {
|
||||
cardId: cardState.card.id,
|
||||
destinationProductIds: destinationProducts.map(
|
||||
product => product.product.id
|
||||
),
|
||||
sourceProductId: sourceProduct.product.id,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await cardState.refetch();
|
||||
});
|
||||
};
|
||||
const onCopyServicesClick = (product: CardProductSchema) => {
|
||||
modals.openContextModal({
|
||||
modal: "selectCardProductsModal",
|
||||
title: "Дублирование услуг",
|
||||
size: "lg",
|
||||
innerProps: {
|
||||
cardProducts: cardState.card?.products || [],
|
||||
cardProduct: product,
|
||||
onSelect: onCopyServices,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
|
||||
const onKitAdd = (item: CardProductSchema, kit: GetServiceKitSchema) => {
|
||||
if (!cardState.card) return;
|
||||
CardService.addKitToCardProduct({
|
||||
requestBody: {
|
||||
cardId: cardState.card.id,
|
||||
kitId: kit.id,
|
||||
productId: item.product.id,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await cardState.refetch();
|
||||
});
|
||||
};
|
||||
const onCardKitAdd = (kit: GetServiceKitSchema) => {
|
||||
if (!cardState.card) return;
|
||||
CardService.addKitToCard({
|
||||
requestBody: {
|
||||
cardId: cardState.card.id,
|
||||
kitId: kit.id,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await cardState.refetch();
|
||||
});
|
||||
};
|
||||
|
||||
const onCreateProduct = (newProduct: CreateProductRequest) => {
|
||||
ProductService.createProduct({
|
||||
requestBody: newProduct,
|
||||
}).then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message: message });
|
||||
});
|
||||
};
|
||||
const onCreateProductClick = () => {
|
||||
if (!cardState.card || !cardState.card.clientId) return;
|
||||
modals.openContextModal({
|
||||
modal: "createProduct",
|
||||
title: "Создание товара",
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
clientId: cardState.card.clientId,
|
||||
onCreate: onCreateProduct,
|
||||
},
|
||||
});
|
||||
};
|
||||
const onProductEdit = (product: ProductSchema) => {
|
||||
ProductService.updateProduct({ requestBody: { product } }).then(
|
||||
async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await cardState.refetch();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const onCreateBillClick = () => {
|
||||
if (!cardState.card) return;
|
||||
const cardId = cardState.card.id;
|
||||
modals.openConfirmModal({
|
||||
withCloseButton: false,
|
||||
size: "xl",
|
||||
children: (
|
||||
<Text style={{ textAlign: "justify" }}>
|
||||
Создание заявки на выставление счета, подтвержденное
|
||||
нажатием кнопки "Выставить", заблокирует возможность
|
||||
редактирования товаров и услуг сделки. Пожалуйста, проверьте
|
||||
всю информацию на точность и полноту перед подтверждением.
|
||||
</Text>
|
||||
),
|
||||
onConfirm: () => {
|
||||
BillingService.createDealBill({
|
||||
requestBody: {
|
||||
cardId,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (ok)
|
||||
notifications.success({
|
||||
message:
|
||||
"Ссылка на оплату доступна во вкладе общее",
|
||||
});
|
||||
await cardState.refetch();
|
||||
});
|
||||
},
|
||||
labels: {
|
||||
confirm: "Выставить",
|
||||
cancel: "Отмена",
|
||||
},
|
||||
});
|
||||
};
|
||||
const onCancelBillClick = () => {
|
||||
if (!cardState.card) return;
|
||||
const cardId = cardState.card.id;
|
||||
modals.openConfirmModal({
|
||||
withCloseButton: false,
|
||||
children: (
|
||||
<Text style={{ textAlign: "justify" }}>
|
||||
Вы уверены что хотите отозвать заявку на оплату?
|
||||
</Text>
|
||||
),
|
||||
onConfirm: () => {
|
||||
BillingService.cancelDealBill({
|
||||
requestBody: {
|
||||
cardId,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
await cardState.refetch();
|
||||
});
|
||||
},
|
||||
labels: {
|
||||
confirm: "Отозвать",
|
||||
cancel: "Отмена",
|
||||
},
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
styles["container"],
|
||||
cardState.card?.billRequest && styles["container-disabled"]
|
||||
)}>
|
||||
<div className={styles["products-list"]}>
|
||||
<ScrollArea offsetScrollbars>
|
||||
{cardState.card?.products.map(product => (
|
||||
<ProductView
|
||||
onProductEdit={onProductEdit}
|
||||
onKitAdd={onKitAdd}
|
||||
onCopyServices={onCopyServicesClick}
|
||||
key={product.product.id}
|
||||
product={product}
|
||||
onChange={cardProductsState.onChange}
|
||||
onDelete={cardProductsState.onDelete}
|
||||
/>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className={styles["card-container"]}>
|
||||
<ScrollArea offsetScrollbars>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
className={styles["card-container-wrapper"]}>
|
||||
<CardServicesTable
|
||||
onKitAdd={onCardKitAdd}
|
||||
{...cardServicesState}
|
||||
/>
|
||||
|
||||
<Divider my={rem(15)} />
|
||||
<div className={styles["card-container-buttons"]}>
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
variant={"default"}
|
||||
fullWidth
|
||||
onClick={onCreateProductClick}>
|
||||
Создать товар
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={onAddProductClick}
|
||||
variant={"default"}
|
||||
fullWidth>
|
||||
Добавить товар
|
||||
</Button>
|
||||
</div>
|
||||
<Divider my={rem(15)} />
|
||||
<div className={styles["card-container-buttons"]}>
|
||||
{isLocked ? (
|
||||
<Button
|
||||
onClick={onCancelBillClick}
|
||||
color={"red"}>
|
||||
Отозвать счет
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={onCreateBillClick}
|
||||
variant={"default"}
|
||||
fullWidth>
|
||||
Выставить счет
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
className={styles["card-container-wrapper"]}>
|
||||
<Title order={3}>
|
||||
Общая стоимость всех услуг:{" "}
|
||||
{getTotalPrice().toLocaleString("ru")}₽
|
||||
</Title>
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductAndServiceTab;
|
||||
@@ -1,251 +0,0 @@
|
||||
import { CRUDTableProps } from "../../../../../../types/CRUDTable.tsx";
|
||||
import { CardServiceSchema, 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";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../../../redux/store.ts";
|
||||
import useCardProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
|
||||
import LockCheckbox from "../../../../../../components/LockCheckbox/LockCheckbox.tsx";
|
||||
import { useDebouncedCallback } from "@mantine/hooks";
|
||||
|
||||
type RestProps = {
|
||||
onKitAdd?: (kit: GetServiceKitSchema) => void;
|
||||
};
|
||||
type Props = CRUDTableProps<CardServiceSchema> & RestProps;
|
||||
const CardServicesTable: FC<Props> = ({
|
||||
items,
|
||||
onDelete,
|
||||
onCreate,
|
||||
onChange,
|
||||
onKitAdd,
|
||||
}) => {
|
||||
const debouncedOnChange = useDebouncedCallback(async (item: CardServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
onChange(item);
|
||||
}, 200);
|
||||
const authState = useSelector((state: RootState) => state.auth);
|
||||
|
||||
const { cardState } = useCardProductAndServiceTabState();
|
||||
const isLocked = Boolean(cardState.card?.billRequest);
|
||||
|
||||
const [currentService, setCurrentService] = useState<
|
||||
CardServiceSchema | undefined
|
||||
>();
|
||||
const [employeesModalVisible, setEmployeesModalVisible] = useState(false);
|
||||
|
||||
const onDeleteClick = (item: CardServiceSchema) => {
|
||||
if (!onDelete) return;
|
||||
onDelete(item);
|
||||
};
|
||||
const onCreateClick = () => {
|
||||
if (!onCreate) return;
|
||||
const serviceIds = items.map(service => service.service.id);
|
||||
modals.openContextModal({
|
||||
modal: "addCardService",
|
||||
innerProps: {
|
||||
onCreate: onCreate,
|
||||
serviceIds,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
const onQuantityChange = (item: CardServiceSchema, quantity: number) => {
|
||||
if (!onChange) return;
|
||||
debouncedOnChange({
|
||||
...item,
|
||||
quantity,
|
||||
});
|
||||
};
|
||||
const onPriceChange = (item: CardServiceSchema, price: number) => {
|
||||
if (!onChange) return;
|
||||
debouncedOnChange({
|
||||
...item,
|
||||
price,
|
||||
isFixedPrice: true,
|
||||
});
|
||||
};
|
||||
const onLockChange = (item: CardServiceSchema, isLocked: boolean) => {
|
||||
if (!onChange) return;
|
||||
debouncedOnChange({
|
||||
...item,
|
||||
isFixedPrice: isLocked,
|
||||
});
|
||||
};
|
||||
const onEmployeeClick = (item: CardServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
setCurrentService(item);
|
||||
setEmployeesModalVisible(true);
|
||||
};
|
||||
const onEmployeeModalClose = () => {
|
||||
setEmployeesModalVisible(false);
|
||||
setCurrentService(undefined);
|
||||
};
|
||||
const getCurrentEmployees = (): UserSchema[] => {
|
||||
if (!currentService) return [];
|
||||
const item = items.find(
|
||||
i => i.service.id === currentService.service.id,
|
||||
);
|
||||
if (!item) return [];
|
||||
return item.employees;
|
||||
};
|
||||
const onEmployeesChange = (items: UserSchema[]) => {
|
||||
if (!currentService || !onChange) return;
|
||||
debouncedOnChange({
|
||||
...currentService,
|
||||
employees: items,
|
||||
});
|
||||
};
|
||||
const onAddKitClick = () => {
|
||||
if (!onKitAdd) return;
|
||||
modals.openContextModal({
|
||||
modal: "servicesKitSelectModal",
|
||||
innerProps: {
|
||||
onSelect: onKitAdd,
|
||||
serviceType: ServiceType.DEAL_SERVICE,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}
|
||||
h={"100%"}>
|
||||
<Flex
|
||||
h={"100%"}
|
||||
direction={"column"}>
|
||||
<Title
|
||||
order={3}
|
||||
w={"100%"}
|
||||
style={{ textAlign: "center" }}
|
||||
mb={rem(10)}>
|
||||
Общие услуги
|
||||
</Title>
|
||||
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}>
|
||||
{items.map(service => (
|
||||
<Flex
|
||||
key={service.service.id}
|
||||
w={"100%"}
|
||||
gap={rem(10)}
|
||||
align={"center"}>
|
||||
<Tooltip
|
||||
onClick={() => onDeleteClick(service)}
|
||||
label="Удалить услугу">
|
||||
<ActionIcon
|
||||
disabled={isLocked}
|
||||
variant={"default"}>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
{!authState.isGuest && (
|
||||
<Tooltip label="Сотрудники">
|
||||
<ActionIcon
|
||||
onClick={() =>
|
||||
onEmployeeClick(service)
|
||||
}
|
||||
variant={"default"}>
|
||||
<IconUsersGroup />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Text flex={1}>{service.service.name}</Text>
|
||||
<NumberInput
|
||||
disabled={isLocked}
|
||||
flex={1}
|
||||
suffix={" шт."}
|
||||
onChange={event =>
|
||||
isNumber(event) &&
|
||||
onQuantityChange(service, event)
|
||||
}
|
||||
|
||||
value={service.quantity}
|
||||
|
||||
/>
|
||||
<NumberInput
|
||||
flex={1}
|
||||
onChange={event =>
|
||||
isNumber(event) &&
|
||||
onPriceChange(service, event)
|
||||
}
|
||||
suffix={"₽"}
|
||||
value={service.price}
|
||||
disabled={authState.isGuest || isLocked || service.isFixedPrice}
|
||||
rightSectionProps={{
|
||||
style: {
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
pointerEvents: "auto",
|
||||
},
|
||||
}}
|
||||
rightSection={
|
||||
<LockCheckbox
|
||||
label={"Зафиксировать цену"}
|
||||
variant={"default"}
|
||||
value={service.isFixedPrice}
|
||||
onChange={value => onLockChange(service, value)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
<Title
|
||||
style={{ textAlign: "end" }}
|
||||
mt={rem(10)}
|
||||
order={3}>
|
||||
Итог:{" "}
|
||||
{items.reduce(
|
||||
(acc, item) => acc + item.price * item.quantity,
|
||||
0,
|
||||
)}
|
||||
₽
|
||||
</Title>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}
|
||||
mt={"auto"}>
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={onCreateClick}
|
||||
fullWidth
|
||||
variant={"default"}>
|
||||
Добавить услугу
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={onAddKitClick}
|
||||
fullWidth
|
||||
variant={"default"}>
|
||||
Добавить набор услуг
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Modal
|
||||
title={"Добавление сотрудника к услуге"}
|
||||
opened={employeesModalVisible}
|
||||
onClose={onEmployeeModalClose}
|
||||
size={"xl"}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}>
|
||||
<SimpleUsersTable
|
||||
items={getCurrentEmployees()}
|
||||
onChange={onEmployeesChange}
|
||||
/>
|
||||
</Flex>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default CardServicesTable;
|
||||
@@ -1,192 +0,0 @@
|
||||
import { CRUDTableProps } from "../../../../../../types/CRUDTable.tsx";
|
||||
import { CardProductServiceSchema, UserSchema } from "../../../../../../client";
|
||||
import { FC, useState } from "react";
|
||||
import useProductServicesTableColumns from "./columns.tsx";
|
||||
import { BaseTable } from "../../../../../../components/BaseTable/BaseTable.tsx";
|
||||
import { MRT_TableOptions } from "mantine-react-table";
|
||||
import { ActionIcon, Button, Flex, Modal, rem, Tooltip } from "@mantine/core";
|
||||
import { IconEdit, IconTrash, IconUsersGroup } from "@tabler/icons-react";
|
||||
import { modals } from "@mantine/modals";
|
||||
import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUsersTable.tsx";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../../../redux/store.ts";
|
||||
import useCardProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
|
||||
|
||||
type RestProps = {
|
||||
quantity: number;
|
||||
onCopyServices?: () => void;
|
||||
onKitAdd?: () => void;
|
||||
};
|
||||
|
||||
type Props = CRUDTableProps<CardProductServiceSchema> & RestProps;
|
||||
const ProductServicesTable: FC<Props> = ({
|
||||
items,
|
||||
quantity,
|
||||
onCreate,
|
||||
onDelete,
|
||||
onChange,
|
||||
onCopyServices,
|
||||
onKitAdd,
|
||||
}) => {
|
||||
const { cardState } = useCardProductAndServiceTabState();
|
||||
const isLocked = Boolean(cardState.card?.billRequest);
|
||||
const authState = useSelector((state: RootState) => state.auth);
|
||||
|
||||
const columns = useProductServicesTableColumns({ data: items, quantity });
|
||||
const serviceIds = items.map(service => service.service.id);
|
||||
|
||||
const [currentService, setCurrentService] = useState<
|
||||
CardProductServiceSchema | undefined
|
||||
>();
|
||||
const [employeesModalVisible, setEmployeesModalVisible] = useState(false);
|
||||
|
||||
const onCreateClick = () => {
|
||||
if (!onCreate) return;
|
||||
modals.openContextModal({
|
||||
modal: "productServiceForm",
|
||||
innerProps: {
|
||||
onCreate: onCreate,
|
||||
serviceIds,
|
||||
quantity,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
|
||||
const onChangeClick = (item: CardProductServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
modals.openContextModal({
|
||||
modal: "productServiceForm",
|
||||
innerProps: {
|
||||
element: item,
|
||||
onChange,
|
||||
serviceIds,
|
||||
quantity,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
const onEmployeeClick = (item: CardProductServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
setCurrentService(item);
|
||||
setEmployeesModalVisible(true);
|
||||
};
|
||||
const onEmployeeModalClose = () => {
|
||||
setEmployeesModalVisible(false);
|
||||
setCurrentService(undefined);
|
||||
};
|
||||
const getCurrentEmployees = (): UserSchema[] => {
|
||||
if (!currentService) return [];
|
||||
const item = items.find(
|
||||
i => i.service.id === currentService.service.id
|
||||
);
|
||||
if (!item) return [];
|
||||
return item.employees;
|
||||
};
|
||||
const onEmployeesChange = (items: UserSchema[]) => {
|
||||
if (!currentService || !onChange) return;
|
||||
onChange({
|
||||
...currentService,
|
||||
employees: items,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}>
|
||||
<BaseTable
|
||||
data={items}
|
||||
columns={columns}
|
||||
restProps={
|
||||
{
|
||||
enableColumnActions: false,
|
||||
enableSorting: false,
|
||||
enableRowActions: true,
|
||||
enableBottomToolbar: true,
|
||||
renderBottomToolbar: (
|
||||
<Flex
|
||||
justify={"flex-end"}
|
||||
gap={rem(10)}
|
||||
p={rem(10)}>
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={() => onKitAdd && onKitAdd()}
|
||||
variant={"default"}>
|
||||
Добавить набор услуг
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={() =>
|
||||
onCopyServices && onCopyServices()
|
||||
}
|
||||
variant={"default"}>
|
||||
Продублировать услуги
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
disabled={isLocked}
|
||||
onClick={onCreateClick}
|
||||
variant={"default"}>
|
||||
Добавить услугу
|
||||
</Button>
|
||||
</Flex>
|
||||
),
|
||||
renderRowActions: ({ row }) => (
|
||||
<Flex gap="md">
|
||||
<Tooltip label="Удалить">
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
if (onDelete)
|
||||
onDelete(row.original);
|
||||
}}
|
||||
variant={"default"}>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Редактировать">
|
||||
<ActionIcon
|
||||
onClick={() =>
|
||||
onChangeClick(row.original)
|
||||
}
|
||||
variant={"default"}>
|
||||
<IconEdit />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
{!authState.isGuest && (
|
||||
<Tooltip label="Сотрудники">
|
||||
<ActionIcon
|
||||
onClick={() =>
|
||||
onEmployeeClick(
|
||||
row.original
|
||||
)
|
||||
}
|
||||
variant={"default"}>
|
||||
<IconUsersGroup />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Flex>
|
||||
),
|
||||
} as MRT_TableOptions<CardProductServiceSchema>
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
title={"Добавление сотрудника к услуге"}
|
||||
opened={employeesModalVisible}
|
||||
onClose={onEmployeeModalClose}
|
||||
size={"xl"}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}>
|
||||
<SimpleUsersTable
|
||||
items={getCurrentEmployees()}
|
||||
onChange={onEmployeesChange}
|
||||
/>
|
||||
</Flex>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductServicesTable;
|
||||
@@ -1,42 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { MRT_ColumnDef } from "mantine-react-table";
|
||||
import { CardProductServiceSchema } from "../../../../../../client";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../../../redux/store.ts";
|
||||
|
||||
type Props = {
|
||||
data: CardProductServiceSchema[];
|
||||
quantity: number;
|
||||
};
|
||||
const useProductServicesTableColumns = (props: Props) => {
|
||||
const { data, quantity } = props;
|
||||
const authState = useSelector((state: RootState) => state.auth);
|
||||
const totalPrice = useMemo(
|
||||
() => data.reduce((acc, row) => acc + row.price * quantity, 0),
|
||||
[data, quantity]
|
||||
);
|
||||
|
||||
const hideGuestColumns = ["service.cost"];
|
||||
return useMemo<MRT_ColumnDef<CardProductServiceSchema>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "service.name",
|
||||
header: "Услуга",
|
||||
},
|
||||
{
|
||||
accessorKey: "price",
|
||||
header: "Цена",
|
||||
Footer: () => <>Итог: {totalPrice.toLocaleString("ru")}₽</>,
|
||||
},
|
||||
],
|
||||
[totalPrice]
|
||||
).filter(
|
||||
columnDef =>
|
||||
!(
|
||||
hideGuestColumns.includes(columnDef.accessorKey || "") &&
|
||||
authState.isGuest
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default useProductServicesTableColumns;
|
||||
@@ -1,36 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
border: dashed var(--item-border-size) var(--mantine-color-default-border);
|
||||
border-radius: var(--item-border-radius);
|
||||
gap: rem(20);
|
||||
padding: rem(10);
|
||||
margin-bottom: rem(10);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
max-height: rem(250);
|
||||
max-width: rem(250);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.services-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(10);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
max-width: rem(250);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(10);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.attributes-container {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import {
|
||||
CardProductSchema,
|
||||
CardProductServiceSchema,
|
||||
GetServiceKitSchema,
|
||||
ProductSchema,
|
||||
} from "../../../../../../client";
|
||||
import styles from "./ProductView.module.css";
|
||||
import { ActionIcon, Box, Flex, Image, NumberInput, rem, Text, Textarea, Title, Tooltip } from "@mantine/core";
|
||||
import ProductServicesTable from "../ProductServicesTable/ProductServicesTable.tsx";
|
||||
import { isNil, isNumber } from "lodash";
|
||||
import { IconBarcode, IconEdit, IconTrash } from "@tabler/icons-react";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { ServiceType } from "../../../../../../shared/enums/ServiceType.ts";
|
||||
import useCardProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
|
||||
import { useDebouncedCallback } from "@mantine/hooks";
|
||||
|
||||
type Props = {
|
||||
product: CardProductSchema;
|
||||
onChange?: (item: CardProductSchema) => void;
|
||||
onDelete?: (item: CardProductSchema) => void;
|
||||
onCopyServices?: (item: CardProductSchema) => void;
|
||||
onKitAdd?: (item: CardProductSchema, kit: GetServiceKitSchema) => void;
|
||||
onProductEdit: (product: ProductSchema) => void;
|
||||
};
|
||||
type ProductFieldNames = {
|
||||
[K in keyof ProductSchema]: string;
|
||||
};
|
||||
export const ProductFieldNames: Partial<ProductFieldNames> = {
|
||||
color: "Цвет",
|
||||
article: "Артикул",
|
||||
size: "Размер",
|
||||
brand: "Бренд",
|
||||
composition: "Состав",
|
||||
additionalInfo: "Доп. информация",
|
||||
};
|
||||
const ProductView: FC<Props> = ({
|
||||
product,
|
||||
onDelete,
|
||||
onChange,
|
||||
onCopyServices,
|
||||
onKitAdd,
|
||||
onProductEdit,
|
||||
}) => {
|
||||
const { cardState } = useCardProductAndServiceTabState();
|
||||
const debouncedOnChange = useDebouncedCallback(async (item: CardProductSchema) => {
|
||||
if (!onChange) return;
|
||||
onChange(item);
|
||||
}, 200);
|
||||
const isLocked = Boolean(cardState.card?.billRequest);
|
||||
const onDeleteClick = () => {
|
||||
if (!onDelete) return;
|
||||
onDelete(product);
|
||||
};
|
||||
|
||||
const onServiceDelete = (item: CardProductServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
onChange({
|
||||
...product,
|
||||
services: product.services.filter(
|
||||
service => service.service.id !== item.service.id,
|
||||
),
|
||||
});
|
||||
};
|
||||
const onServiceCreate = (item: CardProductServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
onChange({
|
||||
...product,
|
||||
services: [...product.services, item],
|
||||
});
|
||||
};
|
||||
|
||||
const onServiceChange = (item: CardProductServiceSchema) => {
|
||||
if (!onChange) return;
|
||||
onChange({
|
||||
...product,
|
||||
services: product.services.map(service =>
|
||||
service.service.id === item.service.id ? item : service,
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
const onQuantityChange = (quantity: number) => {
|
||||
if (!onChange) return;
|
||||
debouncedOnChange({
|
||||
...product,
|
||||
quantity,
|
||||
});
|
||||
};
|
||||
const onPrintBarcodeClick = () => {
|
||||
modals.openContextModal({
|
||||
modal: "printBarcode",
|
||||
innerProps: {
|
||||
productId: product.product.id,
|
||||
defaultQuantity: product.quantity,
|
||||
},
|
||||
title: "Печать штрихкода",
|
||||
});
|
||||
};
|
||||
|
||||
const onKitAddClick = () => {
|
||||
if (!onKitAdd) return;
|
||||
modals.openContextModal({
|
||||
modal: "servicesKitSelectModal",
|
||||
innerProps: {
|
||||
onSelect: kit => onKitAdd(product, kit),
|
||||
serviceType: ServiceType.PRODUCT_SERVICE,
|
||||
},
|
||||
withCloseButton: false,
|
||||
});
|
||||
};
|
||||
|
||||
const onProductEditClick = () => {
|
||||
modals.openContextModal({
|
||||
modal: "createProduct",
|
||||
title: "Редактирование товара",
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
onChange: newProduct => onProductEdit(newProduct),
|
||||
product: product.product,
|
||||
},
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className={styles["container"]}>
|
||||
<div className={styles["data-container"]}>
|
||||
<div className={styles["image-container"]}>
|
||||
<Image
|
||||
flex={1}
|
||||
radius={rem(10)}
|
||||
fit={"cover"}
|
||||
src={product.product.imageUrl}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["attributes-container"]}>
|
||||
<Title order={3}>{product.product.name}</Title>
|
||||
{/*<Spoiler maxHeight={0} showLabel={"Показать характеристики"} hideLabel={"Скрыть"}>*/}
|
||||
|
||||
{Object.entries(product.product).map(([key, value]) => {
|
||||
const fieldName =
|
||||
ProductFieldNames[key as keyof ProductSchema];
|
||||
if (!fieldName || isNil(value) || value === "") return;
|
||||
return (
|
||||
<Text key={fieldName}>
|
||||
{fieldName}: {value.toString()}{" "}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
<Text>
|
||||
Штрихкоды: {product.product.barcodes.join(", ")}
|
||||
</Text>
|
||||
{/*</Spoiler>*/}
|
||||
</div>
|
||||
<Box />
|
||||
<NumberInput
|
||||
mt={rem(10)}
|
||||
disabled={isLocked}
|
||||
suffix={" шт."}
|
||||
value={product.quantity}
|
||||
onChange={event =>
|
||||
isNumber(event) && onQuantityChange(event)
|
||||
}
|
||||
placeholder={"Введите количество товара"}
|
||||
/>
|
||||
<Textarea
|
||||
mih={rem(140)}
|
||||
styles={{
|
||||
wrapper: { height: "90%" },
|
||||
input: { height: "90%" },
|
||||
}}
|
||||
my={rem(10)}
|
||||
disabled={isLocked}
|
||||
defaultValue={product.comment}
|
||||
onChange={event => {
|
||||
if (!onChange) return;
|
||||
debouncedOnChange({
|
||||
...product,
|
||||
comment: event.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
placeholder={"Введите комментарий для товара"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles["services-container"]}>
|
||||
<ProductServicesTable
|
||||
onKitAdd={onKitAddClick}
|
||||
onCopyServices={() =>
|
||||
onCopyServices && onCopyServices(product)
|
||||
}
|
||||
items={product.services}
|
||||
quantity={product.quantity}
|
||||
onCreate={onServiceCreate}
|
||||
onDelete={onServiceDelete}
|
||||
onChange={onServiceChange}
|
||||
/>
|
||||
<Flex
|
||||
mt={"auto"}
|
||||
ml={"auto"}
|
||||
gap={rem(10)}>
|
||||
<Tooltip
|
||||
onClick={onPrintBarcodeClick}
|
||||
label="Печать штрихкода">
|
||||
<ActionIcon variant={"default"}>
|
||||
<IconBarcode />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
onClick={onProductEditClick}
|
||||
label="Редактировать товар">
|
||||
<ActionIcon variant={"default"}>
|
||||
<IconEdit />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
onClick={onDeleteClick}
|
||||
label="Удалить товар">
|
||||
<ActionIcon
|
||||
disabled={isLocked}
|
||||
variant={"default"}>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductView;
|
||||
@@ -1,148 +0,0 @@
|
||||
import { CRUDTableProps } from "../../../../../types/CRUDTable.tsx";
|
||||
import { CardService, CardServiceSchema, CardProductSchema } from "../../../../../client";
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
|
||||
const useCardState = () => {
|
||||
|
||||
const { selectedCard, setSelectedCard } = useCardPageContext();
|
||||
const recalculate = async () => {
|
||||
return CardService.recalculateCardPrice({
|
||||
requestBody: {
|
||||
cardId: selectedCard?.id || -1,
|
||||
},
|
||||
});
|
||||
};
|
||||
const refetchCard = async () => {
|
||||
if (!selectedCard) return;
|
||||
|
||||
return CardService.getCardById({ cardId: selectedCard.id }).then(
|
||||
async card => {
|
||||
setSelectedCard(card);
|
||||
},
|
||||
);
|
||||
};
|
||||
const refetch = async () => {
|
||||
if (!selectedCard) return;
|
||||
await refetchCard();
|
||||
const { ok, message } = await recalculate();
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
|
||||
await refetchCard();
|
||||
};
|
||||
return {
|
||||
card: selectedCard,
|
||||
refetch,
|
||||
};
|
||||
};
|
||||
|
||||
const useCardServicesState = (): CRUDTableProps<CardServiceSchema> => {
|
||||
const { card, refetch } = useCardState();
|
||||
const refetchAndRecalculate = async () => {
|
||||
await refetch();
|
||||
};
|
||||
const onCreate = (item: CardServiceSchema) => {
|
||||
if (!card) return;
|
||||
CardService.addCardService({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
serviceId: item.service.id,
|
||||
quantity: item.quantity,
|
||||
price: item.price,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
if (ok) await refetchAndRecalculate();
|
||||
});
|
||||
};
|
||||
const onDelete = (item: CardServiceSchema) => {
|
||||
if (!card) return;
|
||||
CardService.deleteCardService({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
serviceId: item.service.id,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
if (ok) await refetchAndRecalculate();
|
||||
});
|
||||
};
|
||||
const onChange = (item: CardServiceSchema) => {
|
||||
if (!card) return;
|
||||
CardService.updateCardService({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
service: item,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
if (ok) await refetchAndRecalculate();
|
||||
});
|
||||
};
|
||||
return {
|
||||
items: card?.services || [],
|
||||
onCreate,
|
||||
onDelete,
|
||||
onChange,
|
||||
};
|
||||
};
|
||||
|
||||
const useDealProductsState = (): CRUDTableProps<CardProductSchema> => {
|
||||
const { card, refetch } = useCardState();
|
||||
const refetchAndRecalculate = async () => {
|
||||
await refetch();
|
||||
};
|
||||
const onCreate = (item: CardProductSchema) => {
|
||||
if (!card) return;
|
||||
CardService.addCardProduct({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
product: item,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
if (ok) await refetchAndRecalculate();
|
||||
});
|
||||
};
|
||||
const onDelete = (item: CardProductSchema) => {
|
||||
if (!card) return;
|
||||
CardService.deleteCardProduct({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
productId: item.product.id,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
if (ok) await refetchAndRecalculate();
|
||||
});
|
||||
};
|
||||
const onChange = (item: CardProductSchema) => {
|
||||
if (!card) return;
|
||||
CardService.updateCardProduct({
|
||||
requestBody: {
|
||||
cardId: card.id,
|
||||
product: item,
|
||||
},
|
||||
}).then(async ({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
if (ok) await refetchAndRecalculate();
|
||||
});
|
||||
};
|
||||
return {
|
||||
items: card?.products || [],
|
||||
onCreate,
|
||||
onDelete,
|
||||
onChange,
|
||||
};
|
||||
};
|
||||
const useCardProductAndServiceTabState = () => {
|
||||
const cardState = useCardState();
|
||||
const cardProductsState = useDealProductsState();
|
||||
const cardServicesState = useCardServicesState();
|
||||
return {
|
||||
cardState,
|
||||
cardProductsState,
|
||||
cardServicesState,
|
||||
};
|
||||
};
|
||||
export default useCardProductAndServiceTabState;
|
||||
@@ -1,18 +0,0 @@
|
||||
.icon {
|
||||
width: rem(13px);
|
||||
height: auto;
|
||||
vertical-align: rem(-1px);
|
||||
margin-right: rem(8px);
|
||||
}
|
||||
|
||||
.expandIcon {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.expandIconRotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.productsTableBorder {
|
||||
border-bottom: solid 1px var(--mantine-color-dark-5);
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import ShippingTree from "./components/ShippingTree.tsx";
|
||||
import { Group, ScrollArea, Stack } from "@mantine/core";
|
||||
import useShipping from "./hooks/useShipping.tsx";
|
||||
import useShippingQrs from "./hooks/useShippingQrs.tsx";
|
||||
import { IconPrinter, IconQrcode } from "@tabler/icons-react";
|
||||
import InlineButton from "../../../../components/InlineButton/InlineButton.tsx";
|
||||
|
||||
|
||||
const ShippingTab = () => {
|
||||
const {
|
||||
onCreateBoxInCardClick,
|
||||
onCreatePalletClick,
|
||||
} = useShipping();
|
||||
|
||||
const {
|
||||
onGetDealQrPdfClick,
|
||||
onGetPalletsPdfClick,
|
||||
onGetBoxesPdfClick,
|
||||
} = useShippingQrs();
|
||||
|
||||
return (
|
||||
<Stack h={"94vh"}>
|
||||
<Group>
|
||||
<InlineButton onClick={() => onCreatePalletClick()}>
|
||||
Добавить паллет
|
||||
</InlineButton>
|
||||
<InlineButton onClick={() => onCreateBoxInCardClick()}>
|
||||
Добавить короб
|
||||
</InlineButton>
|
||||
<InlineButton onClick={() => onGetDealQrPdfClick()}>
|
||||
<IconQrcode />
|
||||
Сделка
|
||||
</InlineButton>
|
||||
<InlineButton onClick={() => onGetPalletsPdfClick()}>
|
||||
<IconPrinter />
|
||||
Паллеты
|
||||
</InlineButton>
|
||||
<InlineButton onClick={() => onGetBoxesPdfClick()}>
|
||||
<IconPrinter />
|
||||
Короба
|
||||
</InlineButton>
|
||||
</Group>
|
||||
<ScrollArea>
|
||||
<ShippingTree />
|
||||
</ScrollArea>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShippingTab;
|
||||
@@ -1,127 +0,0 @@
|
||||
import { BoxSchema, ShippingService } from "../../../../../client";
|
||||
import { IconBox, IconChevronRight, IconPlus, IconTrash } from "@tabler/icons-react";
|
||||
import useUpdateCard from "../hooks/useUpdateCard.tsx";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { DataTable } from "mantine-datatable";
|
||||
import clsx from "clsx";
|
||||
import classes from "../ShippingTab.module.css";
|
||||
import "mantine-datatable/styles.css";
|
||||
import { useState } from "react";
|
||||
import ShippingProductsTable from "./ShippingProductsTable.tsx";
|
||||
import { Group, rem, Text } from "@mantine/core";
|
||||
import { ShippingProductParentData } from "../types/ShippingProductData.tsx";
|
||||
import { modals } from "@mantine/modals";
|
||||
import InlineShippingButton from "./InlineShippingButton.tsx";
|
||||
|
||||
|
||||
type Props = {
|
||||
items: BoxSchema[];
|
||||
onCreateShippingProduct: (values: ShippingProductParentData) => void;
|
||||
}
|
||||
|
||||
const BoxesTable = ({ items, onCreateShippingProduct }: Props) => {
|
||||
const { update } = useUpdateCard();
|
||||
const [boxIds, setBoxIds] = useState<number[]>([]);
|
||||
|
||||
const onDeleteBox = (boxId: number) => {
|
||||
ShippingService.deleteBox({
|
||||
boxId,
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (ok) update();
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
};
|
||||
|
||||
const onDeleteBoxClick = (box: BoxSchema) => {
|
||||
if (box.shippingProducts.length === 0) {
|
||||
onDeleteBox(box.id);
|
||||
return;
|
||||
}
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: "Удаление короба",
|
||||
children: <Text size="sm">Вы уверены что хотите удалить короб?</Text>,
|
||||
labels: { confirm: "Да", cancel: "Нет" },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => onDeleteBox(box.id),
|
||||
});
|
||||
};
|
||||
|
||||
const getBoxContent = (box: BoxSchema) => {
|
||||
if (box.shippingProducts.length === 0) {
|
||||
return (
|
||||
<Text>Пустой</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ShippingProductsTable items={box.shippingProducts} />
|
||||
);
|
||||
};
|
||||
|
||||
const getBoxActions = (box: BoxSchema) => {
|
||||
return (
|
||||
<Group wrap={"nowrap"} gap={rem(10)}>
|
||||
<InlineShippingButton onClick={() => onCreateShippingProduct({ boxId: box.id })}>
|
||||
<IconPlus />
|
||||
Товар
|
||||
</InlineShippingButton>
|
||||
<InlineShippingButton onClick={() => onDeleteBoxClick(box)}>
|
||||
<IconTrash />
|
||||
</InlineShippingButton>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
const isBoxExpandable = (box: BoxSchema) => {
|
||||
const isExpandable = box.shippingProducts.length > 0;
|
||||
if (!isExpandable && boxIds.includes(box.id)) {
|
||||
setBoxIds(boxIds.filter(boxId => boxId !== box.id));
|
||||
}
|
||||
return isExpandable;
|
||||
};
|
||||
|
||||
return (
|
||||
<DataTable
|
||||
noHeader
|
||||
withTableBorder
|
||||
columns={[
|
||||
{
|
||||
accessor: "id",
|
||||
title: "Короб",
|
||||
noWrap: true,
|
||||
render: (box) => (
|
||||
<>
|
||||
{isBoxExpandable(box) && (
|
||||
<IconChevronRight
|
||||
className={clsx(classes.icon, classes.expandIcon, {
|
||||
[classes.expandIconRotated]: boxIds?.includes(box.id),
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
<IconBox className={classes.icon} />
|
||||
<span>Короб К{box.id}</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "actions",
|
||||
title: "",
|
||||
width: "0%",
|
||||
render: getBoxActions,
|
||||
},
|
||||
]}
|
||||
records={items?.sort((a, b) => a.id - b.id)}
|
||||
rowExpansion={{
|
||||
allowMultiple: true,
|
||||
expanded: { recordIds: boxIds, onRecordIdsChange: setBoxIds },
|
||||
expandable: ({ record }) => isBoxExpandable(record),
|
||||
content: ({ record }) => getBoxContent(record),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoxesTable;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { Button, ButtonProps, Group } from "@mantine/core";
|
||||
|
||||
interface Props extends ButtonProps {
|
||||
children?: ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const InlineShippingButton = ({ children, onClick, ...props }: Props) => {
|
||||
return (
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
onClick && onClick();
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Group gap="sm" wrap={"nowrap"}>
|
||||
{children}
|
||||
</Group>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default InlineShippingButton;
|
||||
@@ -1,40 +0,0 @@
|
||||
import { ProductSchema } from "../../../../../client";
|
||||
import { FC, useState } from "react";
|
||||
import ObjectSelect, { ObjectSelectProps } from "../../../../../components/ObjectSelect/ObjectSelect.tsx";
|
||||
import getRenderOptions from "../../../../../components/ProductSelect/utils/getRenderOptions.tsx";
|
||||
|
||||
|
||||
type Props = Omit<ObjectSelectProps<ProductSchema>, "searchValue" | "onSearchChange">;
|
||||
|
||||
const ShippingProductSelect: FC<Props> = (props: Props) => {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const getFilteredData = () => {
|
||||
const searchValue: string = search.toLowerCase();
|
||||
|
||||
const data: ProductSchema[] = props.data.filter(product => {
|
||||
return (
|
||||
product.name?.toLowerCase().includes(searchValue) ||
|
||||
product.article?.toLowerCase().includes(searchValue) ||
|
||||
product.barcodes && product.barcodes.length > 0 && product.barcodes[0].toLowerCase().includes(searchValue)
|
||||
);
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
return (
|
||||
<ObjectSelect
|
||||
label={"Товар"}
|
||||
placeholder={"Выберите товар"}
|
||||
searchable
|
||||
{...props}
|
||||
data={getFilteredData()}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
renderOption={getRenderOptions(props.data)}
|
||||
filter={({ options }) => options}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShippingProductSelect;
|
||||
@@ -1,30 +0,0 @@
|
||||
import useShippingTableColumns from "../hooks/shippingTableColumns.tsx";
|
||||
import { ShippingProductSchema } from "../../../../../client";
|
||||
import { Box } from "@mantine/core";
|
||||
import { DataTable } from "mantine-datatable";
|
||||
import clsx from "clsx";
|
||||
import "mantine-datatable/styles.css";
|
||||
import classes from "../ShippingTab.module.css";
|
||||
|
||||
|
||||
type Props = {
|
||||
items: ShippingProductSchema[];
|
||||
}
|
||||
|
||||
const ShippingProductsTable = ({ items }: Props) => {
|
||||
const columns = useShippingTableColumns();
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<DataTable
|
||||
withTableBorder
|
||||
withColumnBorders
|
||||
columns={columns}
|
||||
records={items}
|
||||
className={clsx(classes.productsTableBorder)}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShippingProductsTable;
|
||||
@@ -1,162 +0,0 @@
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
import { Flex, rem, Stack } from "@mantine/core";
|
||||
import { BoxSchema, PalletSchema, ShippingProductSchema } from "../../../../../client";
|
||||
import ShippingProductsTable from "./ShippingProductsTable.tsx";
|
||||
import BoxesTable from "./BoxesTable.tsx";
|
||||
import { IconChevronRight, IconPlus, IconSpace, IconTrash } from "@tabler/icons-react";
|
||||
import useShipping from "../hooks/useShipping.tsx";
|
||||
import { DataTable } from "mantine-datatable";
|
||||
import clsx from "clsx";
|
||||
import "mantine-datatable/styles.css";
|
||||
import classes from "../ShippingTab.module.css";
|
||||
import InlineShippingButton from "./InlineShippingButton.tsx";
|
||||
|
||||
const ShippingTree = () => {
|
||||
const { selectedCard: card } = useCardPageContext();
|
||||
|
||||
const {
|
||||
onCreateBoxInPallet,
|
||||
onCreateShippingProduct,
|
||||
onDeletePalletClick,
|
||||
palletIds,
|
||||
setPalletIds,
|
||||
} = useShipping();
|
||||
|
||||
const sortById = (data?: PalletSchema[] | BoxSchema[] | ShippingProductSchema[]) => {
|
||||
return data?.sort((a, b) => a.id - b.id);
|
||||
};
|
||||
|
||||
const removePalletButton = (pallet: PalletSchema) => {
|
||||
return (
|
||||
<InlineShippingButton onClick={() => onDeletePalletClick(pallet)}>
|
||||
<IconTrash />
|
||||
</InlineShippingButton>
|
||||
);
|
||||
};
|
||||
|
||||
const createBoxOrShippingProductButton = (palletId: number, isBox: boolean) => {
|
||||
const createButtonLabel = isBox ? "Короб" : "Товар";
|
||||
|
||||
return (
|
||||
<InlineShippingButton
|
||||
onClick={() => {
|
||||
if (isBox) {
|
||||
onCreateBoxInPallet(palletId);
|
||||
} else {
|
||||
onCreateShippingProduct({ palletId });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconPlus />
|
||||
{createButtonLabel}
|
||||
</InlineShippingButton>
|
||||
);
|
||||
};
|
||||
|
||||
const getPalletContent = (pallet: PalletSchema) => {
|
||||
const isBox = pallet.boxes.length > 0;
|
||||
|
||||
const boxes = sortById(pallet.boxes) as BoxSchema[];
|
||||
const shippingProducts = sortById(pallet.shippingProducts) as ShippingProductSchema[];
|
||||
|
||||
if (isBox) {
|
||||
return (
|
||||
<BoxesTable items={boxes} onCreateShippingProduct={onCreateShippingProduct} />
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ShippingProductsTable items={shippingProducts} />
|
||||
);
|
||||
};
|
||||
|
||||
const getPalletActions = (pallet: PalletSchema) => {
|
||||
const isEmpty = pallet.boxes.length === 0 && pallet.shippingProducts.length === 0;
|
||||
const isBox = pallet.boxes.length > 0;
|
||||
|
||||
let palletButtons;
|
||||
if (isEmpty) {
|
||||
palletButtons = [
|
||||
createBoxOrShippingProductButton(pallet.id, true),
|
||||
createBoxOrShippingProductButton(pallet.id, false),
|
||||
];
|
||||
} else {
|
||||
palletButtons = [
|
||||
createBoxOrShippingProductButton(pallet.id, isBox),
|
||||
];
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
gap={rem(10)}
|
||||
wrap={"nowrap"}
|
||||
direction={"row-reverse"}
|
||||
>
|
||||
{removePalletButton(pallet)}
|
||||
{...palletButtons}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const isPalletExpandable = (pallet: PalletSchema) => {
|
||||
const isExpandable = pallet.boxes.length !== 0 || pallet.shippingProducts.length !== 0;
|
||||
if (!isExpandable && palletIds.includes(pallet.id)) {
|
||||
setPalletIds(palletIds.filter(palletId => palletId !== pallet.id));
|
||||
}
|
||||
return isExpandable;
|
||||
};
|
||||
|
||||
if (card?.boxes?.length === 0 && card?.pallets?.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap={0}>
|
||||
{card?.boxes && (
|
||||
<BoxesTable items={card?.boxes} onCreateShippingProduct={onCreateShippingProduct} />
|
||||
)}
|
||||
<DataTable
|
||||
noHeader
|
||||
withTableBorder
|
||||
columns={[
|
||||
{
|
||||
accessor: "id",
|
||||
title: "Паллет",
|
||||
noWrap: true,
|
||||
render: (pallet) => {
|
||||
const isExpandable = isPalletExpandable(pallet);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isExpandable && (
|
||||
<IconChevronRight
|
||||
className={clsx(classes.icon, classes.expandIcon, {
|
||||
[classes.expandIconRotated]: palletIds?.includes(pallet.id),
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
<IconSpace className={classes.icon} />
|
||||
<span>Паллет П{pallet.id}</span>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessor: "actions",
|
||||
title: "",
|
||||
width: "0%",
|
||||
render: getPalletActions,
|
||||
},
|
||||
]}
|
||||
records={card?.pallets?.sort((a, b) => a.id - b.id)}
|
||||
rowExpansion={{
|
||||
allowMultiple: true,
|
||||
expanded: { recordIds: palletIds, onRecordIdsChange: setPalletIds },
|
||||
expandable: ({ record }) => isPalletExpandable(record),
|
||||
content: ({ record }) => getPalletContent(record),
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShippingTree;
|
||||
@@ -1,89 +0,0 @@
|
||||
import { DataTableColumn } from "mantine-datatable";
|
||||
import { ShippingProductSchema, ShippingService } from "../../../../../client";
|
||||
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
|
||||
import { IconEdit, IconTrash } from "@tabler/icons-react";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { modals } from "@mantine/modals";
|
||||
import useUpdateCard from "./useUpdateCard.tsx";
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
|
||||
const useShippingTableColumns = () => {
|
||||
const { update } = useUpdateCard();
|
||||
const { selectedCard: card } = useCardPageContext();
|
||||
|
||||
const onDeleteClick = (shippingProduct: ShippingProductSchema) => {
|
||||
ShippingService.deleteShippingProduct({
|
||||
shippingProductId: shippingProduct.id,
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
update();
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
};
|
||||
|
||||
const onEditClick = (shippingProduct: ShippingProductSchema) => {
|
||||
if (!card) return;
|
||||
modals.openContextModal({
|
||||
modal: "shippingProductModal",
|
||||
title: "Редактирование товара",
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
card,
|
||||
updateOnSubmit: update,
|
||||
shippingData: {
|
||||
shippingProductId: shippingProduct.id,
|
||||
productId: shippingProduct.product.id,
|
||||
quantity: shippingProduct.quantity,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
title: "Название",
|
||||
accessor: "product.name",
|
||||
render: shippingProduct => shippingProduct.product?.name ?? "-",
|
||||
},
|
||||
{
|
||||
title: "Артикул",
|
||||
accessor: "product.article",
|
||||
render: shippingProduct => shippingProduct.product?.article ?? "-",
|
||||
},
|
||||
{
|
||||
title: "Размер",
|
||||
accessor: "product.size",
|
||||
render: shippingProduct => shippingProduct.product?.size ?? "-",
|
||||
},
|
||||
{
|
||||
title: "Количество",
|
||||
accessor: "quantity",
|
||||
},
|
||||
{
|
||||
accessor: "actions",
|
||||
title: "",
|
||||
width: "0%",
|
||||
render: shippingProduct => (
|
||||
<Flex gap="md">
|
||||
<Tooltip label="Удалить">
|
||||
<ActionIcon
|
||||
onClick={() => onDeleteClick(shippingProduct)}
|
||||
variant={"default"}>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Редактировать">
|
||||
<ActionIcon
|
||||
onClick={() => onEditClick(shippingProduct)}
|
||||
variant={"default"}>
|
||||
<IconEdit />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
] as DataTableColumn<ShippingProductSchema>[];
|
||||
};
|
||||
|
||||
export default useShippingTableColumns;
|
||||
@@ -1,112 +0,0 @@
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
import {
|
||||
CreateBoxInCardSchema,
|
||||
CreateBoxInPalletSchema, PalletSchema,
|
||||
ShippingService,
|
||||
} from "../../../../../client";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { Text } from "@mantine/core";
|
||||
import useUpdateCard from "./useUpdateCard.tsx";
|
||||
import { useState } from "react";
|
||||
import { ShippingProductParentData } from "../types/ShippingProductData.tsx";
|
||||
|
||||
const useShipping = () => {
|
||||
const { selectedCard: card } = useCardPageContext();
|
||||
const { update } = useUpdateCard();
|
||||
const [palletIds, setPalletIds] = useState<number[]>([]);
|
||||
|
||||
const onCreatePalletClick = () => {
|
||||
if (!card) return;
|
||||
|
||||
ShippingService.createPallet({
|
||||
cardId: card.id,
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
update();
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
};
|
||||
|
||||
const onDeletePallet = (palletId: number) => {
|
||||
ShippingService.deletePallet({
|
||||
palletId: palletId,
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
update();
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
};
|
||||
|
||||
const onDeletePalletClick = (pallet: PalletSchema) => {
|
||||
if (!card) return;
|
||||
if (pallet.shippingProducts.length === 0 && pallet.boxes.length === 0) {
|
||||
onDeletePallet(pallet.id);
|
||||
return;
|
||||
}
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: "Удаление паллета",
|
||||
children: <Text size="sm">Вы уверены что хотите удалить паллет?</Text>,
|
||||
labels: { confirm: "Да", cancel: "Нет" },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => onDeletePallet(pallet.id),
|
||||
});
|
||||
};
|
||||
|
||||
const onCreateBox = (data: CreateBoxInPalletSchema | CreateBoxInCardSchema) => {
|
||||
ShippingService.createBox({
|
||||
requestBody: {
|
||||
data,
|
||||
},
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
update();
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
};
|
||||
|
||||
const onCreateBoxInCardClick = () => {
|
||||
onCreateBox({ cardId: card?.id ?? -1 });
|
||||
};
|
||||
|
||||
const onCreateBoxInPallet = (palletId: number) => {
|
||||
onCreateBox({ palletId });
|
||||
};
|
||||
|
||||
const onCreateShippingProduct = ({ palletId, boxId }: ShippingProductParentData) => {
|
||||
if (!card) return;
|
||||
const postfix = palletId ? "на паллет" : "в короб";
|
||||
|
||||
modals.openContextModal({
|
||||
modal: "shippingProductModal",
|
||||
title: "Добавление товара " + postfix,
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
card,
|
||||
updateOnSubmit: update,
|
||||
shippingData: {
|
||||
palletId,
|
||||
boxId,
|
||||
productId: null,
|
||||
quantity: null,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
onCreateBoxInCardClick,
|
||||
onCreateBoxInPallet,
|
||||
onCreateShippingProduct,
|
||||
onCreatePalletClick,
|
||||
onDeletePalletClick,
|
||||
palletIds,
|
||||
setPalletIds,
|
||||
};
|
||||
};
|
||||
|
||||
export default useShipping;
|
||||
@@ -1,35 +0,0 @@
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
|
||||
|
||||
const useShippingQrs = () => {
|
||||
const { selectedCard: card } = useCardPageContext();
|
||||
|
||||
const basePdfUrl = `${import.meta.env.VITE_API_URL}/shipping/pdf`;
|
||||
|
||||
const getPdf = (url: string) => {
|
||||
if (!card) return;
|
||||
const pdfWindow = window.open(url);
|
||||
if (!pdfWindow) return;
|
||||
pdfWindow.print();
|
||||
};
|
||||
|
||||
const onGetDealQrPdfClick = () => {
|
||||
getPdf(`${basePdfUrl}/deal/${card?.id}`);
|
||||
};
|
||||
|
||||
const onGetPalletsPdfClick = () => {
|
||||
getPdf(`${basePdfUrl}/pallets/${card?.id}`);
|
||||
};
|
||||
|
||||
const onGetBoxesPdfClick = () => {
|
||||
getPdf(`${basePdfUrl}/boxes/${card?.id}`);
|
||||
};
|
||||
|
||||
return {
|
||||
onGetDealQrPdfClick,
|
||||
onGetPalletsPdfClick,
|
||||
onGetBoxesPdfClick,
|
||||
};
|
||||
};
|
||||
|
||||
export default useShippingQrs;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
|
||||
import { CardService } from "../../../../../client";
|
||||
|
||||
const useUpdateCard = () => {
|
||||
const { selectedCard, setSelectedCard } = useCardPageContext();
|
||||
|
||||
const update = () => {
|
||||
if (!selectedCard) return;
|
||||
CardService.getCardById({ cardId: selectedCard.id })
|
||||
.then(data => {
|
||||
setSelectedCard(data);
|
||||
});
|
||||
};
|
||||
|
||||
return { update };
|
||||
};
|
||||
|
||||
export default useUpdateCard;
|
||||
@@ -1,131 +0,0 @@
|
||||
import { useForm } from "@mantine/form";
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import { Button, Flex, NumberInput, rem, Text } from "@mantine/core";
|
||||
import getRestProducts from "../utils/getRestProducts.tsx";
|
||||
import {
|
||||
CardProductSchema,
|
||||
CardSchema,
|
||||
CreateShippingProductSchema,
|
||||
ProductSchema,
|
||||
ShippingService,
|
||||
UpdateShippingProductSchema,
|
||||
} from "../../../../../client";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { ShippingData, ShippingModalForm } from "../types/ShippingProductData.tsx";
|
||||
import { useEffect, useState } from "react";
|
||||
import ShippingProductSelect from "../components/ShippingProductSelect.tsx";
|
||||
|
||||
|
||||
type Props = {
|
||||
updateOnSubmit: () => void;
|
||||
card: CardSchema;
|
||||
shippingData: Partial<ShippingData>;
|
||||
}
|
||||
|
||||
const ShippingProductModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps,
|
||||
}: ContextModalProps<Props>) => {
|
||||
const [restProducts, setRestProducts] = useState<Map<number, CardProductSchema>>(new Map());
|
||||
const [restProductsSelectData, setRestProductSelectData] = useState<ProductSchema[]>([]);
|
||||
|
||||
const getRestProductQuantity = () => {
|
||||
if (form.values.product) {
|
||||
const restProduct = restProducts.get(form.values.product.id);
|
||||
if (restProduct) {
|
||||
return restProduct.quantity;
|
||||
}
|
||||
}
|
||||
return 10000;
|
||||
};
|
||||
|
||||
const findProductById = (productId?: number | null) => {
|
||||
const cardProduct = innerProps.card.products.find(p => p.product.id === productId);
|
||||
return cardProduct ? cardProduct.product : null;
|
||||
};
|
||||
|
||||
const initialValues: ShippingModalForm = {
|
||||
quantity: innerProps.shippingData.quantity ?? 0,
|
||||
product: findProductById(innerProps.shippingData.productId),
|
||||
};
|
||||
const form = useForm<ShippingModalForm>({
|
||||
initialValues,
|
||||
validate: {
|
||||
product: product => !product && "Необходимо выбрать товар",
|
||||
quantity: quantity => quantity > getRestProductQuantity() ? "Слишком много товара" :
|
||||
quantity === 0 && "Слишком мало товара",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const data = getRestProducts({
|
||||
card: innerProps.card,
|
||||
shippingProductId: (innerProps.shippingData as UpdateShippingProductSchema).shippingProductId,
|
||||
});
|
||||
setRestProducts(data.restProducts);
|
||||
setRestProductSelectData(data.restProductsSelectData);
|
||||
}, [innerProps.card]);
|
||||
|
||||
const onSubmit = () => {
|
||||
const data = {
|
||||
...innerProps.shippingData,
|
||||
...form.values,
|
||||
productId: form.values.product?.id,
|
||||
} as CreateShippingProductSchema | UpdateShippingProductSchema;
|
||||
|
||||
ShippingService.updateShippingProduct({
|
||||
requestBody: { data },
|
||||
})
|
||||
.then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message: message });
|
||||
innerProps.updateOnSubmit();
|
||||
if (ok) context.closeContextModal(id);
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
};
|
||||
|
||||
const getRestQuantityText = () => {
|
||||
if (!form.values.product) return;
|
||||
|
||||
const restQuantityInDeal = getRestProductQuantity();
|
||||
const restQuantity = restQuantityInDeal - form.values.quantity;
|
||||
|
||||
if (restQuantity >= 0) {
|
||||
return <Text>Осталось распределить {restQuantity} шт.</Text>;
|
||||
}
|
||||
return <Text>Введено слишком большое количество.<br />Доступно {restQuantityInDeal} шт.</Text>;
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(() => onSubmit())}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}
|
||||
>
|
||||
<ShippingProductSelect
|
||||
{...form.getInputProps("product")}
|
||||
data={restProductsSelectData}
|
||||
/>
|
||||
|
||||
{getRestQuantityText()}
|
||||
|
||||
<NumberInput
|
||||
label={"Количество"}
|
||||
hideControls
|
||||
{...form.getInputProps("quantity")}
|
||||
min={0}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant={"default"}
|
||||
type={"submit"}
|
||||
>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShippingProductModal;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { CreateShippingProductSchema, ProductSchema, UpdateShippingProductSchema } from "../../../../../client";
|
||||
|
||||
export type ShippingModalForm = {
|
||||
quantity: number;
|
||||
product?: ProductSchema | null;
|
||||
}
|
||||
|
||||
export type ShippingData = CreateShippingProductSchema | UpdateShippingProductSchema;
|
||||
|
||||
export type ShippingProductParentData = {
|
||||
palletId?: number;
|
||||
boxId?: number;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { BoxSchema, CardProductSchema, CardSchema, ProductSchema } from "../../../../../client";
|
||||
|
||||
|
||||
type Props = {
|
||||
card?: CardSchema;
|
||||
shippingProductId?: number | null;
|
||||
}
|
||||
|
||||
const getRestProducts = ({
|
||||
card,
|
||||
shippingProductId,
|
||||
}: Props) => {
|
||||
const totalProducts = new Map(
|
||||
card?.products.map(product => product && [product.product.id, product]),
|
||||
);
|
||||
|
||||
const distributedProducts = new Map();
|
||||
|
||||
const accountProduct = (product: ProductSchema, quantity: number) => {
|
||||
const productId = product.id;
|
||||
if (distributedProducts.has(productId)) {
|
||||
const prodData = distributedProducts.get(productId);
|
||||
distributedProducts.set(productId, { product, quantity: quantity + prodData.quantity });
|
||||
} else {
|
||||
distributedProducts.set(productId, { product, quantity });
|
||||
}
|
||||
};
|
||||
|
||||
const accountBoxes = (boxes?: BoxSchema[]) => {
|
||||
boxes?.forEach((box) => {
|
||||
box.shippingProducts.forEach((shippingProduct) => {
|
||||
if (!shippingProduct.product || shippingProduct.id === shippingProductId) return;
|
||||
accountProduct(shippingProduct.product, shippingProduct.quantity);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
accountBoxes(card?.boxes);
|
||||
|
||||
card?.pallets?.forEach(pallet => {
|
||||
pallet.shippingProducts.forEach(shippingProduct => {
|
||||
if (shippingProduct.id === shippingProductId) return;
|
||||
accountProduct(shippingProduct.product, shippingProduct.quantity);
|
||||
});
|
||||
accountBoxes(pallet.boxes);
|
||||
});
|
||||
|
||||
const restProducts = new Map<number, CardProductSchema>();
|
||||
|
||||
totalProducts.entries().forEach(([key, product]) => {
|
||||
const distributedProduct = distributedProducts.get(key);
|
||||
if (distributedProduct) {
|
||||
if (product.quantity > distributedProduct.quantity) {
|
||||
const restQuantity = product.quantity - distributedProduct.quantity;
|
||||
restProducts.set(key, { ...product, quantity: restQuantity });
|
||||
}
|
||||
} else {
|
||||
restProducts.set(key, product);
|
||||
}
|
||||
});
|
||||
|
||||
const restProductsSelectData: ProductSchema[] = [];
|
||||
|
||||
restProducts.forEach(
|
||||
(restProduct) => {
|
||||
restProductsSelectData.push(restProduct.product);
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
restProducts,
|
||||
restProductsSelectData,
|
||||
};
|
||||
};
|
||||
|
||||
export default getRestProducts;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { ProjectSchema } from "../../../client";
|
||||
|
||||
export enum Modules {
|
||||
SERVICES_AND_PRODUCTS = "servicesAndProducts",
|
||||
SHIPMENT = "shipment",
|
||||
EMPLOYEES = "employees",
|
||||
CLIENTS = "clients",
|
||||
MANAGERS = "managers",
|
||||
MEGA_MODULE = "hui",
|
||||
}
|
||||
|
||||
const isModuleInProject = (module: Modules, project?: ProjectSchema | null) => {
|
||||
// if servicesAndProducts included, then clients also included
|
||||
if (module === Modules.CLIENTS) {
|
||||
if (project?.modules.findIndex(m => m.key === Modules.SERVICES_AND_PRODUCTS.toString()) !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return project?.modules.findIndex(m => m.key === module.toString()) !== -1;
|
||||
};
|
||||
|
||||
export default isModuleInProject;
|
||||
Reference in New Issue
Block a user