feat: prettier
This commit is contained in:
@@ -14,13 +14,20 @@ import {
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { ClientService, DealSchema, DealService, ShippingWarehouseSchema } from "../../../../../client";
|
||||
import { DealStatus, DealStatusDictionary } from "../../../../../shared/enums/DealStatus.ts";
|
||||
import {
|
||||
ClientService,
|
||||
DealSchema,
|
||||
DealService,
|
||||
ShippingWarehouseSchema,
|
||||
} from "../../../../../client";
|
||||
import {
|
||||
DealStatus,
|
||||
DealStatusDictionary,
|
||||
} from "../../../../../shared/enums/DealStatus.ts";
|
||||
import { isEqual } from "lodash";
|
||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import ShippingWarehouseAutocomplete
|
||||
from "../../../../../components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
|
||||
import ShippingWarehouseAutocomplete from "../../../../../components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
|
||||
import { ButtonCopyControlled } from "../../../../../components/ButtonCopyControlled/ButtonCopyControlled.tsx";
|
||||
import { useClipboard } from "@mantine/hooks";
|
||||
import ButtonCopy from "../../../../../components/ButtonCopy/ButtonCopy.tsx";
|
||||
@@ -29,10 +36,10 @@ import { getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts
|
||||
import { IconPrinter } from "@tabler/icons-react";
|
||||
|
||||
type Props = {
|
||||
deal: DealSchema
|
||||
}
|
||||
deal: DealSchema;
|
||||
};
|
||||
|
||||
type FormType = Omit<DealSchema, "statusHistory" | "services" | "products">
|
||||
type FormType = Omit<DealSchema, "statusHistory" | "services" | "products">;
|
||||
|
||||
const Content: FC<Props> = ({ deal }) => {
|
||||
const { setSelectedDeal } = useDealPageContext();
|
||||
@@ -40,31 +47,34 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const initialValues: FormType = deal;
|
||||
const form = useForm<FormType>(
|
||||
{
|
||||
initialValues: initialValues,
|
||||
validate: {
|
||||
name: (value: string) => value.length > 0 ? null : "Название сделки не может быть пустым",
|
||||
},
|
||||
const form = useForm<FormType>({
|
||||
initialValues: initialValues,
|
||||
validate: {
|
||||
name: (value: string) =>
|
||||
value.length > 0
|
||||
? null
|
||||
: "Название сделки не может быть пустым",
|
||||
},
|
||||
);
|
||||
});
|
||||
const updateDealInfo = async (values: FormType) => {
|
||||
return DealService.updateDealGeneralInfo({
|
||||
requestBody: {
|
||||
dealId: deal.id,
|
||||
data: { ...values, shippingWarehouse: values.shippingWarehouse?.toString() },
|
||||
data: {
|
||||
...values,
|
||||
shippingWarehouse: values.shippingWarehouse?.toString(),
|
||||
},
|
||||
},
|
||||
}).then(({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
DealService.getDealById({ dealId: deal.id })
|
||||
.then((data) => {
|
||||
setSelectedDeal(data);
|
||||
form.setInitialValues(data);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["getDealSummaries"],
|
||||
});
|
||||
DealService.getDealById({ dealId: deal.id }).then(data => {
|
||||
setSelectedDeal(data);
|
||||
form.setInitialValues(data);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["getDealSummaries"],
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
const updateClientInfo = async (values: FormType) => {
|
||||
@@ -72,8 +82,7 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
requestBody: {
|
||||
data: values.client,
|
||||
},
|
||||
}).then(({ ok, message }) =>
|
||||
notifications.guess(ok, { message }));
|
||||
}).then(({ ok, message }) => notifications.guess(ok, { message }));
|
||||
};
|
||||
const handleSubmit = async (values: FormType) => {
|
||||
// Updating client info if there changes
|
||||
@@ -83,9 +92,10 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
// updating deal info
|
||||
await updateDealInfo(values);
|
||||
};
|
||||
const isShippingWarehouse = (value: (ShippingWarehouseSchema | string | null | undefined)): value is ShippingWarehouseSchema => {
|
||||
return !["string", "null", "undefined"].includes((typeof value));
|
||||
|
||||
const isShippingWarehouse = (
|
||||
value: ShippingWarehouseSchema | string | null | undefined
|
||||
): value is ShippingWarehouseSchema => {
|
||||
return !["string", "null", "undefined"].includes(typeof value);
|
||||
};
|
||||
|
||||
const onCopyGuestUrlClick = () => {
|
||||
@@ -94,18 +104,20 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
dealId: deal.id,
|
||||
},
|
||||
}).then(({ ok, message, url }) => {
|
||||
if (!ok)
|
||||
notifications.guess(ok, { message });
|
||||
clipboard.copy(
|
||||
`${window.location.origin}/${url}`,
|
||||
);
|
||||
if (!ok) notifications.guess(ok, { message });
|
||||
clipboard.copy(`${window.location.origin}/${url}`);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Flex direction={"column"} justify={"space-between"} h={"100%"}>
|
||||
<form onSubmit={form.onSubmit(values => handleSubmit(values))}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
justify={"space-between"}
|
||||
h={"100%"}>
|
||||
<Fieldset legend={`Общие параметры [ID: ${deal.id}]`}>
|
||||
<Flex direction={"column"} gap={rem(10)}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={rem(10)}>
|
||||
<TextInput
|
||||
placeholder={"Название сделки"}
|
||||
label={"Название сделки"}
|
||||
@@ -115,20 +127,26 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
disabled
|
||||
placeholder={"Дата создания"}
|
||||
label={"Дата создания"}
|
||||
value={new Date(deal.createdAt).toLocaleString("ru-RU")}
|
||||
value={new Date(deal.createdAt).toLocaleString(
|
||||
"ru-RU"
|
||||
)}
|
||||
/>
|
||||
<TextInput
|
||||
disabled
|
||||
placeholder={"Текущий статус"}
|
||||
label={"Текущий статус"}
|
||||
value={DealStatusDictionary[deal.currentStatus as DealStatus]} />
|
||||
value={
|
||||
DealStatusDictionary[
|
||||
deal.currentStatus as DealStatus
|
||||
]
|
||||
}
|
||||
/>
|
||||
{deal.category && (
|
||||
<TextInput
|
||||
disabled
|
||||
placeholder={"Категория"}
|
||||
label={"Категория"}
|
||||
value={deal.category.name}
|
||||
|
||||
/>
|
||||
)}
|
||||
<Textarea
|
||||
@@ -139,27 +157,46 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
<ShippingWarehouseAutocomplete
|
||||
placeholder={"Введите склад отгрузки"}
|
||||
label={"Склад отгрузки"}
|
||||
value={isShippingWarehouse(form.values.shippingWarehouse) ? form.values.shippingWarehouse : undefined}
|
||||
value={
|
||||
isShippingWarehouse(
|
||||
form.values.shippingWarehouse
|
||||
)
|
||||
? form.values.shippingWarehouse
|
||||
: undefined
|
||||
}
|
||||
onChange={event => {
|
||||
if (isShippingWarehouse(event)) {
|
||||
form.getInputProps("shippingWarehouse").onChange(event.name);
|
||||
form.getInputProps(
|
||||
"shippingWarehouse"
|
||||
).onChange(event.name);
|
||||
return;
|
||||
}
|
||||
form.getInputProps("shippingWarehouse").onChange(event);
|
||||
form.getInputProps(
|
||||
"shippingWarehouse"
|
||||
).onChange(event);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Fieldset>
|
||||
<Flex mt={"md"} gap={rem(10)} align={"center"} justify={"flex-end"}>
|
||||
<Flex align={"center"} gap={rem(10)} justify={"center"}>
|
||||
|
||||
<Flex gap={rem(10)} align={"center"} justify={"space-between"}>
|
||||
<Tooltip
|
||||
label={"Распечатать сделку"}
|
||||
>
|
||||
<Flex
|
||||
mt={"md"}
|
||||
gap={rem(10)}
|
||||
align={"center"}
|
||||
justify={"flex-end"}>
|
||||
<Flex
|
||||
align={"center"}
|
||||
gap={rem(10)}
|
||||
justify={"center"}>
|
||||
<Flex
|
||||
gap={rem(10)}
|
||||
align={"center"}
|
||||
justify={"space-between"}>
|
||||
<Tooltip label={"Распечатать сделку"}>
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
const pdfWindow = window.open(`${import.meta.env.VITE_API_URL}/deal/detailedDocument/${deal.id}`);
|
||||
const pdfWindow = window.open(
|
||||
`${import.meta.env.VITE_API_URL}/deal/detailedDocument/${deal.id}`
|
||||
);
|
||||
if (!pdfWindow) return;
|
||||
pdfWindow.print();
|
||||
}}
|
||||
@@ -169,38 +206,42 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
</Tooltip>
|
||||
|
||||
<Flex gap={rem(10)}>
|
||||
|
||||
{(deal.billRequest && deal.billRequest.pdfUrl) ?
|
||||
{deal.billRequest && deal.billRequest.pdfUrl ? (
|
||||
<ButtonCopy
|
||||
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
|
||||
value={deal.billRequest.pdfUrl}
|
||||
>
|
||||
onCopiedLabel={
|
||||
"Ссылка скопирована в буфер обмена"
|
||||
}
|
||||
value={deal.billRequest.pdfUrl}>
|
||||
Ссылка на оплату
|
||||
</ButtonCopy>
|
||||
:
|
||||
) : (
|
||||
<ButtonCopyControlled
|
||||
onCopyClick={() => {
|
||||
const date = getCurrentDateTimeForFilename();
|
||||
FileSaver.saveAs(`${import.meta.env.VITE_API_URL}/deal/document/${deal.id}`,
|
||||
`bill_${deal.id}_${date}.pdf`);
|
||||
const date =
|
||||
getCurrentDateTimeForFilename();
|
||||
FileSaver.saveAs(
|
||||
`${import.meta.env.VITE_API_URL}/deal/document/${deal.id}`,
|
||||
`bill_${deal.id}_${date}.pdf`
|
||||
);
|
||||
}}
|
||||
copied={false}
|
||||
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
|
||||
>
|
||||
onCopiedLabel={
|
||||
"Ссылка скопирована в буфер обмена"
|
||||
}>
|
||||
Ссылка на оплату (PDF)
|
||||
</ButtonCopyControlled>
|
||||
}
|
||||
)}
|
||||
<ButtonCopyControlled
|
||||
onCopyClick={onCopyGuestUrlClick}
|
||||
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
|
||||
onCopiedLabel={
|
||||
"Ссылка скопирована в буфер обмена"
|
||||
}
|
||||
copied={clipboard.copied}>
|
||||
Ссылка на редактирование
|
||||
</ButtonCopyControlled>
|
||||
</Flex>
|
||||
|
||||
</Flex>
|
||||
<Flex gap={rem(10)}>
|
||||
|
||||
<Checkbox
|
||||
label={"Оплачен"}
|
||||
checked={deal.billRequest?.paid || false}
|
||||
@@ -216,36 +257,33 @@ const Content: FC<Props> = ({ deal }) => {
|
||||
{...form.getInputProps("isDeleted")}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
</Flex>
|
||||
<Divider
|
||||
orientation={"vertical"}
|
||||
/>
|
||||
<Group align={"center"} justify={"center"}>
|
||||
<Divider orientation={"vertical"} />
|
||||
<Group
|
||||
align={"center"}
|
||||
justify={"center"}>
|
||||
<Button
|
||||
color={"red"}
|
||||
type={"reset"}
|
||||
disabled={isEqual(initialValues, form.values)}
|
||||
onClick={() => form.reset()}
|
||||
>Отменить изменения</Button>
|
||||
onClick={() => form.reset()}>
|
||||
Отменить изменения
|
||||
</Button>
|
||||
<Button
|
||||
variant={"default"}
|
||||
type={"submit"}
|
||||
disabled={isEqual(initialValues, form.values)}
|
||||
>Сохранить изменения</Button>
|
||||
disabled={isEqual(initialValues, form.values)}>
|
||||
Сохранить изменения
|
||||
</Button>
|
||||
</Group>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
</form>
|
||||
|
||||
);
|
||||
};
|
||||
const DealEditDrawerGeneralTab: FC = () => {
|
||||
const { selectedDeal } = useDealPageContext();
|
||||
if (!selectedDeal) return <>No deal selected</>;
|
||||
return (
|
||||
<Content deal={selectedDeal} />
|
||||
);
|
||||
return <Content deal={selectedDeal} />;
|
||||
};
|
||||
export default DealEditDrawerGeneralTab;
|
||||
export default DealEditDrawerGeneralTab;
|
||||
|
||||
Reference in New Issue
Block a user