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

feat: boards on desktop as on mobile

Browse Source
This commit is contained in:
AlexSserb
2025-08-18 11:35:52 +04:00
parent 49b1a235be
commit 83432b3f33
15 changed files with 117 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/deals/components/desktop/Board/Board.module.css
View File

@ -1,7 +0,0 @@
.board {
min-width: 130px;
flex-wrap: nowrap;
gap: 3px;
}

67
src/app/deals/components/desktop/Board/Board.tsx
View File

@ -1,67 +0,0 @@
import React, { FC, useState } from "react";
import { Box, Flex, Group, Text } from "@mantine/core";
import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import { BoardSchema } from "@/lib/client";
import styles from "./Board.module.css";
type Props = {
board: BoardSchema;
};
const Board: FC<Props> = ({ board }) => {
const { selectedBoard } = useBoardsContext();
const isSelected = selectedBoard?.id === board.id;
const [isHovered, setIsHovered] = useState(false);
const { onUpdateBoard } = useBoardsContext();
return (
<Flex>
<SmallPageBlock
style={{
borderBottomColor: "dodgerblue",
borderBottomWidth: isSelected ? "3px" : undefined,
}}
active={isSelected}>
<Group
px={"md"}
py={"xs"}
bdrs={"lg"}
justify={"space-between"}
className={styles.board}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<InPlaceInput
defaultValue={board.name}
onComplete={value =>
onUpdateBoard(board.id, { name: value })
}
inputStyles={{
input: {
height: 25,
minHeight: 25,
},
}}
getChildren={startEditing => (
<>
<Box>
<Text>{board.name}</Text>
</Box>
<BoardMenu
isHovered={isHovered}
board={board}
startEditing={startEditing}
/>
</>
)}
modalTitle={"Редактирование доски"}
/>
</Group>
</SmallPageBlock>
</Flex>
);
};
export default Board;

52
src/app/deals/components/desktop/Boards/Boards.tsx
View File

@ -1,52 +0,0 @@
"use client";
import React from "react";
import { Group } from "@mantine/core";
import Board from "@/app/deals/components/desktop/Board/Board";
import CreateBoardButton from "@/app/deals/components/desktop/CreateBoardButton/CreateBoardButton";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import SortableDnd from "@/components/dnd/SortableDnd";
import useIsMobile from "@/hooks/useIsMobile";
import { BoardSchema } from "@/lib/client";
const Boards = () => {
const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
const isMobile = useIsMobile();
const renderBoard = (board: BoardSchema) => <Board board={board} />;
const onDragEnd = (itemId: number, newLexorank: string) => {
onUpdateBoard(itemId, { lexorank: newLexorank });
};
const selectBoard = (board: BoardSchema) => {
setSelectedBoard(board);
};
return (
<Group
wrap={"nowrap"}
gap={"md"}
pr={"sm"}
style={{ maxWidth: "100%", overflow: "hidden" }}>
<SortableDnd
initialItems={boards}
renderItem={renderBoard}
onDragEnd={onDragEnd}
onItemClick={selectBoard}
containerStyle={{
flexWrap: "nowrap",
gap: "var(--mantine-spacing-md)",
paddingBlock: "var(--mantine-spacing-md)",
paddingLeft: "var(--mantine-spacing-md)",
}}
dragHandleStyle={{ cursor: "pointer" }}
disabled={isMobile}
swiperEnabled
/>
<CreateBoardButton />
</Group>
);
};
export default Boards;

35
src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx
View File

@ -1,35 +0,0 @@
import { IconPlus } from "@tabler/icons-react";
import { Box } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
const CreateBoardButton = () => {
const { onCreateBoard } = useBoardsContext();
return (
<SmallPageBlock style={{ cursor: "pointer" }}>
<InPlaceInput
placeholder={"Название доски"}
onComplete={onCreateBoard}
getChildren={startEditing => (
<Box
p={"xs"}
onClick={startEditing}>
<IconPlus />
</Box>
)}
modalTitle={"Создание доски"}
inputStyles={{
wrapper: {
padding: 4,
marginLeft: 15,
marginRight: 15,
},
}}
/>
</SmallPageBlock>
);
};
export default CreateBoardButton;

29
src/app/deals/components/mobile/BoardMobile/BoardMobile.tsx
View File

@ -1,29 +0,0 @@
import React, { FC } from "react";
import classNames from "classnames";
import { Box, Text } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { BoardSchema } from "@/lib/client";
import styles from "./BoardMobile.module.css";
type Props = {
board: BoardSchema;
};
const BoardMobile: FC<Props> = ({ board }) => {
const { selectedBoard } = useBoardsContext();
return (
<Box
px={"md"}
py={"xs"}
className={classNames(
styles["board-mobile"],
selectedBoard?.id === board.id &&
styles["board-mobile-selected"]
)}>
<Text style={{ textWrap: "nowrap" }}>{board.name}</Text>
</Box>
);
};
export default BoardMobile;

4
src/app/deals/components/mobile/BoardMobile/BoardMobile.module.css → src/app/deals/components/shared/Board/Board.module.css
View File

@ -1,5 +1,5 @@
.board-mobile {
.board {
min-width: 50px;
flex-wrap: nowrap;
gap: 3px;
@ -8,7 +8,7 @@
border-bottom: 2px solid gray;
}
.board-mobile-selected {
.board-selected {
border: 2px solid gray;
border-bottom: 0;
}

63
src/app/deals/components/shared/Board/Board.tsx Normal file
View File

@ -0,0 +1,63 @@
import React, { FC, useState } from "react";
import classNames from "classnames";
import { Box, Group, Text } from "@mantine/core";
import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import useIsMobile from "@/hooks/useIsMobile";
import { BoardSchema } from "@/lib/client";
import styles from "./Board.module.css";
type Props = {
board: BoardSchema;
};
const Board: FC<Props> = ({ board }) => {
const { selectedBoard, onUpdateBoard } = useBoardsContext();
const isMobile = useIsMobile();
const [isHovered, setIsHovered] = useState(false);
return (
<Group
px={"md"}
py={"xs"}
className={classNames(
styles.board,
selectedBoard?.id === board.id && styles["board-selected"]
)}
justify={"space-between"}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<InPlaceInput
defaultValue={board.name}
onComplete={value => onUpdateBoard(board.id, { name: value })}
inputStyles={{
input: {
height: 25,
minHeight: 25,
},
}}
getChildren={startEditing => (
<>
<Box>
<Text style={{ textWrap: "nowrap" }}>
{board.name}
</Text>
</Box>
<BoardMenu
isHovered={
!isMobile &&
(selectedBoard?.id === board.id || isHovered)
}
board={board}
startEditing={startEditing}
/>
</>
)}
modalTitle={"Редактирование доски"}
/>
</Group>
);
};
export default Board;

16
src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx → src/app/deals/components/shared/Boards/Boards.tsx
View File

@ -2,18 +2,18 @@
import React from "react";
import { Group, ScrollArea } from "@mantine/core";
import BoardMobile from "@/app/deals/components/mobile/BoardMobile/BoardMobile";
import CreateBoardButtonMobile from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile";
import Board from "@/app/deals/components/shared/Board/Board";
import CreateBoardButton from "@/app/deals/components/shared/CreateBoardButton/CreateBoardButton";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import SortableDnd from "@/components/dnd/SortableDnd";
import useIsMobile from "@/hooks/useIsMobile";
import { BoardSchema } from "@/lib/client";
const BoardsMobile = () => {
const Boards = () => {
const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
const isMobile = useIsMobile();
const renderBoard = (board: BoardSchema) => <BoardMobile board={board} />;
const renderBoard = (board: BoardSchema) => <Board board={board} />;
const onDragEnd = (itemId: number, newLexorank: string) => {
onUpdateBoard(itemId, { lexorank: newLexorank });
@ -28,8 +28,8 @@ const BoardsMobile = () => {
offsetScrollbars={"x"}
scrollbars={"x"}
scrollbarSize={0}
w={"100vw"}
mt={5}
w={"100%"}
mt={"xs"}
mb={"sm"}>
<Group
wrap={"nowrap"}
@ -43,10 +43,10 @@ const BoardsMobile = () => {
dragHandleStyle={{ cursor: "pointer" }}
disabled={isMobile}
/>
<CreateBoardButtonMobile />
<CreateBoardButton />
</Group>
</ScrollArea>
);
};
export default BoardsMobile;
export default Boards;

4
src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css → src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.module.css
View File

@ -1,11 +1,11 @@
.create-button {
padding: 8px 10px 9px;
padding: 10px 10px 9px;
border-bottom: 2px solid gray;
}
.spacer {
height: 43px;
height: 45px;
border-bottom: 2px solid gray;
width: 100%;
}

6
src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx → src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.tsx
View File

@ -1,10 +1,10 @@
import { IconPlus } from "@tabler/icons-react";
import { Box, Space } from "@mantine/core";
import styles from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import styles from "./CreateBoardButton.module.css";
const CreateBoardButtonMobile = () => {
const CreateBoardButton = () => {
const { onCreateBoard } = useBoardsContext();
return (
@ -32,4 +32,4 @@ const CreateBoardButtonMobile = () => {
);
};
export default CreateBoardButtonMobile;
export default CreateBoardButton;

42
src/app/deals/components/shared/Header/Header.tsx
View File

@ -2,8 +2,7 @@
import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
import { Box, Group, Stack, Text } from "@mantine/core";
import Boards from "@/app/deals/components/desktop/Boards/Boards";
import BoardsMobile from "@/app/deals/components/mobile/BoardsMobile/BoardsMobile";
import Boards from "@/app/deals/components/shared/Boards/Boards";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
@ -24,10 +23,9 @@ const Header = () => {
return (
<Group
w={"100%"}
justify={"space-between"}
justify={"end"}
wrap={"nowrap"}
pr={"md"}>
<Boards />
<Group wrap={"nowrap"}>
<ColorSchemeToggle />
<ProjectSelect
@ -42,22 +40,19 @@ const Header = () => {
const getMobileHeader = () => {
return (
<Stack gap={0}>
<Group justify={"space-between"}>
<Box
p={"md"}
onClick={() => setIsProjectsDrawerOpened(true)}>
<IconChevronLeft />
</Box>
<Text>{selectedProject?.name}</Text>
<Box
p={"md"}
onClick={() => setIsEditorDrawerOpened(true)}>
<IconSettings />
</Box>
</Group>
<BoardsMobile />
</Stack>
<Group justify={"space-between"}>
<Box
p={"md"}
onClick={() => setIsProjectsDrawerOpened(true)}>
<IconChevronLeft />
</Box>
<Text>{selectedProject?.name}</Text>
<Box
p={"md"}
onClick={() => setIsEditorDrawerOpened(true)}>
<IconSettings />
</Box>
</Group>
);
};
@ -65,7 +60,12 @@ const Header = () => {
<Group
justify={"flex-end"}
w={"100%"}>
{isMobile ? getMobileHeader() : getDesktopHeader()}
<Stack
gap={0}
w={"100%"}>
{isMobile ? getMobileHeader() : getDesktopHeader()}
<Boards />
</Stack>
</Group>
);
};