72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { FC, useState } from "react";
|
||
import { isEqual } from "lodash";
|
||
import { Button, Group, Stack, Text, TextInput } from "@mantine/core";
|
||
import { useForm } from "@mantine/form";
|
||
import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
|
||
import { DealSchema } from "@/lib/client";
|
||
import { utcDateTimeToLocalString } from "@/utils/datetime";
|
||
|
||
type Props = {
|
||
dealsCrud: DealsCrud;
|
||
deal: DealSchema;
|
||
onClose: () => void;
|
||
};
|
||
|
||
const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
|
||
const [initialValues, setInitialValues] = useState(deal);
|
||
const form = useForm<DealSchema>({
|
||
initialValues,
|
||
validate: {
|
||
name: value => !value && "Введите название",
|
||
},
|
||
});
|
||
|
||
const onSubmit = (values: DealSchema) => {
|
||
dealsCrud.onUpdate(deal.id, values);
|
||
setInitialValues(values);
|
||
};
|
||
|
||
const onDelete = () => {
|
||
dealsCrud.onDelete(deal, onClose);
|
||
};
|
||
|
||
return (
|
||
<form onSubmit={form.onSubmit(onSubmit)}>
|
||
<Stack p={"md"}>
|
||
<TextInput
|
||
label={"Название"}
|
||
{...form.getInputProps("name")}
|
||
/>
|
||
<Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
|
||
<Group
|
||
justify={"space-between"}
|
||
wrap={"nowrap"}>
|
||
<Group wrap={"nowrap"}>
|
||
<Button
|
||
type={"submit"}
|
||
disabled={isEqual(form.values, initialValues)}
|
||
variant={"filled"}>
|
||
Сохранить
|
||
</Button>
|
||
<Button
|
||
type={"reset"}
|
||
onClick={() => form.reset()}
|
||
disabled={isEqual(form.values, initialValues)}
|
||
variant={"default"}>
|
||
Отменить
|
||
</Button>
|
||
</Group>
|
||
<Button
|
||
onClick={onDelete}
|
||
color={"red"}
|
||
variant={"outline"}>
|
||
Удалить
|
||
</Button>
|
||
</Group>
|
||
</Stack>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
export default GeneralTab;
|