feat: boards dnd editor for mobile

src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { FC } from "react";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { Box, Center, Drawer, Group, rem, Text } from "@mantine/core";
+import Board from "@/app/deals/components/Board/Board";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import CreateBoardButtonMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import { BoardSchema } from "@/lib/client";
+
+const ProjectBoardsEditorDrawer: FC = () => {
+    const {
+        boards,
+        onUpdateBoard,
+        isEditorDrawerOpened,
+        setIsEditorDrawerOpened,
+    } = useBoardsContext();
+    const { selectedProject } = useProjectsContext();
+    const onClose = () => setIsEditorDrawerOpened(false);
+
+    const renderBoard = (board: BoardSchema) => {
+        return <Board board={board} />;
+    };
+
+    const onDragEnd = (itemId: number, newLexorank: string) => {
+        onUpdateBoard(itemId, { lexorank: newLexorank });
+    };
+
+    return (
+        <Drawer
+            size={"100%"}
+            position={"right"}
+            onClose={onClose}
+            removeScrollProps={{ allowPinchZoom: true }}
+            withCloseButton={false}
+            opened={isEditorDrawerOpened}
+            styles={{
+                body: {
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: rem(10),
+                },
+            }}>
+            <Group justify={"space-between"}>
+                <Box
+                    onClick={onClose}
+                    p={"xs"}>
+                    <IconChevronLeft />
+                </Box>
+                <Center>
+                    <Text>{selectedProject?.name}</Text>
+                </Center>
+                <Box p={"lg"} />
+            </Group>
+            <SortableDnd
+                initialItems={boards}
+                renderItem={renderBoard}
+                onDragEnd={onDragEnd}
+                vertical
+            />
+            <CreateBoardButtonMobile />
+        </Drawer>
+    );
+};
+
+export default ProjectBoardsEditorDrawer;

src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile.tsx

@@ -0,0 +1,30 @@
+import { IconPlus } from "@tabler/icons-react";
+import { Box, Group, Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+
+const CreateBoardButtonMobile = () => {
+    const { onCreateBoard } = useBoardsContext();
+
+    const onStartCreating = () => {
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: "Создание доски",
+            withCloseButton: true,
+            innerProps: {
+                onComplete: onCreateBoard,
+            },
+        });
+    };
+
+    return (
+        <Group onClick={onStartCreating}>
+            <IconPlus />
+            <Box mt={5}>
+                <Text>Создать доску</Text>
+            </Box>
+        </Group>
+    );
+};
+
+export default CreateBoardButtonMobile;

src/app/deals/drawers/ProjectBoardsEditorDrawer/index.ts

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