PSP-9630: Historical File on Header - ability to hide Historical File…

… Numbers when headers is expanded (#4593) * PSP-9630 fix * Fix based on feedback from code review. * Changing naming on a variable --------- Co-authored-by: Alejandro Sanchez <[email protected]>
bcgov · Jan 14, 2025 · 91bb7d4 · 91bb7d4
1 parent 53a91a1
commit 91bb7d4
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 85 deletions.
diff --git a/source/frontend/src/components/common/ExpandableTextList.tsx b/source/frontend/src/components/common/ExpandableTextList.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactElement, useState } from 'react';
+import { Fragment, ReactElement, useEffect, useState } from 'react';
 
 import { exists } from '@/utils/utils';
 
@@ -10,6 +10,7 @@ export interface IExpandableTextListProps<T> {
   keyFunction: (item: T, index: number) => string;
   delimiter?: ReactElement | string;
   maxCollapsedLength?: number;
+  maxExpandedLength?: number;
   className?: string;
   moreText?: string;
   hideText?: string;
@@ -25,12 +26,39 @@ export function ExpandableTextList<T>({
   renderFunction,
   delimiter,
   maxCollapsedLength,
+  maxExpandedLength,
   moreText,
   hideText,
 }: IExpandableTextListProps<T>) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const displayedItemsLength = !isExpanded ? maxCollapsedLength ?? items.length : items.length;
+  const [displayedItemsLength, setDisplayedItemsLength] = useState(
+    !isExpanded ? maxCollapsedLength ?? items.length : maxExpandedLength ?? items.length,
+  );
   const displayedItems = items.slice(0, displayedItemsLength);
+
+  const updateDisplayedItemsLength = () => {
+    if (maxExpandedLength !== undefined && displayedItemsLength < items.length) {
+      const remainingItems = items.length - displayedItemsLength;
+      if (remainingItems >= maxExpandedLength) {
+        setDisplayedItemsLength(displayedItemsLength + maxExpandedLength);
+      } else {
+        setDisplayedItemsLength(displayedItemsLength + remainingItems);
+      }
+    } else {
+      setIsExpanded(prevState => !prevState);
+    }
+  };
+
+  useEffect(() => {
+    setDisplayedItemsLength(!isExpanded ? maxCollapsedLength ?? items.length : items.length);
+  }, [isExpanded, items.length, maxCollapsedLength]);
+
+  useEffect(() => {
+    if (displayedItemsLength === items.length) {
+      setIsExpanded(true);
+    }
+  }, [displayedItemsLength, items.length]);
+
   return (
     <Fragment>
       {displayedItems.map((item: T, index: number) => (
@@ -40,7 +68,7 @@ export function ExpandableTextList<T>({
         </span>
       ))}
       {exists(maxCollapsedLength) && maxCollapsedLength < items.length && (
-        <LinkButton data-testid="expand" onClick={() => setIsExpanded(collapse => !collapse)}>
+        <LinkButton data-testid="expand" onClick={() => updateDisplayedItemsLength()}>
           {isExpanded
             ? hideText ?? 'hide'
             : `[+${items.length - displayedItemsLength} ${moreText ?? 'more...'}]`}

diff --git a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx
@@ -77,7 +77,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
   const hasLocation = exists(longitude) && exists(latitude);
 
   return (
-    <>
+    <HeaderMaxWidthHeight>
       <LoadingBackdrop show={isLoading} parentScreen={true} />
       <Row className="no-gutters">
         <Col xs="7">
@@ -134,7 +134,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
         </Col>
       </Row>
       <StyledDivider />
-    </>
+    </HeaderMaxWidthHeight>
   );
 };
 
@@ -145,6 +145,12 @@ const StyledDivider = styled.div`
   border-bottom-width: 0.1rem;
 `;
 
+const HeaderMaxWidthHeight = styled.div`
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 50rem;
+`;
+
 export const PropertyStyleStatus = styled(InlineFlexDiv)`
   text-transform: uppercase;
   color: ${props => props.theme.css.textWarningColor};

diff --git a/...frontend/src/features/mapSideBar/property/__snapshots__/MotiInventoryHeader.test.tsx.snap b/...frontend/src/features/mapSideBar/property/__snapshots__/MotiInventoryHeader.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`MotiInventoryHeader component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c0 {
+  .c1 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c1 {
+.c2 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -22,118 +22,128 @@ exports[`MotiInventoryHeader component > renders as expected 1`] = `
   flex-direction: column;
 }
 
+.c3 {
+  margin-top: 0.5rem;
+  border-bottom-style: solid;
+  border-bottom-color: grey;
+  border-bottom-width: 0.1rem;
+}
+
+.c0 {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 50rem;
+}
+
 <div
-    class="no-gutters row"
+    class="c0"
   >
     <div
-      class="col-7"
+      class="no-gutters row"
     >
       <div
-        class="justify-content-start row"
+        class="col-7"
       >
         <div
-          class="pr-0 text-left col-3"
+          class="justify-content-start row"
         >
-          <label
-            class="c0"
+          <div
+            class="pr-0 text-left col-3"
           >
-            PID #:
-          </label>
-        </div>
-        <div
-          class="pl-1 text-left col-auto"
-        />
-        <div
-          class="pr-0 text-left col-auto"
-        >
-          <label
-            class="c0"
+            <label
+              class="c1"
+            >
+              PID #:
+            </label>
+          </div>
+          <div
+            class="pl-1 text-left col-auto"
+          />
+          <div
+            class="pr-0 text-left col-auto"
           >
-            PIN #:
-          </label>
-        </div>
-        <div
-          class="pl-1 text-left col-auto"
-        >
-          <span
-            class="pl-2"
+            <label
+              class="c1"
+            >
+              PIN #:
+            </label>
+          </div>
+          <div
+            class="pl-1 text-left col-auto"
           >
-            -
-          </span>
+            <span
+              class="pl-2"
+            >
+              -
+            </span>
+          </div>
         </div>
-      </div>
-      <div
-        class="row"
-      >
         <div
-          class="pr-0 text-left col-3"
+          class="row"
         >
-          <label
-            class="c0"
+          <div
+            class="pr-0 text-left col-3"
           >
-            Civic Address:
-          </label>
-        </div>
-        <div
-          class="pl-1 text-left col-9"
-        >
-          -
+            <label
+              class="c1"
+            >
+              Civic Address:
+            </label>
+          </div>
+          <div
+            class="pl-1 text-left col-9"
+          >
+            -
+          </div>
         </div>
-      </div>
-      <div
-        class="row"
-      >
         <div
-          class="pr-0 text-left col-3"
+          class="row"
         >
-          <label
-            class="c0"
+          <div
+            class="pr-0 text-left col-3"
           >
-            Plan #:
-          </label>
+            <label
+              class="c1"
+            >
+              Plan #:
+            </label>
+          </div>
+          <div
+            class="pl-1 text-left col-9"
+          />
         </div>
-        <div
-          class="pl-1 text-left col-9"
-        />
       </div>
-    </div>
-    <div
-      class="text-right col"
-    >
       <div
-        class="c1"
+        class="text-right col"
       >
         <div
-          class="justify-content-end row"
+          class="c2"
         >
           <div
-            class="pr-0 text-left col-auto"
+            class="justify-content-end row"
           >
-            <label
-              class="c0"
+            <div
+              class="pr-0 text-left col-auto"
             >
-              Land parcel type:
-            </label>
+              <label
+                class="c1"
+              >
+                Land parcel type:
+              </label>
+            </div>
+            <div
+              class="pl-1 text-left col-auto"
+            />
           </div>
-          <div
-            class="pl-1 text-left col-auto"
-          />
         </div>
       </div>
+      <div
+        class="d-flex p-0 align-items-center justify-content-end col-auto"
+      />
     </div>
     <div
-      class="d-flex p-0 align-items-center justify-content-end col-auto"
+      class="c3"
     />
   </div>
-  .c0 {
-  margin-top: 0.5rem;
-  border-bottom-style: solid;
-  border-bottom-color: grey;
-  border-bottom-width: 0.1rem;
-}
-
-<div
-    class="c0"
-  />
 </DocumentFragment>
 `;
diff --git a/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberFieldView.tsx b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberFieldView.tsx
@@ -76,6 +76,7 @@ export const HistoricalNumberFieldView: React.FC<IHistoricalNumbersViewProps> =
             renderFunction={p => <>{p.historicalFileNumber}</>}
             delimiter={'; '}
             maxCollapsedLength={3}
+            maxExpandedLength={10}
             className="d-flex flex-wrap"
           />
         </GroupWrapper>