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

feat: scrolls for statuses and boards

Browse Source
This commit is contained in:
AlexSserb
2025-08-01 12:28:40 +04:00
parent d13997ba80
commit 921ab4c89f
3 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,9 @@ const Boards = () => {
return ( return (
<ScrollArea <ScrollArea
offsetScrollbars={"y"} offsetScrollbars={"x"}
scrollbars={"x"}
scrollbarSize={0}
w={"100%"}> w={"100%"}>
<SortableDnd <SortableDnd
initialItems={boards} initialItems={boards}

16
src/app/deals/components/StatusColumn/StatusColumn.tsx
View File

@ -4,7 +4,7 @@ import {
SortableContext, SortableContext,
verticalListSortingStrategy, verticalListSortingStrategy,
} from "@dnd-kit/sortable"; } from "@dnd-kit/sortable";
import { Box, Text } from "@mantine/core"; import { Box, Stack, Text } from "@mantine/core";
import DealCard from "@/app/deals/components/DealCard/DealCard"; import DealCard from "@/app/deals/components/DealCard/DealCard";
import { SortableItem } from "@/components/SortableDnd/SortableItem"; import { SortableItem } from "@/components/SortableDnd/SortableItem";
import { DealSchema } from "@/types/DealSchema"; import { DealSchema } from "@/types/DealSchema";
@ -22,13 +22,21 @@ const StatusColumn = ({ id, title, deals }: BoardSectionProps) => {
const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]); const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]);
return ( return (
<Box style={{ backgroundColor: "#eee", padding: 2 }}> <Box
style={{
backgroundColor: "#eee",
padding: 2,
width: "15vw",
minWidth: 150,
}}>
<Text>{title}</Text> <Text>{title}</Text>
<SortableContext <SortableContext
id={id} id={id}
items={sortedDeals} items={sortedDeals}
strategy={verticalListSortingStrategy}> strategy={verticalListSortingStrategy}>
<div ref={setNodeRef}> <Stack
gap={"xs"}
ref={setNodeRef}>
{sortedDeals.map(deal => ( {sortedDeals.map(deal => (
<Box key={deal.id}> <Box key={deal.id}>
<SortableItem id={deal.id}> <SortableItem id={deal.id}>
@ -36,7 +44,7 @@ const StatusColumn = ({ id, title, deals }: BoardSectionProps) => {
</SortableItem> </SortableItem>
</Box> </Box>
))} ))}
</div> </Stack>
</SortableContext> </SortableContext>
</Box> </Box>
); );

55
src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
View File

@ -16,7 +16,7 @@ import {
import { sortableKeyboardCoordinates } from "@dnd-kit/sortable"; import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
import { LexoRank } from "lexorank"; import { LexoRank } from "lexorank";
import { throttle } from "lodash"; import { throttle } from "lodash";
import { Group } from "@mantine/core"; import { Group, ScrollArea } from "@mantine/core";
import DealCard from "@/app/deals/components/DealCard/DealCard"; import DealCard from "@/app/deals/components/DealCard/DealCard";
import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn"; import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
@ -183,30 +183,35 @@ const StatusColumnsDnd: FC<Props> = props => {
}; };
return ( return (
<DndContext <ScrollArea
sensors={sensors} offsetScrollbars={"x"}
collisionDetection={closestCorners} scrollbarSize={"0.5rem"}>
onDragStart={handleDragStart} <DndContext
onDragOver={handleDragOver} sensors={sensors}
onDragEnd={handleDragEnd}> collisionDetection={closestCorners}
<Group onDragStart={handleDragStart}
gap={"xs"} onDragOver={handleDragOver}
justify={"start"}> onDragEnd={handleDragEnd}>
{statuses.map(status => ( <Group
<StatusColumn gap={"xs"}
key={status.id} wrap={"nowrap"}
id={`${status.id}-status`} align={"start"}>
title={status.name} {statuses.map(status => (
deals={deals.filter( <StatusColumn
deal => deal.statusId === status.id key={status.id}
)} id={`${status.id}-status`}
/> title={status.name}
))} deals={deals.filter(
<DragOverlay dropAnimation={defaultDropAnimation}> deal => deal.statusId === status.id
{activeDeal ? <DealCard deal={activeDeal} /> : null} )}
</DragOverlay> />
</Group> ))}
</DndContext> <DragOverlay dropAnimation={defaultDropAnimation}>
{activeDeal ? <DealCard deal={activeDeal} /> : null}
</DragOverlay>
</Group>
</DndContext>
</ScrollArea>
); );
}; };