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

14
src/app/deals/components/mobile/BoardMobile/BoardMobile.module.css
View File

@ -1,14 +0,0 @@
.board-mobile {
min-width: 50px;
flex-wrap: nowrap;
gap: 3px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 2px solid gray;
}
.board-mobile-selected {
border: 2px solid gray;
border-bottom: 0;
}

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;

52
src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx
View File

@ -1,52 +0,0 @@
"use client";
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 { 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, setSelectedBoard, onUpdateBoard } = useBoardsContext();
const isMobile = useIsMobile();
const renderBoard = (board: BoardSchema) => <BoardMobile board={board} />;
const onDragEnd = (itemId: number, newLexorank: string) => {
onUpdateBoard(itemId, { lexorank: newLexorank });
};
const selectBoard = (board: BoardSchema) => {
setSelectedBoard(board);
};
return (
<ScrollArea
offsetScrollbars={"x"}
scrollbars={"x"}
scrollbarSize={0}
w={"100vw"}
mt={5}
mb={"sm"}>
<Group
wrap={"nowrap"}
gap={0}>
<SortableDnd
initialItems={boards}
renderItem={renderBoard}
onDragEnd={onDragEnd}
onItemClick={selectBoard}
containerStyle={{ flexWrap: "nowrap" }}
dragHandleStyle={{ cursor: "pointer" }}
disabled={isMobile}
/>
<CreateBoardButtonMobile />
</Group>
</ScrollArea>
);
};
export default BoardsMobile;

11
src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css
View File

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

35
src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx
View File

@ -1,35 +0,0 @@
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";
const CreateBoardButtonMobile = () => {
const { onCreateBoard } = useBoardsContext();
return (
<>
<InPlaceInput
placeholder={"Название доски"}
onComplete={onCreateBoard}
getChildren={startEditing => (
<Box
onClick={startEditing}
className={styles["create-button"]}>
<IconPlus />
</Box>
)}
modalTitle={"Создание доски"}
inputStyles={{
wrapper: {
marginLeft: 15,
marginRight: 15,
},
}}
/>
<Space className={styles.spacer} />
</>
);
};
export default CreateBoardButtonMobile;