Enhance UI of Shifting Board (#6956)

* fix the sticky behaviour of the top layout * add some height for the container * update icons for the scroll and update UI * update dependency for layout changes * refactor the icons component * update the arrow on the sides * remove unwanted div * update the icon UI and icon disable when there is no scroll available * remove the icon when there is no scrollable * update the class name of icon * Update src/Components/Shifting/BoardView.tsx * Update src/Components/Shifting/BoardView.tsx --------- Co-authored-by: Ashesh <[email protected]>
ohcnetwork · Jan 23, 2024 · 20cac43 · 20cac43
1 parent b9544b5
commit 20cac43
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 16 deletions.
diff --git 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, useLayoutEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import withScrolling from "react-dnd-scrolling";
 import ButtonV2 from "../Common/components/ButtonV2";
@@ -57,9 +57,77 @@ export default function BoardView() {
   const [boardFilter, setBoardFilter] = useState(activeBoards);
   const [isLoading] = useState(false);
   const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number>(0);
+  const [isLeftScrollable, setIsLeftScrollable] = useState<boolean>(false);
+  const [isRightScrollable, setIsRightScrollable] = useState<boolean>(false);
+
+  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 = 300;
+      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",
+        });
+      }
+    }
+  };
+
+  const renderArrowIcons = (direction: "right" | "left") => {
+    const isIconEnable =
+      direction === "left" ? isLeftScrollable : isRightScrollable;
+    return (
+      isIconEnable && (
+        <div
+          className={`relative z-20 self-center ${
+            direction === "right" ? "-left-12" : ""
+          }`}
+        >
+          <CareIcon
+            icon={`l-arrow-${direction}`}
+            className="absolute inset-y-0 left-0 z-10 h-10 w-10 cursor-pointer hover:opacity-100"
+            onClick={() => handleOnClick(direction)}
+          />
+        </div>
+      )
+    );
+  };
 
   return (
-    <div className="flex h-screen flex-col px-2 pb-2">
+    <div className="max-h[95vh] flex min-h-full max-w-[100vw] flex-col px-2 pb-2">
       <div className="flex w-full flex-col items-center justify-between lg:flex-row">
         <div className="w-1/3 lg:w-1/4">
           <PageTitle
@@ -108,20 +176,31 @@ export default function BoardView() {
         </div>
       </div>
       <BadgesList {...{ qParams, FilterBadges }} />
-      <ScrollingComponent className="mt-4 flex flex-1 items-start overflow-x-scroll px-4 pb-2">
-        <div className="mt-4 flex flex-1 items-start overflow-x-scroll px-2 pb-2">
+      <ScrollingComponent className="relative mt-4 flex max-h-[80vh] w-full items-start pb-2">
+        <div className="mt-4 flex min-h-full w-full flex-1 items-start pb-2">
           {isLoading ? (
             <Loading />
           ) : (
-            boardFilter.map((board) => (
-              <ShiftingBoard
-                key={board.text}
-                filterProp={qParams}
-                board={board.text}
-                title={board.label}
-                formatFilter={formatFilter}
-              />
-            ))
+            <>
+              {renderArrowIcons("left")}
+              <div
+                className="mx-11 flex max-h-[75vh] w-full flex-row overflow-y-auto overflow-x-hidden"
+                ref={containerRef}
+              >
+                {boardFilter.map((board) => (
+                  <ShiftingBoard
+                    key={board.text}
+                    filterProp={qParams}
+                    board={board.text}
+                    title={board.label}
+                    formatFilter={formatFilter}
+                    setContainerHeight={setContainerHeight}
+                    containerHeight={containerHeight}
+                  />
+                ))}
+              </div>
+              {renderArrowIcons("right")}
+            </>
           )}
         </div>
       </ScrollingComponent>

diff --git 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<SetStateAction<number>>;
+  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<HTMLDivElement>(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);
+    }
+  }, [containerRef.current, data?.results.length]);
+
   return (
     <div
       ref={drop}
       className={classNames(
-        "mr-2 h-full w-full flex-shrink-0 overflow-y-auto rounded-md bg-gray-200 pb-4 md:w-1/2 lg:w-1/3 xl:w-1/4",
+        "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 + 100}px` }}
     >
       <div className="sticky top-0 z-10 rounded bg-gray-200 pt-2">
         <div className="mx-2 flex items-center justify-between rounded bg-white p-4 shadow">
@@ -363,7 +384,7 @@ export default function ShiftingBoard({
           </span>
         </div>
       </div>
-      <div className="mt-2 flex flex-col pb-2 text-sm">
+      <div ref={containerRef} className="mt-2 flex flex-col pb-2 text-sm">
         {isLoading.board ? (
           <div className="m-1">
             <div className="mx-auto w-full max-w-sm rounded-md border border-gray-300 bg-white p-4 shadow">