91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import { Button, Fieldset, Group, Modal, Stack, Text } from "@mantine/core";
|
|
import { type FC } from "react";
|
|
import { FormProvider } from "react-hook-form";
|
|
|
|
import { formatDate } from "@/shared/lib";
|
|
|
|
import type { BankCard } from "../../api/types";
|
|
|
|
import { BankFeedback } from "../BankFeedback";
|
|
import { BankCardFields } from "./BankCardForm.view";
|
|
import { useBankCardFormVm } from "./BankCardForm.vm";
|
|
|
|
type BankCardFormProps = { card?: BankCard; onClose: () => void };
|
|
|
|
const BankCardForm: FC<BankCardFormProps> = (props) => {
|
|
const {
|
|
dialogTitle,
|
|
error,
|
|
isPending,
|
|
latest,
|
|
methods,
|
|
onAdoptVersion,
|
|
onCancel,
|
|
onReloadRecord,
|
|
onRequestClose,
|
|
onSubmit,
|
|
opened,
|
|
t,
|
|
} = useBankCardFormVm(props);
|
|
|
|
return (
|
|
<Modal
|
|
closeButtonProps={{ "aria-label": t("bank.close"), "disabled": isPending }}
|
|
closeOnClickOutside={!isPending}
|
|
closeOnEscape={!isPending}
|
|
onClose={onRequestClose}
|
|
onExitTransitionEnd={props.onClose}
|
|
opened={opened}
|
|
title={dialogTitle}
|
|
>
|
|
<FormProvider {...methods}>
|
|
<form onSubmit={onSubmit}>
|
|
<Fieldset disabled={isPending} variant="unstyled">
|
|
<Stack>
|
|
<BankCardFields archived={Boolean(props.card?.archivedAt)} />
|
|
|
|
{!!error && (
|
|
<>
|
|
<BankFeedback error={error} />
|
|
|
|
{props.card && (
|
|
<Button onClick={onReloadRecord} variant="default">
|
|
{t("bank.reloadRecord")}
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{latest && (
|
|
<>
|
|
<Text>
|
|
{t("bank.versionHint", {
|
|
details: `${latest.name} · ${latest.openingBalance.value} RUB · ${formatDate(latest.openingDate)}`,
|
|
})}
|
|
</Text>
|
|
|
|
<Button onClick={onAdoptVersion} variant="default">
|
|
{t("bank.adoptVersion", { version: latest.version })}
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
<Group>
|
|
<Button loading={isPending} type="submit">
|
|
{t("bank.save")}
|
|
</Button>
|
|
|
|
<Button onClick={onCancel} variant="default">
|
|
{t("bank.cancel")}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Fieldset>
|
|
</form>
|
|
</FormProvider>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export { BankCardForm };
|