feat: deal create, update, delete

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css

@@ -0,0 +1,4 @@
+
+.tab {
+    border-bottom-width: 3px;
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import React, { FC } from "react";
+import { Drawer } from "@mantine/core";
+import DealEditorBody from "@/app/deals/drawers/DealEditorDrawer/components/DealEditorBody";
+import { DrawerProps } from "@/drawers/types";
+import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
+import useIsMobile from "@/hooks/utils/useIsMobile";
+import { DealSchema } from "@/lib/client";
+
+type Props = {
+    deal: DealSchema;
+    dealsCrud: DealsCrud;
+};
+
+const DealEditorDrawer: FC<DrawerProps<Props>> = ({
+    opened,
+    onClose,
+    props,
+}) => {
+    const isMobile = useIsMobile();
+
+    return (
+        <Drawer
+            size={isMobile ? "100%" : "60%"}
+            position={"right"}
+            onClose={onClose}
+            removeScrollProps={{ allowPinchZoom: true }}
+            withCloseButton={false}
+            opened={opened}
+            trapFocus={false}
+            styles={{
+                body: {
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    padding: 0,
+                },
+            }}>
+            <DealEditorBody
+                {...props}
+                onClose={onClose}
+            />
+        </Drawer>
+    );
+};
+
+export default DealEditorDrawer;

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

@@ -0,0 +1,47 @@
+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 { DealsCrud } from "@/hooks/cruds/useDealsCrud";
+import { DealSchema } from "@/lib/client";
+import styles from "../DealEditorDrawer.module.css";
+
+type Props = {
+    dealsCrud: DealsCrud;
+    deal: DealSchema;
+    onClose: () => void;
+};
+
+const DealEditorBody: FC<Props> = ({ dealsCrud, deal, onClose }) => {
+    return (
+        <Tabs
+            defaultValue="general"
+            classNames={{ tab: styles.tab }}>
+            <Tabs.List>
+                <Tabs.Tab
+                    value="general"
+                    leftSection={<IconEdit />}>
+                    Общая информация
+                </Tabs.Tab>
+                <Tabs.Tab
+                    value="mock"
+                    leftSection={<IconCircleDotted />}>
+                    Mock
+                </Tabs.Tab>
+            </Tabs.List>
+
+            <Tabs.Panel value="general">
+                <GeneralTab
+                    dealsCrud={dealsCrud}
+                    deal={deal}
+                    onClose={onClose}
+                />
+            </Tabs.Panel>
+            <Tabs.Panel value="mock">
+                <Text>mock</Text>
+            </Tabs.Panel>
+        </Tabs>
+    );
+};
+
+export default DealEditorBody;

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

@@ -0,0 +1,67 @@
+import { FC, useState } from "react";
+import { isEqual } from "lodash";
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
+import { DealSchema } from "@/lib/client";
+
+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")}
+                />
+                <Group justify={"space-between"}>
+                    <Group>
+                        <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/index.ts

@@ -0,0 +1,3 @@
+import ProjectsEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer";
+
+export default ProjectsEditorDrawer;