feat: drawers registry

2025-08-22 17:04:59 +04:00
parent cb67c913ad
commit b5753ed3a2
28 changed files with 680 additions and 285 deletions
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx
@ -1,47 +1,21 @@
 "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";
+import React, { FC } from "react";
+import { Drawer, rem } from "@mantine/core";
+import StatusesDrawerBody from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody";
+import { BoardStatusesContextProvider } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
+import { DrawerProps } from "@/drawers/types";
+import { BoardSchema } 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 />
-        </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 });
-    };
+type Props = {
+    board: BoardSchema;
+};

+const BoardStatusesEditorDrawer: FC<DrawerProps<Props>> = ({
+    opened,
+    onClose,
+    props: { board },
+}) => {
    return (
        <Drawer
            size={"100%"}
@ -49,7 +23,7 @@ const BoardStatusesEditorDrawer: FC = () => {
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
-            opened={isEditorDrawerOpened}
+            opened={opened}
            trapFocus={false}
            styles={{
                body: {
@ -59,27 +33,9 @@ const BoardStatusesEditorDrawer: FC = () => {
                    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 />
+            <BoardStatusesContextProvider board={board}>
+                <StatusesDrawerBody onClose={onClose} />
+            </BoardStatusesContextProvider>
        </Drawer>
    );
 };
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx
@ -1,10 +1,11 @@
+import { FC } from "react";
 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";
+import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";

-const CreateStatusButton = () => {
-    const { onCreateStatus } = useStatusesContext();
+const CreateStatusButton: FC = () => {
+    const { onCreateStatus } = useBoardStatusesContext();

    const onStartCreating = () => {
        modals.openContextModal({
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody.tsx
@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Stack } from "@mantine/core";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import CreateProjectButton from "@/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton";
+import ProjectMobile from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile";
+
+type Props = {
+    setSelectedProjectId: (projectId: number | null) => void;
+    onClose: () => void;
+};
+
+const ProjectsDrawerBody: FC<Props> = ({ setSelectedProjectId, onClose }) => {
+    const { projects } = useProjectsContext();
+
+    return (
+        <>
+            <Stack gap={0}>
+                {projects.map((project, index) => (
+                    <ProjectMobile
+                        key={index}
+                        project={project}
+                        setSelectedProjectId={setSelectedProjectId}
+                        closeDrawer={onClose}
+                    />
+                ))}
+            </Stack>
+            <CreateProjectButton />
+        </>
+    );
+};
+
+export default ProjectsDrawerBody;
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx
@ -1,16 +1,17 @@
 import React, { FC } from "react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
-import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
-import { StatusSchema } from "@/lib/client";
+import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
+import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
+import { BoardSchema, StatusSchema } from "@/lib/client";

 type Props = {
    status: StatusSchema;
+    board: BoardSchema;
 };

-const StatusMobile: FC<Props> = ({ status }) => {
-    const { onUpdateStatus } = useStatusesContext();
+const StatusMobile: FC<Props> = ({ status, board }) => {
+    const { onUpdateStatus, onDeleteStatus } = useBoardStatusesContext();

    const startEditing = () => {
        modals.openContextModal({
@ -34,9 +35,12 @@ const StatusMobile: FC<Props> = ({ status }) => {
            <Box>
                <Text>{status.name}</Text>
            </Box>
-            <BoardMenu
-                board={status}
-                startEditing={startEditing}
+            <StatusMenu
+                status={status}
+                board={board}
+                onDeleteStatus={onDeleteStatus}
+                handleEdit={startEditing}
+                withChangeOrderButton={false}
            />
        </Group>
    );
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody.tsx
@ -0,0 +1,68 @@
+import React, { FC, ReactNode } from "react";
+import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
+import { Box, Center, Divider, Group, Text } from "@mantine/core";
+import CreateStatusButton from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton";
+import StatusMobile from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile";
+import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import { StatusSchema } from "@/lib/client";
+
+type Props = {
+    onClose: () => void;
+};
+
+const StatusesDrawerBody: FC<Props> = ({ onClose }) => {
+    const { onUpdateStatus, board, statuses } = useBoardStatusesContext();
+
+    const renderDraggable = () => (
+        <Box p={"xs"}>
+            <IconGripVertical />
+        </Box>
+    );
+
+    const renderStatus = (
+        status: StatusSchema,
+        renderDraggable?: (item: StatusSchema) => ReactNode
+    ) => {
+        return (
+            <Group wrap={"nowrap"}>
+                {renderDraggable && renderDraggable(status)}
+                <StatusMobile
+                    status={status}
+                    board={board}
+                />
+            </Group>
+        );
+    };
+
+    const onDragEnd = (itemId: number, newLexorank: string) =>
+        onUpdateStatus(itemId, { lexorank: newLexorank });
+
+    return (
+        <>
+            <Group justify={"space-between"}>
+                <Box
+                    onClick={onClose}
+                    p={"xs"}>
+                    <IconChevronLeft />
+                </Box>
+                <Center>
+                    <Text>{board.name}</Text>
+                </Center>
+                <Box p={"lg"} />
+            </Group>
+            <Divider />
+            <SortableDnd
+                initialItems={statuses}
+                onDragEnd={onDragEnd}
+                renderItem={renderStatus}
+                renderDraggable={renderDraggable}
+                dragHandleStyle={{ width: "auto" }}
+                vertical
+            />
+            <CreateStatusButton />
+        </>
+    );
+};
+
+export default StatusesDrawerBody;
--- a/src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx
+++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx
@ -0,0 +1,78 @@
+"use client";
+
+import React, { createContext, FC, useContext } from "react";
+import useStatusesList from "@/hooks/useStatusesList";
+import { useStatusesOperations } from "@/hooks/useStatusesOperations";
+import { BoardSchema, StatusSchema, UpdateStatusSchema } from "@/lib/client";
+
+type BoardStatusesContextState = {
+    board: BoardSchema;
+    statuses: StatusSchema[];
+    setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
+    refetchStatuses: () => void;
+    onCreateStatus: (name: string) => void;
+    onUpdateStatus: (statusId: number, status: UpdateStatusSchema) => void;
+    onDeleteStatus: (status: StatusSchema) => void;
+};
+
+const BoardStatusesContext = createContext<
+    BoardStatusesContextState | undefined
+>(undefined);
+
+type Props = {
+    board: BoardSchema;
+};
+
+const useBoardStatusesContextState = ({ board }: Props) => {
+    const {
+        statuses,
+        setStatuses,
+        refetch: refetchStatuses,
+    } = useStatusesList({
+        boardId: board.id,
+    });
+
+    const { onCreateStatus, onUpdateStatus, onDeleteStatus } =
+        useStatusesOperations({
+            statuses,
+            setStatuses,
+            refetchStatuses,
+            boardId: board.id,
+        });
+
+    return {
+        board,
+        statuses,
+        setStatuses,
+        refetchStatuses,
+        onCreateStatus,
+        onUpdateStatus,
+        onDeleteStatus,
+    };
+};
+
+type BoardStatusesContextProviderProps = {
+    children: React.ReactNode;
+} & Props;
+
+export const BoardStatusesContextProvider: FC<
+    BoardStatusesContextProviderProps
+> = ({ children, ...props }) => {
+    const state = useBoardStatusesContextState(props);
+
+    return (
+        <BoardStatusesContext.Provider value={state}>
+            {children}
+        </BoardStatusesContext.Provider>
+    );
+};
+
+export const useBoardStatusesContext = () => {
+    const context = useContext(BoardStatusesContext);
+    if (!context) {
+        throw new Error(
+            "useBoardStatusesContext must be used within a BoardStatusesContextProvider"
+        );
+    }
+    return context;
+};