refactor: using isDirty in forms

This commit is contained in:
2025-09-13 09:02:07 +04:00
parent c76304b7bc
commit f2746b8b65
4 changed files with 8 additions and 15 deletions

View File

@ -1,17 +1,14 @@
import { FC } from "react"; import { FC } from "react";
import { isEqual } from "lodash";
import { Button, Group } from "@mantine/core"; import { Button, Group } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form"; import { UseFormReturnType } from "@mantine/form";
import { DealForm } from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab"; import { DealForm } from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
import { DealSchema } from "@/lib/client";
type Props = { type Props = {
form: UseFormReturnType<DealForm>; form: UseFormReturnType<DealForm>;
initialValues: Partial<DealSchema>;
onDelete: () => void; onDelete: () => void;
}; };
const Footer: FC<Props> = ({ form, initialValues, onDelete }) => { const Footer: FC<Props> = ({ form, onDelete }) => {
return ( return (
<Group <Group
justify={"space-between"} justify={"space-between"}
@ -19,14 +16,14 @@ const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
<Group wrap={"nowrap"}> <Group wrap={"nowrap"}>
<Button <Button
type={"submit"} type={"submit"}
disabled={isEqual(form.values, initialValues)} disabled={!form.isDirty()}
variant={"filled"}> variant={"filled"}>
Сохранить Сохранить
</Button> </Button>
<Button <Button
type={"reset"} type={"reset"}
onClick={() => form.reset()} onClick={() => form.reset()}
disabled={isEqual(form.values, initialValues)} disabled={!form.isDirty()}
variant={"default"}> variant={"default"}>
Отменить Отменить
</Button> </Button>

View File

@ -29,7 +29,7 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
}); });
const onSubmit = (values: DealForm) => { const onSubmit = (values: DealForm) => {
form.setInitialValues(values); form.resetDirty();
onChange({ onChange({
...values, ...values,
board: values.board!, board: values.board!,
@ -63,7 +63,6 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
/> />
<Footer <Footer
form={form} form={form}
initialValues={value}
onDelete={() => onDelete(value)} onDelete={() => onDelete(value)}
/> />
</Stack> </Stack>

View File

@ -1,16 +1,14 @@
import { FC } from "react"; import { FC } from "react";
import { isEqual } from "lodash";
import { Button, Group } from "@mantine/core"; import { Button, Group } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form"; import { UseFormReturnType } from "@mantine/form";
import { ProjectSchema } from "@/lib/client"; import { ProjectSchema } from "@/lib/client";
type Props = { type Props = {
form: UseFormReturnType<ProjectSchema>; form: UseFormReturnType<ProjectSchema>;
initialValues: Partial<ProjectSchema>;
onDelete: () => void; onDelete: () => void;
}; };
const Footer: FC<Props> = ({ form, initialValues, onDelete }) => { const Footer: FC<Props> = ({ form, onDelete }) => {
return ( return (
<Group <Group
justify={"space-between"} justify={"space-between"}
@ -18,14 +16,14 @@ const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
<Group wrap={"nowrap"}> <Group wrap={"nowrap"}>
<Button <Button
type={"submit"} type={"submit"}
disabled={isEqual(form.values, initialValues)} disabled={!form.isDirty()}
variant={"filled"}> variant={"filled"}>
Сохранить Сохранить
</Button> </Button>
<Button <Button
type={"reset"} type={"reset"}
onClick={() => form.reset()} onClick={() => form.reset()}
disabled={isEqual(form.values, initialValues)} disabled={!form.isDirty()}
variant={"default"}> variant={"default"}>
Отменить Отменить
</Button> </Button>

View File

@ -19,8 +19,8 @@ const GeneralTab: FC<Props> = ({ value, onChange, onDelete }) => {
}); });
const onSubmit = (values: ProjectSchema) => { const onSubmit = (values: ProjectSchema) => {
form.resetDirty(values);
onChange(values); onChange(values);
form.setInitialValues(values);
}; };
return ( return (
@ -32,7 +32,6 @@ const GeneralTab: FC<Props> = ({ value, onChange, onDelete }) => {
/> />
<Footer <Footer
form={form} form={form}
initialValues={value}
onDelete={() => onDelete(value)} onDelete={() => onDelete(value)}
/> />
</Stack> </Stack>