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 10:13:25 +04:00
parent 5ecdd3d887
commit e3137de46d
11 changed files with 166 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/deals/components/Boards/Boards.tsx
View File

@ -36,7 +36,7 @@ const Boards = () => {
renderItem={renderBoard}
onDragEnd={onDragEnd}
onItemClick={selectBoard}
rowStyle={{ flexWrap: "nowrap" }}
containerStyle={{ flexWrap: "nowrap" }}
disabled={isMobile}
/>
<CreateBoardButton />

4
src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx
View File

@ -7,7 +7,9 @@ const CreateBoardButton = () => {
const { onCreateBoard } = useBoardsContext();
return (
<Box style={{ cursor: "pointer" }}>
<Box
style={{ cursor: "pointer" }}
pr={"md"}>
<InPlaceInput
placeholder={"Название доски"}
onComplete={onCreateBoard}

36
src/app/deals/components/Header/Header.tsx
View File

@ -1,22 +1,50 @@
"use client";
import { Group } from "@mantine/core";
import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
import { isMobile } from "react-device-detect";
import { Box, Group, Text } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
const Header = () => {
const { projects, setSelectedProject, selectedProject } =
useProjectsContext();
const { setIsEditorDrawerOpened } = useBoardsContext();
const getDesktopHeader = () => {
return (
<Group
justify={"flex-end"}
w={"100%"}>
<ProjectSelect
data={projects}
value={selectedProject}
onChange={value => value && setSelectedProject(value)}
/>
);
};
const getMobileHeader = () => {
return (
<Group
justify={"space-between"}
w={"100%"}>
<Box p={"md"}>
<IconChevronLeft />
</Box>
<Text>{selectedProject?.name}</Text>
<Box
p={"md"}
onClick={() => setIsEditorDrawerOpened(true)}>
<IconSettings />
</Box>
</Group>
);
};
return (
<Group
justify={"flex-end"}
w={"100%"}>
{isMobile ? getMobileHeader() : getDesktopHeader()}
</Group>
);
};

6
src/app/deals/contexts/BoardsContext.tsx
View File

@ -21,6 +21,8 @@ type BoardsContextState = {
onCreateBoard: (name: string) => void;
onUpdateBoard: (boardId: number, board: UpdateBoardSchema) => void;
onDeleteBoard: (board: BoardSchema) => void;
isEditorDrawerOpened: boolean;
setIsEditorDrawerOpened: React.Dispatch<React.SetStateAction<boolean>>;
};
const BoardsContext = createContext<BoardsContextState | undefined>(undefined);
@ -35,6 +37,8 @@ const useBoardsContextState = () => {
const [selectedBoard, setSelectedBoard] = useState<BoardSchema | null>(
null
);
const [isEditorDrawerOpened, setIsEditorDrawerOpened] =
useState<boolean>(false);
useEffect(() => {
if (boards.length > 0 && selectedBoard === null) {
@ -70,6 +74,8 @@ const useBoardsContextState = () => {
onCreateBoard,
onUpdateBoard,
onDeleteBoard,
isEditorDrawerOpened,
setIsEditorDrawerOpened,
};
};

69
src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx Normal file
View File

@ -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;

30
src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButtonMobile.tsx Normal file
View File

@ -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;

3
src/app/deals/drawers/ProjectBoardsEditorDrawer/index.ts Normal file
View File

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

2
src/app/deals/page.tsx
View File

@ -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 ProjectBoardsEditorDrawer from "@/app/deals/drawers/ProjectBoardsEditorDrawer";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import PageContainer from "@/components/layout/PageContainer/PageContainer";
import { DealsContextProvider } from "./contexts/DealsContext";
@ -23,6 +24,7 @@ export default function DealsPage() {
<Funnel />
</DealsContextProvider>
</StatusesContextProvider>
<ProjectBoardsEditorDrawer />
</BoardsContextProvider>
</ProjectsContextProvider>
</PageBlock>

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

@ -10,7 +10,7 @@ import React, {
import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
import { SortableContext } from "@dnd-kit/sortable";
import { LexoRank } from "lexorank";
import { Box, Group } from "@mantine/core";
import { Box, Flex } from "@mantine/core";
import useDndSensors from "@/app/deals/hooks/useSensors";
import { SortableOverlay } from "@/components/dnd/SortableDnd/SortableOverlay";
import SortableItem from "@/components/dnd/SortableItem";
@ -25,9 +25,10 @@ type Props<T extends BaseItem> = {
initialItems: T[];
renderItem: (item: T) => ReactNode;
onDragEnd: (itemId: number, newLexorank: string) => void;
onItemClick: (item: T) => void;
rowStyle?: CSSProperties;
onItemClick?: (item: T) => void;
containerStyle?: CSSProperties;
itemStyle?: CSSProperties;
vertical?: boolean;
disabled?: boolean;
};
@ -36,8 +37,9 @@ const SortableDnd = <T extends BaseItem>({
renderItem,
onDragEnd,
onItemClick,
rowStyle,
containerStyle,
itemStyle,
vertical,
disabled = false,
}: Props<T>) => {
const [active, setActive] = useState<Active | null>(null);
@ -100,14 +102,19 @@ const SortableDnd = <T extends BaseItem>({
<SortableContext
items={items}
disabled={disabled}>
<Group
<Flex
gap={0}
style={rowStyle}
style={{
flexWrap: "nowrap",
flexDirection: vertical ? "column" : "row",
...containerStyle,
}}
role="application">
{items.map((item, index) => (
<Box
key={index}
onClick={e => {
if (!onItemClick) return;
e.preventDefault();
e.stopPropagation();
onItemClick(item);
@ -121,7 +128,7 @@ const SortableDnd = <T extends BaseItem>({
</SortableItem>
</Box>
))}
</Group>
</Flex>
</SortableContext>
<SortableOverlay>
{activeItem ? renderItem(activeItem) : null}

4
src/components/layout/PageBlock/PageBlock.module.css
View File

@ -1,5 +1,4 @@
.container {
border-radius: rem(40);
background-color: white;
@mixin dark {
background-color: var(--mantine-color-dark-8);
@ -8,7 +7,10 @@
@mixin light {
box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
}
@media (min-width: 48em) {
padding: rem(35);
border-radius: rem(40);
}
}
.container-full-height {

2
src/modals/EnterNameModal/EnterNameModal.tsx
View File

@ -20,7 +20,7 @@ const EnterNameModal = ({
}: ContextModalProps<Props>) => {
const form = useForm<FormType>({
initialValues: {
name: innerProps.defaultValue,
name: innerProps.defaultValue ?? "",
},
validate: {
name: name => !name && "Введите название",