feat: statuses dnd editor for mobile

src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx

@@ -1,5 +1,10 @@
 import React, { FC } from "react";
-import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import {
+    IconDotsVertical,
+    IconEdit,
+    IconExchange,
+    IconTrash,
+} from "@tabler/icons-react";
 import { Box, Group, Menu, Text } from "@mantine/core";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import { StatusSchema } from "@/lib/client";
@@ -10,7 +15,7 @@ type Props = {
 };
 
 const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
-    const { onDeleteStatus } = useStatusesContext();
+    const { onDeleteStatus, setIsEditorDrawerOpened } = useStatusesContext();
 
     return (
         <Menu>
@@ -45,6 +50,16 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                         <Text>Удалить</Text>
                     </Group>
                 </Menu.Item>
+                <Menu.Item
+                    onClick={e => {
+                        e.stopPropagation();
+                        setIsEditorDrawerOpened(true);
+                    }}>
+                    <Group wrap={"nowrap"}>
+                        <IconExchange />
+                        <Text>Изменить порядок</Text>
+                    </Group>
+                </Menu.Item>
             </Menu.Dropdown>
         </Menu>
     );

src/app/deals/contexts/StatusesContext.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import React, { createContext, FC, useContext, useEffect } from "react";
+import React, {
+    createContext,
+    FC,
+    useContext,
+    useEffect,
+    useState,
+} from "react";
 import { useMutation, UseMutationResult } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
@@ -29,6 +35,8 @@ type StatusesContextState = {
     onCreateStatus: (name: string) => void;
     onUpdateStatus: (statusId: number, status: UpdateStatusSchema) => void;
     onDeleteStatus: (status: StatusSchema) => void;
+    isEditorDrawerOpened: boolean;
+    setIsEditorDrawerOpened: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const StatusesContext = createContext<StatusesContextState | undefined>(
@@ -44,6 +52,8 @@ const useStatusesContextState = () => {
     } = useStatusesList({
         boardId: selectedBoard?.id,
     });
+    const [isEditorDrawerOpened, setIsEditorDrawerOpened] =
+        useState<boolean>(false);
 
     useEffect(() => {
         refetchStatuses();
@@ -76,6 +86,8 @@ const useStatusesContextState = () => {
         onCreateStatus,
         onUpdateStatus,
         onDeleteStatus,
+        isEditorDrawerOpened,
+        setIsEditorDrawerOpened,
     };
 };
 

src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React, { FC, ReactNode } from "react";
+import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
+import { Box, Center, Divider, Drawer, Group, rem, Text } from "@mantine/core";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import CreateStatusButton from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton";
+import StatusMobile from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import { StatusSchema } from "@/lib/client";
+
+const BoardStatusesEditorDrawer: FC = () => {
+    const {
+        statuses,
+        onUpdateStatus,
+        isEditorDrawerOpened,
+        setIsEditorDrawerOpened,
+    } = useStatusesContext();
+    const { selectedBoard } = useBoardsContext();
+    const onClose = () => setIsEditorDrawerOpened(false);
+
+    const renderDraggable = () => (
+        <Box p={"xs"}>
+            <IconGripVertical size={22} />
+        </Box>
+    );
+
+    const renderStatus = (
+        status: StatusSchema,
+        renderDraggable?: (item: StatusSchema) => ReactNode
+    ) => {
+        return (
+            <Group wrap={"nowrap"}>
+                {renderDraggable && renderDraggable(status)}
+                <StatusMobile status={status} />
+            </Group>
+        );
+    };
+
+    const onDragEnd = (itemId: number, newLexorank: string) => {
+        onUpdateStatus(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>{selectedBoard?.name}</Text>
+                </Center>
+                <Box p={"lg"} />
+            </Group>
+            <Divider />
+            <SortableDnd
+                initialItems={statuses}
+                onDragEnd={onDragEnd}
+                renderItem={renderStatus}
+                renderDraggable={renderDraggable}
+                dragHandleStyle={{ width: "auto" }}
+                vertical
+            />
+            <CreateStatusButton />
+        </Drawer>
+    );
+};
+
+export default BoardStatusesEditorDrawer;

src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx

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

src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from "react";
+import { Box, Group, Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import BoardMenu from "@/app/deals/components/Board/BoardMenu";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { StatusSchema } from "@/lib/client";
+
+type Props = {
+    status: StatusSchema;
+};
+
+const StatusMobile: FC<Props> = ({ status }) => {
+    const { onUpdateStatus } = useStatusesContext();
+
+    const startEditing = () => {
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: "Редактирование статуса",
+            withCloseButton: true,
+            innerProps: {
+                onComplete: name => onUpdateStatus(status.id, { name }),
+                defaultValue: status.name,
+            },
+        });
+    };
+
+    return (
+        <Group
+            w={"100%"}
+            pr={"md"}
+            py={"xs"}
+            justify={"space-between"}
+            wrap={"nowrap"}>
+            <Box>
+                <Text>{status.name}</Text>
+            </Box>
+            <BoardMenu
+                board={status}
+                startEditing={startEditing}
+                menuIconSize={22}
+            />
+        </Group>
+    );
+};
+
+export default StatusMobile;

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

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

src/app/deals/page.tsx

@@ -5,6 +5,7 @@ import Header from "@/app/deals/components/Header/Header";
 import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
 import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
 import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
+import BoardStatusesEditorDrawer from "@/app/deals/drawers/BoardStatusesEditorDrawer";
 import ProjectBoardsEditorDrawer from "@/app/deals/drawers/ProjectBoardsEditorDrawer";
 import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import PageContainer from "@/components/layout/PageContainer/PageContainer";
@@ -23,6 +24,7 @@ export default function DealsPage() {
                             <DealsContextProvider>
                                 <Funnel />
                             </DealsContextProvider>
+                            <BoardStatusesEditorDrawer />
                         </StatusesContextProvider>
                         <ProjectBoardsEditorDrawer />
                     </BoardsContextProvider>