98 lines
3.9 KiB
TypeScript
98 lines
3.9 KiB
TypeScript
import { Button, Fieldset, Flex, rem, Textarea, TextInput } from "@mantine/core";
|
||
import { useDealPageContext } from "../../../contexts/DealPageContext.tsx";
|
||
import { useForm } from "@mantine/form";
|
||
import { DealGeneralFormType } from "./DealEditDrawerGeneralTab.tsx";
|
||
import { ClientService, DealSchema, DealService } from "../../../../../client";
|
||
import { isEqual } from "lodash";
|
||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||
import { useQueryClient } from "@tanstack/react-query";
|
||
|
||
const ClientTab = () => {
|
||
const { selectedDeal: deal, setSelectedDeal } = useDealPageContext();
|
||
const initialValues: DealGeneralFormType = deal as DealSchema;
|
||
const queryClient = useQueryClient();
|
||
|
||
const form = useForm<DealGeneralFormType>(
|
||
{
|
||
initialValues: initialValues,
|
||
validate: {
|
||
name: (value: string) => value.length > 0 ? null : "Название сделки не может быть пустым",
|
||
},
|
||
},
|
||
);
|
||
const hasChanges = !isEqual(form.values, initialValues);
|
||
const updateClientInfo = async (values: DealGeneralFormType) => {
|
||
return ClientService.updateClient({
|
||
requestBody: {
|
||
data: values.client,
|
||
},
|
||
}).then(({ ok, message }) => notifications.guess(ok, { message }));
|
||
};
|
||
const update = async () => {
|
||
return DealService.getDealById({ dealId: form.values.id }).then(data => {
|
||
setSelectedDeal(data);
|
||
form.setInitialValues(data);
|
||
queryClient.invalidateQueries({
|
||
queryKey: ["getDealSummaries"],
|
||
});
|
||
});
|
||
};
|
||
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}>
|
||
<TextInput
|
||
disabled
|
||
placeholder={"Название"}
|
||
label={"Название"}
|
||
value={deal?.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")}
|
||
/>
|
||
|
||
</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; |