fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: boards dnd editor for mobile

Browse Source
This commit is contained in:
AlexSserb
2025-08-09 15:51:23 +04:00
parent e3137de46d
commit 9fb9e794db
9 changed files with 139 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/deals/components/Board/Board.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useState } from "react";
import React, { CSSProperties, FC, useState } from "react";
import { Box, Group, Text } from "@mantine/core";
import BoardMenu from "@/app/deals/components/Board/BoardMenu";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
@ -7,9 +7,10 @@ import { BoardSchema } from "@/lib/client";
type Props = {
board: BoardSchema;
containerStyle?: CSSProperties;
};
const Board: FC<Props> = ({ board }) => {
const Board: FC<Props> = ({ board, containerStyle }) => {
const [isHovered, setIsHovered] = useState(false);
const { onUpdateBoard } = useBoardsContext();
@ -20,7 +21,7 @@ const Board: FC<Props> = ({ board }) => {
py={"xs"}
justify={"space-between"}
wrap={"nowrap"}
style={{ borderWidth: 1 }}
style={{ ...containerStyle, borderWidth: 1 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<InPlaceInput

7
src/app/deals/components/Board/BoardMenu.tsx
View File

@ -6,12 +6,13 @@ import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { BoardSchema } from "@/lib/client";
type Props = {
isHovered: boolean;
board: BoardSchema;
startEditing: () => void;
isHovered?: boolean;
menuIconSize?: number;
};
const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true, menuIconSize = 16 }) => {
const { selectedBoard, onDeleteBoard } = useBoardsContext();
return (
@ -28,7 +29,7 @@ const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
cursor: "pointer",
}}
onClick={e => e.stopPropagation()}>
<IconDotsVertical size={16} />
<IconDotsVertical size={menuIconSize} />
</Box>
</Menu.Target>
<Menu.Dropdown>

6
src/app/deals/components/DealContainer/DealContainer.tsx
View File

@ -17,9 +17,9 @@ const DealContainer: FC<Props> = ({ deal, disabled = false }) => {
<SortableItem
disabled={disabled}
dragHandleStyle={{ cursor: "pointer" }}
id={deal.id}>
{dealBody}
</SortableItem>
id={deal.id}
renderItem={() => dealBody}
/>
</Box>
);
};

35
src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx
View File

@ -1,12 +1,12 @@
"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 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 { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import CreateBoardButtonMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile";
import BoardMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile";
import CreateBoardButton from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton";
import SortableDnd from "@/components/dnd/SortableDnd";
import { BoardSchema } from "@/lib/client";
@ -20,8 +20,22 @@ const ProjectBoardsEditorDrawer: FC = () => {
const { selectedProject } = useProjectsContext();
const onClose = () => setIsEditorDrawerOpened(false);
const renderBoard = (board: BoardSchema) => {
return <Board board={board} />;
const renderDraggable = () => (
<Box p={"xs"}>
<IconGripVertical size={22} />
</Box>
);
const renderBoard = (
board: BoardSchema,
renderDraggable?: (item: BoardSchema) => ReactNode
) => {
return (
<Group wrap={"nowrap"}>
{renderDraggable && renderDraggable(board)}
<BoardMobile board={board} />
</Group>
);
};
const onDragEnd = (itemId: number, newLexorank: string) => {
@ -55,13 +69,16 @@ const ProjectBoardsEditorDrawer: FC = () => {
</Center>
<Box p={"lg"} />
</Group>
<Divider />
<SortableDnd
initialItems={boards}
renderItem={renderBoard}
onDragEnd={onDragEnd}
renderItem={renderBoard}
renderDraggable={renderDraggable}
dragHandleStyle={{ width: "auto" }}
vertical
/>
<CreateBoardButtonMobile />
<CreateBoardButton />
</Drawer>
);
};

46
src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx Normal file
View File

@ -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 { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { BoardSchema } from "@/lib/client";
type Props = {
board: BoardSchema;
};
const BoardMobile: FC<Props> = ({ board }) => {
const { onUpdateBoard } = useBoardsContext();
const startEditing = () => {
modals.openContextModal({
modal: "enterNameModal",
title: "Редактирование доски",
withCloseButton: true,
innerProps: {
onComplete: name => onUpdateBoard(board.id, { name }),
defaultValue: board.name,
},
});
};
return (
<Group
w={"100%"}
pr={"md"}
py={"xs"}
justify={"space-between"}
wrap={"nowrap"}>
<Box>
<Text>{board.name}</Text>
</Box>
<BoardMenu
board={board}
startEditing={startEditing}
menuIconSize={22}
/>
</Group>
);
};
export default BoardMobile;

6
src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile.tsx → src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton.tsx
View File

@ -3,7 +3,7 @@ import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
const CreateBoardButtonMobile = () => {
const CreateBoardButton = () => {
const { onCreateBoard } = useBoardsContext();
const onStartCreating = () => {
@ -18,7 +18,7 @@ const CreateBoardButtonMobile = () => {
};
return (
<Group onClick={onStartCreating}>
<Group ml={"xs"} onClick={onStartCreating}>
<IconPlus />
<Box mt={5}>
<Text>Создать доску</Text>
@ -27,4 +27,4 @@ const CreateBoardButtonMobile = () => {
);
};
export default CreateBoardButtonMobile;
export default CreateBoardButton;

22
src/components/dnd/FunnelDnd/FunnelDnd.tsx
View File

@ -84,16 +84,18 @@ const FunnelDnd = <
<SortableItem
key={containerId}
id={containerId}
disabled={disabled}>
{renderContainer(
container,
<FunnelColumn
id={containerId}
items={containerItems}
renderItem={renderItem}
/>
)}
</SortableItem>
disabled={disabled}
renderItem={() =>
renderContainer(
container,
<FunnelColumn
id={containerId}
items={containerItems}
renderItem={renderItem}
/>
)
}
/>
);
})}
<FunnelOverlay

29
src/components/dnd/SortableDnd/SortableDnd.tsx
View File

@ -23,11 +23,15 @@ type BaseItem = {
type Props<T extends BaseItem> = {
initialItems: T[];
renderItem: (item: T) => ReactNode;
renderItem: (
item: T,
renderDraggable?: (item: T) => ReactNode
) => ReactNode;
renderDraggable?: (item: T) => ReactNode; // if not passed - the whole item renders as draggable
dragHandleStyle?: CSSProperties;
onDragEnd: (itemId: number, newLexorank: string) => void;
onItemClick?: (item: T) => void;
containerStyle?: CSSProperties;
itemStyle?: CSSProperties;
vertical?: boolean;
disabled?: boolean;
};
@ -35,10 +39,11 @@ type Props<T extends BaseItem> = {
const SortableDnd = <T extends BaseItem>({
initialItems,
renderItem,
renderDraggable,
dragHandleStyle,
onDragEnd,
onItemClick,
containerStyle,
itemStyle,
vertical,
disabled = false,
}: Props<T>) => {
@ -120,18 +125,24 @@ const SortableDnd = <T extends BaseItem>({
onItemClick(item);
}}>
<SortableItem
dragHandleStyle={{ cursor: "pointer" }}
itemStyle={itemStyle}
id={item.id}
disabled={disabled}>
{renderItem(item)}
</SortableItem>
disabled={disabled}
renderItem={renderDraggable =>
renderItem(item, renderDraggable)
}
renderDraggable={
renderDraggable
? () => renderDraggable(item)
: undefined
}
dragHandleStyle={dragHandleStyle}
/>
</Box>
))}
</Flex>
</SortableContext>
<SortableOverlay>
{activeItem ? renderItem(activeItem) : null}
{activeItem ? renderItem(activeItem, renderDraggable) : null}
</SortableOverlay>
</DndContext>
);

30
src/components/dnd/SortableItem/SortableItem.tsx
View File

@ -1,4 +1,4 @@
import React, { CSSProperties, PropsWithChildren, useMemo } from "react";
import React, { CSSProperties, ReactNode, useMemo } from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import DragHandle from "./DragHandle";
@ -6,18 +6,19 @@ import SortableItemContext from "./SortableItemContext";
type Props = {
id: number | string;
itemStyle?: CSSProperties;
dragHandleStyle?: CSSProperties;
renderItem: (renderDraggable?: () => ReactNode) => ReactNode;
renderDraggable?: () => ReactNode; // if not passed - the whole item renders as draggable
disabled?: boolean;
dragHandleStyle?: CSSProperties;
};
const SortableItem = ({
children,
itemStyle,
id,
renderItem,
dragHandleStyle,
renderDraggable,
id,
disabled,
}: PropsWithChildren<Props>) => {
}: Props) => {
const {
attributes,
isDragging,
@ -41,15 +42,26 @@ const SortableItem = ({
opacity: isDragging ? 0.4 : undefined,
transform: CSS.Translate.toString(transform),
transition,
...itemStyle,
};
const renderDragHandle = () => (
<DragHandle style={dragHandleStyle}>
{renderDraggable && renderDraggable()}
</DragHandle>
);
return (
<SortableItemContext.Provider value={context}>
<div
ref={setNodeRef}
style={style}>
<DragHandle style={dragHandleStyle}>{children}</DragHandle>
{renderDraggable ? (
renderItem(renderDragHandle)
) : (
<DragHandle style={dragHandleStyle}>
{renderItem()}
</DragHandle>
)}
</div>
</SortableItemContext.Provider>
);