Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed scroll issue in shifting in facilities. #9268

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
15 changes: 14 additions & 1 deletion .gitattributes
Original file line number Diff line number Diff line change
@@ -1 +1,14 @@
* text=auto
scroll-bar
* text=auto


*.c text
*.h text

*.sln text eol=crlf

*.png binary
*.jpg binary

* text=auto
develop
Empty file modified .husky/pre-commit
100755 → 100644
Empty file.
11 changes: 10 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-scroll-area": "^1.2.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.2",
"@radix-ui/react-tooltip": "^1.1.4",
Expand Down
24 changes: 24 additions & 0 deletions src/CAREUI/display/ScrollableColumn.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";

import { ScrollArea } from "@/components/ui/scroll-area";

interface ScrollableColumnProps {
title: string;
children: React.ReactNode;
}

const ScrollableColumn: React.FC<ScrollableColumnProps> = ({
title,
children,
}) => {
return (
<div className="border border-gray-300 m-2">
<h3 className="text-lg font-semibold">{title}</h3>
<ScrollArea className="h-[400px] overflow-hidden">
<div className="flex flex-col">{children}</div>
</ScrollArea>
</div>
);
};

export default ScrollableColumn;
22 changes: 8 additions & 14 deletions src/components/Kanban/Board.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,14 @@ interface KanbanBoardProps<T extends { id: string }> {
}[];
itemRender: (item: T) => ReactNode;
}

export default function KanbanBoard<T extends { id: string }>(
props: KanbanBoardProps<T>,
) {
const board = useRef<HTMLDivElement>(null);

return (
<div className="h-[calc(100vh-114px)] md:h-[calc(100vh-50px)]">
<div className="flex flex-col items-end justify-between md:flex-row">
<div className="flex flex-col items-center justify-between md:flex-row">
<div>{props.title}</div>
<div className="flex items-center gap-2 py-2">
{[0, 1].map((button, i) => (
Expand All @@ -56,8 +55,9 @@ export default function KanbanBoard<T extends { id: string }>(
))}
</div>
</div>

<DragDropContext onDragEnd={props.onDragEnd}>
<div className="h-full overflow-scroll" ref={board}>
<div className="h-full overflow-x-auto overflow-y-hidden" ref={board}>
<div className="flex items-stretch px-0 pb-2">
{props.sections.map((section, i) => (
<KanbanSection<T>
Expand All @@ -73,7 +73,6 @@ export default function KanbanBoard<T extends { id: string }>(
</div>
);
}

export function KanbanSection<T extends { id: string }>(
props: Omit<KanbanBoardProps<T>, "sections" | "onDragEnd"> & {
section: KanbanBoardProps<T>["sections"][number];
Expand All @@ -92,8 +91,6 @@ export function KanbanSection<T extends { id: string }>(
const defaultLimit = 14;
const { t } = useTranslation();

// should be replaced with useInfiniteQuery when we move over to react query

const fetchNextPage = async (refresh: boolean = false) => {
if (!refresh && (fetchingNextPage || !hasMore)) return;
if (refresh) setPages([]);
Expand Down Expand Up @@ -121,7 +118,6 @@ export function KanbanSection<T extends { id: string }>(
const sectionElementHeight =
sectionRef.current?.getBoundingClientRect().height;
const scrolled = props.boardRef.current?.scrollTop;
// if user has scrolled 3/4th of the current items
if (
scrolled &&
sectionElementHeight &&
Expand All @@ -130,7 +126,6 @@ export function KanbanSection<T extends { id: string }>(
fetchNextPage();
}
};

props.boardRef.current?.addEventListener("scroll", onBoardReachEnd);
return () =>
props.boardRef.current?.removeEventListener("scroll", onBoardReachEnd);
Expand All @@ -139,15 +134,12 @@ export function KanbanSection<T extends { id: string }>(
useEffect(() => {
fetchNextPage(true);
}, [props.section]);

return (
<Droppable droppableId={section.id}>
{(provided) => (
<div
ref={provided.innerRef}
className={
"relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
}
className="relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
>
<div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">
<div className="mx-2 flex items-center justify-between rounded-lg border border-secondary-300 bg-white p-4">
Expand All @@ -159,7 +151,10 @@ export function KanbanSection<T extends { id: string }>(
</div>
</div>
</div>
<div ref={sectionRef}>
<div
ref={sectionRef}
className="h-[calc(100vh-180px)] overflow-y-auto"
>
{!fetchingNextPage && totalCount === 0 && (
<div className="flex items-center justify-center py-10 text-secondary-500">
{t("no_results_found")}
Expand Down Expand Up @@ -190,5 +185,4 @@ export function KanbanSection<T extends { id: string }>(
</Droppable>
);
}

export type KanbanBoardType = typeof KanbanBoard;