fix (createNewProject): splitTasks - validation for submit button ena…

…ble (#1018)
hotosm · Dec 1, 2023 · abb6b65 · abb6b65
1 parent ecc1f2a
commit abb6b65
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 0 deletions.
diff --git a/src/frontend/src/api/CreateProjectService.ts b/src/frontend/src/api/CreateProjectService.ts
@@ -282,6 +282,8 @@ const GetDividedTaskFromGeojson: Function = (url: string, payload: any) => {
         dividedTaskFormData.append('dimension', payload.dimension);
         const getGetDividedTaskFromGeojsonResponse = await axios.post(url, dividedTaskFormData);
         const resp: OrganisationListModel = getGetDividedTaskFromGeojsonResponse.data;
+        dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'divide_on_square', value: true }));
+        dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'task_splitting_algorithm', value: false }));
         dispatch(CreateProjectActions.SetDividedTaskGeojson(resp));
         dispatch(CreateProjectActions.SetDividedTaskFromGeojsonLoading(false));
       } catch (error) {
@@ -348,6 +350,8 @@ const TaskSplittingPreviewService: Function = (
           // TODO display error to user, perhaps there is not osm data here?
           return;
         }
+        dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'divide_on_square', value: false }));
+        dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'task_splitting_algorithm', value: true }));
         dispatch(CreateProjectActions.GetTaskSplittingPreview(resp));
       } catch (error) {
         dispatch(CreateProjectActions.GetTaskSplittingPreviewLoading(false));

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -39,6 +39,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
   const navigate = useNavigate();
 
   const [toggleStatus, setToggleStatus] = useState(false);
+  const [taskGenerationStatus, setTaskGenerationStatus] = useState(false);
 
   const divRef = useRef(null);
   const splitTasksSelection = CoreModules.useAppSelector((state) => state.createproject.splitTasksSelection);
@@ -60,12 +61,30 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
   const taskSplittingGeojsonLoading = CoreModules.useAppSelector(
     (state) => state.createproject.taskSplittingGeojsonLoading,
   );
+  const isTasksGenerated = CoreModules.useAppSelector((state) => state.createproject.isTasksGenerated);
 
   const toggleStep = (step, url) => {
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step }));
     navigate(url);
   };
 
+  const checkTasksGeneration = () => {
+    if (!isTasksGenerated.divide_on_square && splitTasksSelection === task_split_type['divide_on_square']) {
+      setTaskGenerationStatus(false);
+    } else if (
+      !isTasksGenerated.task_splitting_algorithm &&
+      splitTasksSelection === task_split_type['task_splitting_algorithm']
+    ) {
+      setTaskGenerationStatus(false);
+    } else {
+      setTaskGenerationStatus(true);
+    }
+  };
+
+  useEffect(() => {
+    checkTasksGeneration();
+  }, [splitTasksSelection, isTasksGenerated]);
+
   const submission = () => {
     dispatch(CreateProjectActions.SetIsUnsavedChanges(false));
 
@@ -300,6 +319,12 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
                     onChangeData={(value) => {
                       handleCustomChange('task_split_type', parseInt(value));
                       dispatch(CreateProjectActions.SetSplitTasksSelection(parseInt(value)));
+                      if (task_split_type['choose_area_as_task'] === parseInt(value)) {
+                        dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'divide_on_square', value: false }));
+                        dispatch(
+                          CreateProjectActions.SetIsTasksGenerated({ key: 'task_splitting_algorithm', value: false }),
+                        );
+                      }
                     }}
                     errorMsg={errors.task_split_type}
                   />
@@ -382,6 +407,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
                     btnType="primary"
                     type="submit"
                     className="fmtm-font-bold"
+                    disabled={taskGenerationStatus ? false : true}
                   />
                 </div>
               </div>

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -48,6 +48,7 @@ export const initialState: CreateProjectStateTypes = {
   createProjectValidations: {},
   isUnsavedChanges: false,
   canSwitchCreateProjectSteps: false,
+  isTasksGenerated: { divide_on_square: false, task_splitting_algorithm: false },
 };
 
 const CreateProject = createSlice({
@@ -213,6 +214,12 @@ const CreateProject = createSlice({
     SetCanSwitchCreateProjectSteps(state, action) {
       state.canSwitchCreateProjectSteps = action.payload;
     },
+    SetIsTasksGenerated(state, action) {
+      state.isTasksGenerated = {
+        ...state.isTasksGenerated,
+        [action.payload.key]: action.payload.value,
+      };
+    },
   },
 });
 

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