fix (createNewProject): stepSwitcher - restrict user from switching s…

…teps when creating project, but allow user to switch the step once SUBMIT btn is clicked (#994)
hotosm · Nov 21, 2023 · 951b35b · 951b35b
1 parent a84e650
commit 951b35b
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/src/frontend/src/components/common/StepSwitcher.tsx b/src/frontend/src/components/common/StepSwitcher.tsx
@@ -4,7 +4,7 @@ import { CommonActions } from '../../store/slices/CommonSlice';
 import CoreModules from '../../shared/CoreModules.js';
 import { useNavigate } from 'react-router-dom';
 
-const StepSwitcher = ({ data, flag }) => {
+const StepSwitcher = ({ data, flag, switchSteps }) => {
   interface IIndividualStep {
     url: string;
     step: number;
@@ -39,7 +39,11 @@ const StepSwitcher = ({ data, flag }) => {
                     } lg:fmtm-w-7 lg:fmtm-h-7 xl:fmtm-w-9 xl:fmtm-h-9 fmtm-rounded-full fmtm-flex fmtm-justify-center fmtm-items-center fmtm-border-[0.15rem] fmtm-border-primaryRed hover:fmtm-cursor-pointer  ${
                       currentStep.step >= index ? 'fmtm-bg-primaryRed' : 'fmtm-bg-transparent'
                     }`}
-                    onClick={() => toggleStep(step)}
+                    onClick={() => {
+                      if (switchSteps) {
+                        toggleStep(step);
+                      }
+                    }}
                   >
                     <AssetModules.DoneIcon
                       className={`${

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -110,6 +110,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
       ),
     );
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, ...formValues }));
+    dispatch(CreateProjectActions.SetCanSwitchCreateProjectSteps(true));
   };
 
   useEffect(() => {
@@ -197,6 +198,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
       dispatch(CreateProjectActions.SetGenerateProjectQRSuccess(null));
       navigate(`/project_details/${encodedProjectId}`);
       dispatch(CreateProjectActions.ClearCreateProjectFormData());
+      dispatch(CreateProjectActions.SetCanSwitchCreateProjectSteps(false));
     }
     if (generateQrSuccess && generateProjectLog?.status === 'PENDING') {
       if (generateProjectLogIntervalCb === null) {

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -47,6 +47,7 @@ export const initialState: CreateProjectStateTypes = {
   lineGeojson: null,
   createProjectValidations: {},
   isUnsavedChanges: false,
+  canSwitchCreateProjectSteps: false,
 };
 
 const CreateProject = createSlice({
@@ -206,6 +207,9 @@ const CreateProject = createSlice({
     SetIsUnsavedChanges(state, action) {
       state.isUnsavedChanges = action.payload;
     },
+    SetCanSwitchCreateProjectSteps(state, action) {
+      state.canSwitchCreateProjectSteps = action.payload;
+    },
   },
 });
 

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -33,6 +33,7 @@ export type CreateProjectStateTypes = {
   lineGeojson: null;
   createProjectValidations: {};
   isUnsavedChanges: boolean;
+  canSwitchCreateProjectSteps: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };

diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
@@ -17,6 +17,7 @@ const CreateNewProject = () => {
   const dispatch = useDispatch();
 
   const isUnsavedChanges = useAppSelector((state) => state.createproject.isUnsavedChanges);
+  const canSwitchCreateProjectSteps = useAppSelector((state) => state.createproject.canSwitchCreateProjectSteps);
   const [geojsonFile, setGeojsonFile] = useState(null);
   const [customLineUpload, setCustomLineUpload] = useState(null);
   const [customPolygonUpload, setCustomPolygonUpload] = useState(null);
@@ -92,7 +93,7 @@ const CreateNewProject = () => {
       <div className="fmtm-min-h-[72vh] fmtm-bg-gray-100 fmtm-box-border fmtm-border-[1px] fmtm-border-t-white fmtm-border-t-[0px]">
         <div className=" fmtm-w-full">
           <div>
-            <StepSwitcher data={createProjectSteps} flag={'create_project'} />
+            <StepSwitcher data={createProjectSteps} flag={'create_project'} switchSteps={canSwitchCreateProjectSteps} />
           </div>
         </div>
         <div className="fmtm-mx-5 fmtm-mb-5">{(() => getCreateProjectContent())()}</div>