diff --git a/src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx b/src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx index 781a40d..9f7eeee 100644 --- a/src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx +++ b/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 = ({ status, handleEdit }) => { - const { onDeleteStatus } = useStatusesContext(); + const { onDeleteStatus, setIsEditorDrawerOpened } = useStatusesContext(); return ( @@ -45,6 +50,16 @@ const StatusMenu: FC = ({ status, handleEdit }) => { Удалить + { + e.stopPropagation(); + setIsEditorDrawerOpened(true); + }}> + + + Изменить порядок + + ); diff --git a/src/app/deals/contexts/StatusesContext.tsx b/src/app/deals/contexts/StatusesContext.tsx index fb5f085..5ac2255 100644 --- a/src/app/deals/contexts/StatusesContext.tsx +++ b/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>; }; const StatusesContext = createContext( @@ -44,6 +52,8 @@ const useStatusesContextState = () => { } = useStatusesList({ boardId: selectedBoard?.id, }); + const [isEditorDrawerOpened, setIsEditorDrawerOpened] = + useState(false); useEffect(() => { refetchStatuses(); @@ -76,6 +86,8 @@ const useStatusesContextState = () => { onCreateStatus, onUpdateStatus, onDeleteStatus, + isEditorDrawerOpened, + setIsEditorDrawerOpened, }; }; diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx b/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx new file mode 100644 index 0000000..44d354b --- /dev/null +++ b/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 = () => ( + + + + ); + + const renderStatus = ( + status: StatusSchema, + renderDraggable?: (item: StatusSchema) => ReactNode + ) => { + return ( + + {renderDraggable && renderDraggable(status)} + + + ); + }; + + const onDragEnd = (itemId: number, newLexorank: string) => { + onUpdateStatus(itemId, { lexorank: newLexorank }); + }; + + return ( + + + + + +
+ {selectedBoard?.name} +
+ +
+ + + +
+ ); +}; + +export default BoardStatusesEditorDrawer; diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx new file mode 100644 index 0000000..7cbedd4 --- /dev/null +++ b/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 ( + + + + Создать колонку + + + ); +}; + +export default CreateStatusButton; diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx new file mode 100644 index 0000000..51f8983 --- /dev/null +++ b/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 = ({ status }) => { + const { onUpdateStatus } = useStatusesContext(); + + const startEditing = () => { + modals.openContextModal({ + modal: "enterNameModal", + title: "Редактирование статуса", + withCloseButton: true, + innerProps: { + onComplete: name => onUpdateStatus(status.id, { name }), + defaultValue: status.name, + }, + }); + }; + + return ( + + + {status.name} + + + + ); +}; + +export default StatusMobile; diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts b/src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts new file mode 100644 index 0000000..2ccd309 --- /dev/null +++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts @@ -0,0 +1,3 @@ +import BoardStatusesEditorDrawer from "@/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer"; + +export default BoardStatusesEditorDrawer; diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index da082e4..ed4372b 100644 --- a/src/app/deals/page.tsx +++ b/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() { +