fix(frontend): display submission point feature if feature not in ext…

…ract (#1638) * feat(submissionDetails): show submission point if no submission feature present * feat(submissionInstanceMap): style, zoomToLayer fix
hotosm · Jul 9, 2024 · 82beadf · 82beadf
1 parent e29e08d
commit 82beadf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx b/src/frontend/src/components/SubmissionMap/SubmissionInstanceMap.tsx
@@ -38,9 +38,16 @@ const SubmissionInstanceMap = ({ featureGeojson }: submissionInstanceMapPropType
         {featureGeojson?.type && (
           <VectorLayer
             geojson={featureGeojson}
+            viewProperties={{
+              size: map?.getSize(),
+              padding: [50, 50, 50, 50],
+              constrainResolution: true,
+              duration: 2000,
+              maxZoom: 20,
+            }}
             zIndex={10}
             zoomToLayer
-            style={{ ...defaultStyles, lineColor: '#D73F37', lineThickness: 2 }}
+            style={{ ...defaultStyles, lineColor: '#D73F37', lineThickness: 2, circleRadius: 10, fillColor: '#D73F37' }}
           />
         )}
       </MapComponent>

diff --git a/src/frontend/src/views/SubmissionDetails.tsx b/src/frontend/src/views/SubmissionDetails.tsx
@@ -22,7 +22,11 @@ const SubmissionDetails = () => {
   const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading);
   const submissionDetails = useAppSelector((state) => state.submission.submissionDetails);
   const submissionDetailsLoading = useAppSelector((state) => state.submission.submissionDetailsLoading);
-  const taskId = submissionDetails?.task_id;
+  const taskId = submissionDetails?.task_id
+    ? submissionDetails?.task_id
+    : submissionDetails?.task_filter
+      ? submissionDetails?.task_filter
+      : '-';
 
   useEffect(() => {
     dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${projectId}`));
@@ -54,7 +58,7 @@ const SubmissionDetails = () => {
   }
   const filteredData = submissionDetails ? removeNullValues(submissionDetails) : {};
 
-  var coordinatesArray: [number, number][] = submissionDetails?.xlocation?.split(';').map(function (coord: string) {
+  const coordinatesArray: [number, number][] = submissionDetails?.xlocation?.split(';').map(function (coord: string) {
     let coordinate = coord
       .trim()
       .split(' ')
@@ -79,6 +83,14 @@ const SubmissionDetails = () => {
     ],
   };
 
+  const pointFeature = {
+    type: 'Feature',
+    geometry: {
+      ...submissionDetails?.point,
+    },
+    properties: {},
+  };
+
   const renderValue = (value: any, key: string = '') => {
     if (key === 'start' || key === 'end') {
       return (
@@ -169,7 +181,9 @@ const SubmissionDetails = () => {
         </div>
         <div className="fmtm-flex fmtm-flex-grow fmtm-justify-center">
           <div className="fmtm-w-full fmtm-my-10 xl:fmtm-my-0 xl:fmtm-w-[500px] 2xl:fmtm-w-[700px] fmtm-h-[300px] fmtm-rounded-lg fmtm-overflow-hidden">
-            <SubmissionInstanceMap featureGeojson={geojsonFeature} />
+            <SubmissionInstanceMap
+              featureGeojson={coordinatesArray ? geojsonFeature : submissionDetails?.point ? pointFeature : {}}
+            />
           </div>
         </div>
       </div>