feat: board and status selects in deal editor

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx

@@ -6,9 +6,10 @@ import DealEditorBody from "@/app/deals/drawers/DealEditorDrawer/components/Deal
 import { DrawerProps } from "@/drawers/types";
 import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
 import useIsMobile from "@/hooks/utils/useIsMobile";
-import { DealSchema } from "@/lib/client";
+import { DealSchema, ProjectSchema } from "@/lib/client";
 
 type Props = {
+    project: ProjectSchema;
     deal: DealSchema;
     dealsCrud: DealsCrud;
 };

src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx

@@ -1,18 +1,19 @@
 import { FC } from "react";
 import { IconCircleDotted, IconEdit } from "@tabler/icons-react";
 import { Tabs, Text } from "@mantine/core";
-import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/components/GeneralTab";
+import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
 import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
-import { DealSchema } from "@/lib/client";
+import { DealSchema, ProjectSchema } from "@/lib/client";
 import styles from "../DealEditorDrawer.module.css";
 
 type Props = {
+    project: ProjectSchema;
     dealsCrud: DealsCrud;
     deal: DealSchema;
     onClose: () => void;
 };
 
-const DealEditorBody: FC<Props> = ({ dealsCrud, deal, onClose }) => {
+const DealEditorBody: FC<Props> = ({ project, dealsCrud, deal, onClose }) => {
     return (
         <Tabs
             defaultValue="general"
@@ -32,6 +33,7 @@ const DealEditorBody: FC<Props> = ({ dealsCrud, deal, onClose }) => {
 
             <Tabs.Panel value="general">
                 <GeneralTab
+                    project={project}
                     dealsCrud={dealsCrud}
                     deal={deal}
                     onClose={onClose}

src/app/deals/drawers/DealEditorDrawer/components/GeneralTab.tsx

@@ -1,71 +0,0 @@
-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;

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { isEqual } from "lodash";
+import { Button, Group } from "@mantine/core";
+import { UseFormReturnType } from "@mantine/form";
+import { DealSchema } from "@/lib/client";
+
+type Props = {
+    form: UseFormReturnType<Partial<DealSchema>>;
+    initialValues: Partial<DealSchema>;
+    onDelete: () => void;
+};
+
+const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
+    return (
+        <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>
+    );
+};
+
+export default Footer;

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx

@@ -0,0 +1,71 @@
+import { FC, useState } from "react";
+import { Stack, Text, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer";
+import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
+import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
+import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
+import { DealSchema, ProjectSchema } from "@/lib/client";
+import { utcDateTimeToLocalString } from "@/utils/datetime";
+
+type Props = {
+    project: ProjectSchema;
+    dealsCrud: DealsCrud;
+    deal: DealSchema;
+    onClose: () => void;
+};
+
+const GeneralTab: FC<Props> = ({ project, deal, dealsCrud, onClose }) => {
+    const [initialValues, setInitialValues] =
+        useState<Partial<DealSchema>>(deal);
+    const form = useForm<Partial<DealSchema>>({
+        initialValues,
+        validate: {
+            name: value => !value && "Введите название",
+            board: value => !value && "Выберите доску",
+            status: value => !value && "Выберите статус",
+        },
+    });
+
+    const onSubmit = (values: Partial<DealSchema>) => {
+        dealsCrud.onUpdate(deal.id, {
+            ...values,
+            boardId: values.board?.id,
+            statusId: values.status?.id,
+        });
+        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>
+                <BoardSelect
+                    label={"Доска"}
+                    {...form.getInputProps("board")}
+                    projectId={project?.id}
+                />
+                <StatusSelect
+                    label={"Статус"}
+                    {...form.getInputProps("status")}
+                    boardId={form.values.board?.id}
+                />
+                <Footer
+                    form={form}
+                    initialValues={initialValues}
+                    onDelete={onDelete}
+                />
+            </Stack>
+        </form>
+    );
+};
+
+export default GeneralTab;