fix: project creation draw and max boundary area (#1157)

* fix uploadArea: areaValidation for fileUpload, draw hide if selectionType uploadFile, draw available if AOI reset * fix stepSwitcher: remove cursor-pointer on step hover * fix projctDetails: link to setting ODK server placed on Here text
hotosm · Feb 1, 2024 · f0ea999 · f0ea999
1 parent 5ef1914
commit f0ea999
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 15 deletions.
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
@@ -50,6 +50,7 @@ const VectorLayer = ({
   getTaskStatusStyle,
   layerProperties,
   rotation,
+  getAOIArea,
 }) => {
   const [vectorLayer, setVectorLayer] = useState(null);
   useEffect(() => () => map && vectorLayer && map.removeLayer(vectorLayer), [map, vectorLayer]);
@@ -135,6 +136,7 @@ const VectorLayer = ({
     });
     map.addInteraction(draw);
     return () => {
+      map.removeInteraction(draw);
       // map.removeInteraction(snap);
     };
   }, [map, vectorLayer, onDraw]);
@@ -299,6 +301,13 @@ const VectorLayer = ({
     }
   }, [rotation, map, geojson]);
 
+  useEffect(() => {
+    if (!vectorLayer || !getAOIArea) return;
+    const geometry = vectorLayer.getSource().getFeatures()?.[0].getGeometry();
+    const area = formatArea(geometry);
+    getAOIArea(area);
+  }, [vectorLayer, getAOIArea]);
+
   // ROTATE MAP ACCORDING TO ORIENTATION
   // useEffect(() => {
   //   if (!map) return;

diff --git a/src/frontend/src/components/common/StepSwitcher.tsx b/src/frontend/src/components/common/StepSwitcher.tsx
@@ -36,7 +36,7 @@ const StepSwitcher = ({ data, flag, switchSteps }) => {
                   <div
                     className={`${
                       currentStep.step === index ? 'currentstep-pointer' : ''
-                    } 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  ${
+                    } 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  ${
                       currentStep.step >= index ? 'fmtm-bg-primaryRed' : 'fmtm-bg-transparent'
                     }`}
                     onClick={() => {

diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -87,17 +87,17 @@ const ProjectDetailsForm = ({ flag }) => {
             information about your project.
           </span>
           <span>To complete the first step, you will need the login credentials of ODK Central Server.</span>{' '}
-          <div className="fmtm-flex fmtm-flex-col">
-            <span>
-              Here are the instructions for setting up a Central ODK Server on Digital Ocean, if you haven’t already.
-            </span>
+          <div>
             <a
               href="https://docs.getodk.org/central-install-digital-ocean/"
-              className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
+              className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-w-fit"
               target="_"
             >
-              https://docs.getodk.org/central-install-digital-ocean/
+              Here{' '}
             </a>
+            <span>
+              are the instructions for setting up a Central ODK Server on Digital Ocean, if you haven’t already.
+            </span>
           </div>
         </div>
       </div>

diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx
@@ -297,20 +297,26 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
             <NewDefineAreaMap
               drawToggle={drawToggle}
               uploadedOrDrawnGeojsonFile={drawnGeojson}
-              onDraw={(geojson, area) => {
-                handleCustomChange('drawnGeojson', geojson);
-                dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson)));
-                dispatch(CreateProjectActions.SetTotalAreaSelection(area));
-                setGeojsonFile(null);
-              }}
+              onDraw={
+                drawnGeojson || uploadAreaSelection === 'upload_file'
+                  ? null
+                  : (geojson, area) => {
+                      handleCustomChange('drawnGeojson', geojson);
+                      dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson)));
+                      dispatch(CreateProjectActions.SetTotalAreaSelection(area));
+                      setGeojsonFile(null);
+                    }
+              }
               onModify={(geojson, area) => {
                 handleCustomChange('drawnGeojson', geojson);
                 dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson)));
                 dispatch(CreateProjectActions.SetTotalAreaSelection(area));
                 dispatch(CreateProjectActions.ClearProjectStepState(formValues));
                 setCustomLineUpload(null);
                 setCustomPolygonUpload(null);
-                setGeojsonFile(null);
+              }}
+              getAOIArea={(area) => {
+                dispatch(CreateProjectActions.SetTotalAreaSelection(area));
               }}
             />
           </div>

diff --git a/src/frontend/src/views/NewDefineAreaMap.tsx b/src/frontend/src/views/NewDefineAreaMap.tsx
@@ -12,9 +12,10 @@ type NewDefineAreaMapProps = {
   uploadedOrDrawnGeojsonFile: GeoJSONFeatureTypes;
   buildingExtractedGeojson?: GeoJSONFeatureTypes;
   lineExtractedGeojson?: GeoJSONFeatureTypes;
-  onDraw?: (geojson: any, area: number) => void;
+  onDraw?: ((geojson: any, area: number) => void) | null;
   onModify?: ((geojson: any, area?: number) => void) | null;
   hasEditUndo?: boolean;
+  getAOIArea?: ((area?: number) => void) | null;
 };
 const NewDefineAreaMap = ({
   drawToggle,
@@ -25,6 +26,7 @@ const NewDefineAreaMap = ({
   onDraw,
   onModify,
   hasEditUndo,
+  getAOIArea,
 }: NewDefineAreaMapProps) => {
   const { mapRef, map } = useOLMap({
     // center: fromLonLat([85.3, 27.7]),
@@ -71,6 +73,7 @@ const NewDefineAreaMap = ({
             onDraw={onDraw}
             onModify={onModify}
             zoomToLayer
+            getAOIArea={getAOIArea}
           />
         )}