88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
"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 { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
|
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";
|
|
|
|
const ProjectBoardsEditorDrawer: FC = () => {
|
|
const {
|
|
boards,
|
|
onUpdateBoard,
|
|
isEditorDrawerOpened,
|
|
setIsEditorDrawerOpened,
|
|
} = useBoardsContext();
|
|
const { selectedProject } = useProjectsContext();
|
|
const onClose = () => setIsEditorDrawerOpened(false);
|
|
|
|
const renderDraggable = () => (
|
|
<Box p={"xs"}>
|
|
<IconGripVertical />
|
|
</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) => {
|
|
onUpdateBoard(itemId, { lexorank: newLexorank });
|
|
};
|
|
|
|
return (
|
|
<Drawer
|
|
size={"100%"}
|
|
position={"right"}
|
|
onClose={onClose}
|
|
removeScrollProps={{ allowPinchZoom: true }}
|
|
withCloseButton={false}
|
|
opened={isEditorDrawerOpened}
|
|
trapFocus={false}
|
|
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>
|
|
<Divider />
|
|
<SortableDnd
|
|
initialItems={boards}
|
|
onDragEnd={onDragEnd}
|
|
renderItem={renderBoard}
|
|
renderDraggable={renderDraggable}
|
|
dragHandleStyle={{ width: "auto" }}
|
|
vertical
|
|
/>
|
|
<CreateBoardButton />
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default ProjectBoardsEditorDrawer;
|