Merge pull request #191 from bcgov/TICDI-359

collapsible will open on retrieve now
bcgov · May 3, 2024 · fdf040b · fdf040b
2 parents a84f266 + 225ae8b
commit fdf040b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 82 deletions.
diff --git a/frontend/src/app/components/common/Collapsible.tsx b/frontend/src/app/components/common/Collapsible.tsx
@@ -1,32 +1,45 @@
-import React, { useState, FC } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faPlus, faMinus } from '@fortawesome/fontawesome-free-solid';
+import '../../content/pages/documentpreview/DocumentPreview.scss';
 
 interface CollapsibleProps {
   title: string;
   children: React.ReactNode;
+  isOpen: boolean;
 }
 
-const Collapsible: FC<CollapsibleProps> = ({ title, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+const Collapsible: FC<CollapsibleProps> = ({ title, children, isOpen }) => {
+  const [isOpenonClick, setIsOpenOnClick] = useState(isOpen);
+  const icon = isOpenonClick ? faMinus : (faPlus as IconProp);
 
-  const toggleCollapsible = () => {
-    setIsOpen(!isOpen);
+  const contentStyle = {
+    display: isOpenonClick ? 'block' : 'none',
   };
 
-  const icon = isOpen ? faMinus : (faPlus as IconProp);
-
-  const contentStyle = {
-    display: isOpen ? 'block' : 'none',
+  const toggleCollapsibleOnClick = () => {
+    setIsOpenOnClick(!isOpenonClick);
   };
 
+  useEffect(() => {
+    setIsOpenOnClick(isOpen);
+  }, [isOpen]);
+
   return (
     <div className="form-group">
-      <div className="mb-2 d-flex align-items-center" onClick={toggleCollapsible}>
-        <FontAwesomeIcon icon={icon as IconProp} className="inlineDiv" />
-        <div className="ml-2 inlineDiv collapsibleTitle">{title}</div>
+      <div className="mb-2 d-flex align-items-center">
+        <FontAwesomeIcon
+          icon={icon as IconProp}
+          className="inlineDiv collapsibleTitle"
+          onClick={toggleCollapsibleOnClick}
+        />
+        <div className="ml-2 inlineDiv collapsibleTitle boldText" onClick={toggleCollapsibleOnClick}>
+          {title}
+        </div>
       </div>
+
+      <hr />
       <div style={contentStyle}>{children}</div>
     </div>
   );

diff --git a/frontend/src/app/content/pages/IndexPage.tsx b/frontend/src/app/content/pages/IndexPage.tsx
@@ -15,48 +15,46 @@ export interface IndexPageProps {
 }
 
 const IndexPage: FC<IndexPageProps> = ({ data }) => {
-  const { dtid } = useParams<{ dtid: string }>();
-  const dtidNumber = dtid ? parseInt(dtid, 10) : null;
-  const generateReportHandler = () => {
-    if (dtidNumber) {
-      // generateReportNew(dtidNumber, data!.fileNum, 'Land Use Report');
-    }
-  };
-
-  return (
-    <>
-      <div className="h1">Preview - Land Use Report (Draft)</div>
-      <hr />
-
-      <div className="mb-3 mt-3">
-        <div className="font-weight-bold inlineDiv mr-1">DTID:</div>
-        <div className="inlineDiv" id="dtid">
-          {data.dtid}
-        </div>
-      </div>
-      <div className="mb-3">
-        <div className="font-weight-bold inlineDiv mr-1">Tenure File Number:</div>
-        <div className="inlineDiv" id="tfn">
-          {data.fileNum}
-        </div>
-      </div>
-      <div className="mb-3">
-        <div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
-        <div className="inlineDiv">{data.primaryContactName}</div>
-      </div>
-
-      <Collapsible title="Disposition Transaction ID Details">
-        <DtidDetails data={data} />
-      </Collapsible>
-      <Collapsible title="Tenure Details">
-        <TenureDetails data={data} />
-      </Collapsible>
-      <Collapsible title="Area">
-        <AreaDetails data={data} />
-      </Collapsible>
-      <Button onClick={generateReportHandler}>Create</Button>
-    </>
-  );
+  // const { dtid } = useParams<{ dtid: string }>();
+  // const dtidNumber = dtid ? parseInt(dtid, 10) : null;
+  // const generateReportHandler = () => {
+  //   if (dtidNumber) {
+  //     // generateReportNew(dtidNumber, data!.fileNum, 'Land Use Report');
+  //   }
+  // };
+  // return (
+  //   <>
+  //     <div className="h1">Preview - Land Use Report (Draft)</div>
+  //     <hr />
+  //     <div className="mb-3 mt-3">
+  //       <div className="font-weight-bold inlineDiv mr-1">DTID:</div>
+  //       <div className="inlineDiv" id="dtid">
+  //         {data.dtid}
+  //       </div>
+  //     </div>
+  //     <div className="mb-3">
+  //       <div className="font-weight-bold inlineDiv mr-1">Tenure File Number:</div>
+  //       <div className="inlineDiv" id="tfn">
+  //         {data.fileNum}
+  //       </div>
+  //     </div>
+  //     <div className="mb-3">
+  //       <div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
+  //       <div className="inlineDiv">{data.primaryContactName}</div>
+  //     </div>
+  //     <Collapsible title="Disposition Transaction ID Details">
+  //       <DtidDetails data={data} />
+  //     </Collapsible>
+  //     <Collapsible title="Tenure Details">
+  //       <TenureDetails data={data} />
+  //     </Collapsible>
+  //     <Collapsible title="Area">
+  //       <AreaDetails data={data} />
+  //     </Collapsible>
+  //     <Button onClick={generateReportHandler}>Create</Button>
+  //   </>
+  // );
+  return <></>;
 };
 
 export default IndexPage;
diff --git a/frontend/src/app/content/pages/LandingPage.tsx b/frontend/src/app/content/pages/LandingPage.tsx
@@ -25,14 +25,14 @@ import { ProvisionJson, SaveProvisionData } from '../../components/table/reports
 import VariablesTable, { SaveVariableData, VariableJson } from '../../components/table/reports/VariablesTable';
 import { Alert, Button, Row } from 'react-bootstrap';
 import { getDocumentTypes } from '../../common/manage-doc-types';
-import { getVariables, getVariablesByDocType } from '../../common/manage-provisions';
+import { getVariablesByDocType } from '../../common/manage-provisions';
 import { useDispatch, useSelector } from 'react-redux';
 import { setProvisionDataObjects, setSelectedProvisionIds } from '../../store/reducers/provisionSlice';
 import { setSelectedVariableIds, setVariables } from '../../store/reducers/variableSlice';
 import { RootState } from '../../store/store';
 import { setSearchState } from '../../store/reducers/searchSlice';
 import { useParams } from 'react-router-dom';
-import CustomCollapsible from './documentpreview/CustomCollapsible';
+// import Collapsible from './documentpreview/Collapsible';
 
 const LandingPage: FC = () => {
   const { dtidNumber, docTypeFromUrl } = useParams();
@@ -190,8 +190,10 @@ const LandingPage: FC = () => {
       setDtid(dtidValue);
       // Fetch any existing documentData
       const displayData: { dtr: DTRDisplayObject | null; error: string | null } = await getDisplayData(dtidValue);
-      if (!displayData.error) setData(displayData.dtr);
-      else {
+      if (!displayData.error) {
+        setData(displayData.dtr);
+        setIsOpen(true);
+      } else {
         setError(displayData.error);
         setShowError(true);
       }
@@ -275,7 +277,6 @@ const LandingPage: FC = () => {
     setIsOpen(false);
     setSelectedDocTypeId(null);
   };
-  const toggleCollapsible = () => setIsOpen(!isOpen);
 
   const getReportData = () => {
     const selectedProvisions = provisions.filter((provision) => selectedProvisionIds.includes(provision.provision_id));
@@ -381,30 +382,15 @@ const LandingPage: FC = () => {
         <div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
         <div className="inlineDiv">{data?.primaryContactName}</div>
       </div>
-      <CustomCollapsible
-        title="Disposition Transaction ID Details"
-        isOpen={isOpen}
-        toggleCollapsible={toggleCollapsible}
-        isSpanRequired={false}
-      >
+      <Collapsible title="Disposition Transaction ID Details" isOpen={isOpen}>
         {data ? <DtidDetails data={data!} /> : <Skeleton />}
-      </CustomCollapsible>
-      <CustomCollapsible
-        title="Tenure Details"
-        isOpen={isOpen}
-        toggleCollapsible={toggleCollapsible}
-        isSpanRequired={false}
-      >
+      </Collapsible>
+      <Collapsible title="Tenure Details" isOpen={isOpen}>
         {data ? <TenureDetails data={data!} /> : <Skeleton />}
-      </CustomCollapsible>
-      <CustomCollapsible
-        title="Interested Parties"
-        isOpen={isOpen}
-        toggleCollapsible={toggleCollapsible}
-        isSpanRequired={false}
-      >
+      </Collapsible>
+      <Collapsible title="Interested Parties" isOpen={isOpen}>
         {data ? <InterestedParties data={data!} /> : <Skeleton />}
-      </CustomCollapsible>
+      </Collapsible>
 
       <hr />
       <h3>Create Document</h3>
@@ -430,11 +416,11 @@ const LandingPage: FC = () => {
       </Row>
       {provisionGroups && dtid && documentType ? (
         <>
-          <Collapsible title="Provisions">
+          <Collapsible title="Provisions" isOpen={false}>
             <Provisions dtid={dtid} documentType={documentType} provisionGroups={provisionGroups} />
           </Collapsible>
 
-          <Collapsible title="Variables">
+          <Collapsible title="Variables" isOpen={false}>
             <VariablesTable onVariableEdit={handleVariableEdit} />
           </Collapsible>
         </>