From 5e6050db5345cc37b678685baa64017f1c0a06e2 Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Fri, 29 Dec 2023 19:43:13 +0530 Subject: [PATCH 01/12] fix the sticky behaviour of the top layout --- src/Components/Shifting/ShiftingBoard.tsx | 27 ++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx index a822d878076..b130aa25292 100644 --- a/src/Components/Shifting/ShiftingBoard.tsx +++ b/src/Components/Shifting/ShiftingBoard.tsx @@ -1,4 +1,11 @@ -import { useEffect, useState } from "react"; +import { + Dispatch, + SetStateAction, + useEffect, + useLayoutEffect, + useRef, + useState, +} from "react"; import { classNames, formatAge, formatDateTime } from "../../Utils/utils"; import { downloadShiftRequests } from "../../Redux/actions"; import { useDrag, useDrop } from "react-dnd"; @@ -23,6 +30,8 @@ interface boardProps { title?: string; filterProp: any; formatFilter: any; + setContainerHeight: Dispatch>; + containerHeight: number; } const reduceLoading = (action: string, current: any) => { @@ -257,7 +266,10 @@ export default function ShiftingBoard({ title, filterProp, formatFilter, + setContainerHeight, + containerHeight, }: boardProps) { + const containerRef = useRef(null); const [offset, setOffSet] = useState(0); const [isLoading, setIsLoading] = useState({ board: "BOARD", more: false }); const [{ isOver }, drop] = useDrop(() => ({ @@ -336,13 +348,22 @@ export default function ShiftingBoard({ )); }; + useLayoutEffect(() => { + const container = containerRef.current; + if (container) { + const { height } = container.getBoundingClientRect(); + containerHeight < height && setContainerHeight(height); + } + }, [containerHeight, data, setContainerHeight]); + return (
@@ -363,7 +384,7 @@ export default function ShiftingBoard({
-
+
{isLoading.board ? (
From 81d871c207317cb1cb52cd189f482341d8a5be00 Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Sun, 31 Dec 2023 18:17:50 +0530 Subject: [PATCH 02/12] add some height for the container --- src/Components/Shifting/ShiftingBoard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx index b130aa25292..9f62fb5ac85 100644 --- a/src/Components/Shifting/ShiftingBoard.tsx +++ b/src/Components/Shifting/ShiftingBoard.tsx @@ -363,7 +363,7 @@ export default function ShiftingBoard({ "mr-2 h-full w-full flex-shrink-0 rounded-md bg-gray-200 pb-4 md:w-1/2 lg:w-1/3 xl:w-1/4", isOver && "cursor-move" )} - style={{ minHeight: `${containerHeight}px` }} + style={{ minHeight: `${containerHeight + 100}px` }} >
From 3d99fa026f2c862d88e7e09abafcf9cff48a8fc0 Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Mon, 1 Jan 2024 14:33:33 +0530 Subject: [PATCH 03/12] update icons for the scroll and update UI --- src/Components/Shifting/BoardView.tsx | 76 ++++++++++++++++++++++----- 1 file changed, 63 insertions(+), 13 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index 9c96daa0e59..c0d6c89f816 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -14,7 +14,7 @@ import { formatFilter } from "./Commons"; import { navigate } from "raviger"; import useConfig from "../../Common/hooks/useConfig"; import useFilters from "../../Common/hooks/useFilters"; -import { lazy, useState } from "react"; +import { lazy, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import withScrolling from "react-dnd-scrolling"; import ButtonV2 from "../Common/components/ButtonV2"; @@ -56,9 +56,32 @@ export default function BoardView() { const [boardFilter, setBoardFilter] = useState(activeBoards); const [isLoading] = useState(false); const { t } = useTranslation(); + const containerRef = useRef(null); + const [containerHeight, setContainerHeight] = useState(0); + + const handleScroll = (direction: "right" | "left") => { + const container = containerRef.current; + + if (container) { + const scrollAmount = 360; + const currentScrollLeft = container.scrollLeft; + + if (direction === "left") { + container.scrollTo({ + left: currentScrollLeft - scrollAmount, + behavior: "smooth", + }); + } else if (direction === "right") { + container.scrollTo({ + left: currentScrollLeft + scrollAmount, + behavior: "smooth", + }); + } + } + }; return ( -
+
- -
+ +
{isLoading ? ( ) : ( - boardFilter.map((board) => ( - - )) + <> +
+ handleScroll("left")} + /> +
+
+ {boardFilter.map((board) => ( + + ))} +
+
+ handleScroll("right")} + /> +
+ )}
From 3e54f67f9b58279d96e37d5583470213b88cf89f Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Mon, 1 Jan 2024 14:34:01 +0530 Subject: [PATCH 04/12] update dependency for layout changes --- src/Components/Shifting/ShiftingBoard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx index 9f62fb5ac85..70b3374935a 100644 --- a/src/Components/Shifting/ShiftingBoard.tsx +++ b/src/Components/Shifting/ShiftingBoard.tsx @@ -354,7 +354,7 @@ export default function ShiftingBoard({ const { height } = container.getBoundingClientRect(); containerHeight < height && setContainerHeight(height); } - }, [containerHeight, data, setContainerHeight]); + }, [containerRef.current, data?.results.length]); return (
Date: Mon, 1 Jan 2024 15:06:57 +0530 Subject: [PATCH 05/12] refactor the icons component --- src/Components/Shifting/BoardView.tsx | 36 +++++++++++++-------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index c0d6c89f816..0c5cbc5319a 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -80,6 +80,22 @@ export default function BoardView() { } }; + const renderArrowIcons = (direction: "right" | "left") => { + return ( +
+ handleScroll(direction)} + /> +
+ ); + }; + return (
@@ -136,15 +152,7 @@ export default function BoardView() { ) : ( <> -
- handleScroll("left")} - /> -
+ {renderArrowIcons("left")}
))}
-
- handleScroll("right")} - /> -
+ {renderArrowIcons("right")} )}
From bf7eb1708a965d95cd18b8bfdd98f4eaf36b770a Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Sat, 13 Jan 2024 21:11:49 +0530 Subject: [PATCH 06/12] update the arrow on the sides --- src/Components/Shifting/BoardView.tsx | 32 +++++++++++++-------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index 0c5cbc5319a..aabb773149f 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -82,17 +82,17 @@ export default function BoardView() { const renderArrowIcons = (direction: "right" | "left") => { return ( -
- handleScroll(direction)} - /> -
+ //
+ handleScroll(direction)} + /> + //
); }; @@ -146,15 +146,15 @@ export default function BoardView() {
- -
+ +
{isLoading ? ( ) : ( - <> +
{renderArrowIcons("left")}
{boardFilter.map((board) => ( @@ -170,7 +170,7 @@ export default function BoardView() { ))}
{renderArrowIcons("right")} - +
)}
From e4cdc858e6e60e74babdfc883cc95761c124394a Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Sat, 13 Jan 2024 21:12:35 +0530 Subject: [PATCH 07/12] remove unwanted div --- src/Components/Shifting/BoardView.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index aabb773149f..d1aabd97ee1 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -82,17 +82,11 @@ export default function BoardView() { const renderArrowIcons = (direction: "right" | "left") => { return ( - //
handleScroll(direction)} /> - //
); }; From 13fe9e009981eea3dc35350668e0bd004c5ec253 Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Mon, 15 Jan 2024 20:51:54 +0530 Subject: [PATCH 08/12] update the icon UI and icon disable when there is no scroll available --- src/Components/Shifting/BoardView.tsx | 63 ++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 12 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index d1aabd97ee1..02cf4f27ae3 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -14,7 +14,7 @@ import { formatFilter } from "./Commons"; import { navigate } from "raviger"; import useConfig from "../../Common/hooks/useConfig"; import useFilters from "../../Common/hooks/useFilters"; -import { lazy, useRef, useState } from "react"; +import { lazy, useLayoutEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import withScrolling from "react-dnd-scrolling"; import ButtonV2 from "../Common/components/ButtonV2"; @@ -58,12 +58,37 @@ export default function BoardView() { const { t } = useTranslation(); const containerRef = useRef(null); const [containerHeight, setContainerHeight] = useState(0); + const [isLeftScrollable, setIsLeftScrollable] = useState(false); + const [isRightScrollable, setIsRightScrollable] = useState(false); - const handleScroll = (direction: "right" | "left") => { + useLayoutEffect(() => { const container = containerRef.current; + if (!container) return; + + const handleScroll = () => { + setIsLeftScrollable(container.scrollLeft > 0); + setIsRightScrollable( + container.scrollLeft + container.clientWidth < + container.scrollWidth - 10 + ); + }; + + container.addEventListener("scroll", handleScroll); + + handleScroll(); + + return () => { + container.removeEventListener("scroll", handleScroll); + }; + }, []); + + const handleOnClick = (direction: "right" | "left") => { + const container = containerRef.current; + if (direction === "left" ? !isLeftScrollable : !isRightScrollable) return; + if (container) { - const scrollAmount = 360; + const scrollAmount = 300; const currentScrollLeft = container.scrollLeft; if (direction === "left") { @@ -81,15 +106,29 @@ export default function BoardView() { }; const renderArrowIcons = (direction: "right" | "left") => { + const isIconEnable = + direction === "left" ? isLeftScrollable : isRightScrollable; return ( - handleScroll(direction)} - /> +
+ handleOnClick(direction)} + /> +
); }; + console.log("left", isLeftScrollable, "right", isRightScrollable); + return (
@@ -141,14 +180,14 @@ export default function BoardView() {
-
+
{isLoading ? ( ) : ( -
+ <> {renderArrowIcons("left")}
{boardFilter.map((board) => ( @@ -164,7 +203,7 @@ export default function BoardView() { ))}
{renderArrowIcons("right")} -
+ )}
From 66ba75f80a2a6639cda773f75e2486c641f4e85f Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Sat, 20 Jan 2024 15:09:02 +0530 Subject: [PATCH 09/12] remove the icon when there is no scrollable --- src/Components/Shifting/BoardView.tsx | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index b3d2b8ed39d..0d3b4f82336 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -110,21 +110,21 @@ export default function BoardView() { const isIconEnable = direction === "left" ? isLeftScrollable : isRightScrollable; return ( -
- handleOnClick(direction)} - /> -
+ > + handleOnClick(direction)} + /> +
+ ) ); }; From 422f881e6252c7648a5bf9bbc0fee460b69d3545 Mon Sep 17 00:00:00 2001 From: Nafil Arzzam <92790024+Arzzam@users.noreply.github.com> Date: Sat, 20 Jan 2024 15:11:50 +0530 Subject: [PATCH 10/12] update the class name of icon --- src/Components/Shifting/BoardView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index 0d3b4f82336..8596149a220 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -118,9 +118,7 @@ export default function BoardView() { > handleOnClick(direction)} />
From f5f2da7d14a44c375d7703cfc78b2a82a0dd35d3 Mon Sep 17 00:00:00 2001 From: Ashesh <3626859+Ashesh3@users.noreply.github.com> Date: Mon, 22 Jan 2024 20:58:41 +0530 Subject: [PATCH 11/12] Update src/Components/Shifting/BoardView.tsx --- src/Components/Shifting/BoardView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index 8596149a220..4513d9ece2c 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -126,7 +126,6 @@ export default function BoardView() { ); }; - console.log("left", isLeftScrollable, "right", isRightScrollable); return (
From 9ace4d4d167735e4477e2ff2d298d4b494b401a5 Mon Sep 17 00:00:00 2001 From: Ashesh <3626859+Ashesh3@users.noreply.github.com> Date: Mon, 22 Jan 2024 21:34:22 +0530 Subject: [PATCH 12/12] Update src/Components/Shifting/BoardView.tsx --- src/Components/Shifting/BoardView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx index 4513d9ece2c..6f6af362166 100644 --- a/src/Components/Shifting/BoardView.tsx +++ b/src/Components/Shifting/BoardView.tsx @@ -126,7 +126,6 @@ export default function BoardView() { ); }; - return (