Feat/613 clickable form progress on the seedlot detail (#711)

* feat: ading navegation function to the progress bar * feat: making progress bar responsive on the forms * feat: adding correct URL params * fix: adding anonymous function to useState declaration
bcgov · Dec 20, 2023 · 98241e2 · 98241e2
1 parent 6655341
commit 98241e2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 7 deletions.
diff --git a/frontend/src/components/SeedlotRegistrationProgress/index.tsx b/frontend/src/components/SeedlotRegistrationProgress/index.tsx
@@ -18,7 +18,8 @@ const SeedlotRegistrationProgress = ({
   interactFunction
 }: SeedlotRegistrationProgressProps) => (
   <ProgressIndicator
-    currentIndex={-1} // Needs to feed it a -1 value otherwise step 1 will stuck at current
+    // Needs to feed it a -1 value otherwise step 1 will stuck at current
+    currentIndex={-1}
     className={className}
     spaceEqually
     onChange={interactFunction ?? null}

diff --git a/frontend/src/views/Seedlot/SeedlotDetails/FormProgress/index.tsx b/frontend/src/views/Seedlot/SeedlotDetails/FormProgress/index.tsx
@@ -18,9 +18,11 @@ interface FormProgressProps {
 
 const FormProgress = ({ seedlotNumber, isFetching }: FormProgressProps) => {
   const navigate = useNavigate();
+
   if (!seedlotNumber) {
     return null;
   }
+
   return (
     <div className="form-progress">
       <div className="form-progress-title-section">
@@ -32,7 +34,16 @@ const FormProgress = ({ seedlotNumber, isFetching }: FormProgressProps) => {
         {
           isFetching
             ? <ProgressIndicatorSkeleton />
-            : <SeedlotRegistrationProgress progressStatus={initialProgressConfig} />
+            : (
+              <SeedlotRegistrationProgress
+                progressStatus={initialProgressConfig}
+                interactFunction={(e: number) => {
+                  // Add 1 to the number to make it comply with
+                  // the step numbers shown to the user
+                  navigate(`/seedlots/a-class-registration/${seedlotNumber}?step=${e + 1}`);
+                }}
+              />
+            )
         }
       </div>
       <div>

diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/constants.ts b/frontend/src/views/Seedlot/SeedlotRegistrationForm/constants.ts
@@ -4,7 +4,7 @@ import { ProgressIndicatorConfig, StepMap } from './definitions';
 export const initialProgressConfig: ProgressIndicatorConfig = {
   collection: {
     isComplete: false,
-    isCurrent: true,
+    isCurrent: false,
     isInvalid: false
   },
   ownership: {

diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx b/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import {
   FlexGrid,
@@ -47,6 +47,7 @@ import { EmptyMultiOptObj } from '../../../shared-constants/shared-constants';
 
 import { AllStepData, ProgressIndicatorConfig } from './definitions';
 import {
+  initProgressBar,
   initCollectionState,
   initInterimState,
   initOrchardState,
@@ -78,12 +79,18 @@ import { DEFAULT_MIX_PAGE_ROWS } from '../../../components/SeedlotRegistrationSt
 const SeedlotRegistrationForm = () => {
   const navigate = useNavigate();
   const { seedlotNumber } = useParams();
+  const [searchParams] = useSearchParams();
+  const stepParam = searchParams.get('step');
 
-  const [formStep, setFormStep] = useState<number>(0);
+  const [formStep, setFormStep] = useState<number>(
+    stepParam
+      ? (parseInt(stepParam, 10) - 1)
+      : 0
+  );
   const [
     progressStatus,
     setProgressStatus
-  ] = useState<ProgressIndicatorConfig>(initialProgressConfig);
+  ] = useState<ProgressIndicatorConfig>(() => initProgressBar(formStep, initialProgressConfig));
 
   // Initialize all step's state here
   const [allStepData, setAllStepData] = useState<AllStepData>(() => ({
@@ -451,6 +458,7 @@ const SeedlotRegistrationForm = () => {
               progressStatus={progressStatus}
               className="seedlot-registration-steps"
               interactFunction={(e: number) => {
+                window.history.replaceState(null, '', `?step=${(e + 1).toString()}`);
                 updateProgressStatus(e, formStep);
                 setFormStep(e);
               }}

diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/utils.ts b/frontend/src/views/Seedlot/SeedlotRegistrationForm/utils.ts
@@ -10,10 +10,28 @@ import { calcSum, generateDefaultRows } from '../../../components/SeedlotRegistr
 import { EmptyMultiOptObj } from '../../../shared-constants/shared-constants';
 import MultiOptionsObj from '../../../types/MultiOptionsObject';
 import ExtractionStorageForm from '../../../types/SeedlotTypes/ExtractionStorage';
+
+import { stepMap } from './constants';
 import {
-  ParentTreeStepDataObj
+  ParentTreeStepDataObj, ProgressIndicatorConfig
 } from './definitions';
 
+export const initProgressBar = (
+  currentStep: number,
+  initialProgressConfig: ProgressIndicatorConfig
+): ProgressIndicatorConfig => {
+  const progressConfig = structuredClone(initialProgressConfig);
+
+  Object.keys(stepMap).forEach((key: string) => {
+    const numKey = parseInt(key, 10);
+    if (numKey === currentStep) {
+      progressConfig[stepMap[numKey]].isCurrent = true;
+    }
+  });
+
+  return progressConfig;
+};
+
 export const initCollectionState = (
   defaultAgency: MultiOptionsObj,
   defaultCode: string