fix: limit project area during create (#1109)

* fix: backend import error fix

* fix (vectorLayer): style - conditionaly apply style on onModify present

* fix (splitTasks): map - edit added to splitted taskLayer

* fix (splitTasks): onModify - edited geojson set to dividedTaskGeojson state

* feat (createNewProject): only enable generate task btn if fgb file fetch is completed

* fix (createNewProject): splitTasks - logic fix

* fix (createNewProject): splitTasks - clear dividedTaskGeojson, splitTasksSelection, and dataExtractGeojson state on previous click

* feat (createNewProject): splitTasks - show loader and message until FGB file is fetching

* fix (createNewProject): taskSplit - display error on taskSplit fail

* fix vectorLayer: on modifyEnd return area of boundary as well

* fix button: loading text added to the button

* fix NewDefineAreaMap: removed data extraction in progress message from mapComponent

* fix (createNewProject): splitTasks - clearing state on step toggle remove

* fix (createNewProject): uploadArea - clear step4 & step5 step on AOI edit

* fix (createNewProject): dataExtract - generateTaskBTN added, disable next until taskGeneration success, state logic changed to track extractWays & featureType state validation

* fix (createNewProject): dataExtract - clear file state on reset click or if generateDataExtract click

* fix (createNewProject): customLine, customPolygon file state clear on AOI edit

* fix (createNewProject): dataExtract - clear previous extractGeojson, customLine, customPolygon on generate extract, btn disable state update

* fix (createNewProject): uploadArea - warning & error shown if AOI exceeds 100 & 1000 sq.km respectively

src/frontend/src/components/createnewproject/UploadArea.tsx

@@ -44,6 +44,20 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
   const totalAreaSelection = useAppSelector((state) => state.createproject.totalAreaSelection);
 
   const submission = () => {
+    if (totalAreaSelection) {
+      const totalArea = parseFloat(totalAreaSelection?.split(' ')[0]);
+      if (totalArea > 1000) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Cannot create project of project area exceeding 1000 Sq.KM.',
+            variant: 'error',
+            duration: 3000,
+          }),
+        );
+        return;
+      }
+    }
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 3 }));
     navigate('/select-form');
@@ -133,6 +147,32 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
     dispatch(CreateProjectActions.SetTotalAreaSelection(null));
   };
 
+  useEffect(() => {
+    if (totalAreaSelection) {
+      const totalArea = parseFloat(totalAreaSelection?.split(' ')[0]);
+      if (totalArea > 100) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'The project area exceeded over 100 Sq.KM.',
+            variant: 'warning',
+            duration: 3000,
+          }),
+        );
+      }
+      if (totalArea > 1000) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'The project area exceeded 1000 Sq.KM. and must be less than 1000 Sq.KM.',
+            variant: 'error',
+            duration: 3000,
+          }),
+        );
+      }
+    }
+  }, [totalAreaSelection]);
+
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
@@ -264,7 +304,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
                 handleCustomChange('drawnGeojson', geojson);
                 dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson)));
                 dispatch(CreateProjectActions.SetTotalAreaSelection(area));
-                dispatch(CreateProjectActions.ClearProjectStepState());
+                dispatch(CreateProjectActions.ClearProjectStepState(formValues));
                 setCustomLineUpload(null);
                 setCustomPolygonUpload(null);
                 setGeojsonFile(null);

src/frontend/src/store/slices/CreateProjectSlice.ts

@@ -219,11 +219,11 @@ const CreateProject = createSlice({
     SetFgbFetchingStatus(state, action) {
       state.isFgbFetching = action.payload;
     },
-    ClearProjectStepState(state) {
+    ClearProjectStepState(state, action) {
       state.dividedTaskGeojson = null;
       state.splitTasksSelection = null;
       state.dataExtractGeojson = null;
-      state.projectDetails = { ...state.projectDetails, customLineUpload: null, customPolygonUpload: null };
+      state.projectDetails = { ...action.payload, customLineUpload: null, customPolygonUpload: null };
     },
   },
 });