feat(frontend): create new feature entities via API prior to ODK coll…

…ect usage (#2156)

* feat(projectDetailsV2): layer add to display new geometries

* fix(collect): pass newly created entityId to intent URL instead of passing whole geom

* feat(entities): create entity & geometry record function

* feat(+page): update newFeature creation workflow passing entity uuid to intent URL

* fix(+page): pass entity id as property of new geom record

* fix(ITask): update TaskFeatureSelectionProperties type

* feat(projectDetailsV2): style new geom feature acc to entity status

* refactor(featureSelectionPopup): display feature popup for new entity as well

* fix(main): show new entity on map

* fix(entities): use entity id instead of osm id to make entity actions available for new features as well

* refactor(reviewStateModal): remove featureId from SetUpdateReviewStatusModal action dispatch

* fix(+page): after odk redirection close confirmation popup

* fix(dialog-entities-actions): update condition

src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx

@@ -20,7 +20,9 @@ const FeatureSelectionPopup = ({ featureProperties, taskId }: FeatureSelectionPo
   const taskModalStatus = useAppSelector((state) => state.project.taskModalStatus);
   const entityOsmMap = useAppSelector((state) => state.project.entityOsmMap);
   const projectId = params.id || '';
-  const entity = entityOsmMap.find((x) => x.osm_id === featureProperties?.osm_id);
+  const entity = entityOsmMap.find(
+    (x) => x.osm_id === featureProperties?.osm_id || x.id === featureProperties?.entity_id,
+  );
   const submissionIds = entity?.submission_ids ? entity?.submission_ids?.split(',') : [];
 
   return (
@@ -37,7 +39,11 @@ const FeatureSelectionPopup = ({ featureProperties, taskId }: FeatureSelectionPo
         } fmtm-rounded-t-2xl md:fmtm-rounded-tr-none md:fmtm-rounded-l-2xl`}
       >
         <div className="fmtm-flex fmtm-justify-between fmtm-items-center fmtm-gap-2 fmtm-px-3 sm:fmtm-px-5 fmtm-py-2">
-          <h4 className="fmtm-text-lg fmtm-font-bold">Feature: {featureProperties?.osm_id}</h4>
+          <h4 className="fmtm-text-lg fmtm-font-bold">
+            {featureProperties?.osm_id
+              ? `Feature: ${featureProperties.osm_id}`
+              : `Entity: ${featureProperties?.entity_id}`}
+          </h4>
           <div title="Close">
             <AssetModules.CloseIcon
               style={{ width: '20px' }}
@@ -46,26 +52,28 @@ const FeatureSelectionPopup = ({ featureProperties, taskId }: FeatureSelectionPo
             />
           </div>
         </div>
-        <div className="fmtm-h-fit fmtm-px-2 sm:fmtm-px-5 fmtm-py-2 fmtm-border-t">
-          <div className="fmtm-flex fmtm-flex-col fmtm-gap-1 fmtm-mt-1">
-            <p>
-              <span>Tags: </span>
-              <span className="fmtm-overflow-hidden fmtm-line-clamp-2">{featureProperties?.tags}</span>
-            </p>
-            <p>
-              <span>Timestamp: </span>
-              <span>{featureProperties?.timestamp}</span>
-            </p>
-            <p>
-              <span>Changeset: </span>
-              <span>{featureProperties?.changeset}</span>
-            </p>
-            <p>
-              <span>Version: </span>
-              <span>{featureProperties?.version}</span>
-            </p>
+        {featureProperties?.changeset && (
+          <div className="fmtm-h-fit fmtm-px-2 sm:fmtm-px-5 fmtm-py-2 fmtm-border-t">
+            <div className="fmtm-flex fmtm-flex-col fmtm-gap-1 fmtm-mt-1">
+              <p>
+                <span>Tags: </span>
+                <span className="fmtm-overflow-hidden fmtm-line-clamp-2">{featureProperties?.tags}</span>
+              </p>
+              <p>
+                <span>Timestamp: </span>
+                <span>{featureProperties?.timestamp}</span>
+              </p>
+              <p>
+                <span>Changeset: </span>
+                <span>{featureProperties?.changeset}</span>
+              </p>
+              <p>
+                <span>Version: </span>
+                <span>{featureProperties?.version}</span>
+              </p>
+            </div>
           </div>
-        </div>
+        )}
         {(!submissionIds || submissionIds?.length !== 0) && entity && entity_state[entity.status] !== 'VALIDATED' && (
           <div className="fmtm-px-2 sm:fmtm-px-5 fmtm-py-3 fmtm-border-t fmtm-flex fmtm-flex-col fmtm-gap-3">
             {submissionIds?.length > 1 ? (

src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx

@@ -482,7 +482,6 @@ const SubmissionsTable = ({ toggleView }) => {
                             label: row?.meta?.entity?.label,
                             feature: convertCoordinateStringToFeature('xlocation', row?.xlocation),
                             taskUid: taskUid?.toString() || null,
-                            featureId: row?.xid,
                           }),
                         );
                       }}

src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx

@@ -23,7 +23,6 @@ const initialReviewState = {
   entity_id: null,
   label: null,
   feature: null,
-  featureId: null,
 };
 
 // Note these id values must be camelCase to match what ODK Central requires
@@ -65,8 +64,7 @@ const UpdateReviewStatusModal = () => {
       !updateReviewStatusModal.projectId ||
       !updateReviewStatusModal.taskId ||
       !updateReviewStatusModal.entity_id ||
-      !updateReviewStatusModal.taskUid ||
-      !updateReviewStatusModal.featureId
+      !updateReviewStatusModal.taskUid
     ) {
       return;
     }
@@ -132,7 +130,7 @@ const UpdateReviewStatusModal = () => {
           `${VITE_API_URL}/tasks/${updateReviewStatusModal?.taskUid}/event?project_id=${updateReviewStatusModal?.projectId}`,
           {
             task_id: +updateReviewStatusModal?.taskUid,
-            comment: `#submissionId:${updateReviewStatusModal?.instanceId} #featureId:${updateReviewStatusModal?.featureId} ${noteComments}`,
+            comment: `#submissionId:${updateReviewStatusModal?.instanceId} #featureId:${updateReviewStatusModal?.entity_id} ${noteComments}`,
             event: task_event.COMMENT,
           },
         ),

src/frontend/src/store/types/ISubmissions.ts

@@ -32,7 +32,6 @@ type updateReviewStatusModal = {
   entity_id: string | null;
   label: string | null;
   feature: featureType | null;
-  featureId: string | null;
 };
 
 export type filterType = {

src/frontend/src/store/types/ITask.ts

@@ -18,9 +18,10 @@ type downloadSubmissionLoadingTypes = {
 };
 
 export type TaskFeatureSelectionProperties = {
-  osm_id: number;
-  tags: string;
-  timestamp: string;
-  version: number;
-  changeset: number;
+  osm_id?: number;
+  tags?: string;
+  timestamp?: string;
+  version?: number;
+  changeset?: number;
+  entity_id?: string;
 };

src/frontend/src/views/ProjectDetailsV2.tsx

@@ -70,6 +70,7 @@ const ProjectDetailsV2 = () => {
   const entityOsmMap = useAppSelector((state) => state?.project?.entityOsmMap);
   const entityOsmMapLoading = useAppSelector((state) => state?.project?.entityOsmMapLoading);
   const badGeomFeatureCollection = useAppSelector((state) => state?.project?.badGeomFeatureCollection);
+  const newGeomFeatureCollection = useAppSelector((state) => state?.project?.newGeomFeatureCollection);
   const getGeomLogLoading = useAppSelector((state) => state?.project?.getGeomLogLoading);
   const syncTaskStateLoading = useAppSelector((state) => state?.project?.syncTaskStateLoading);
 
@@ -479,6 +480,32 @@ const ProjectDetailsV2 = () => {
                 zIndex={5}
                 style=""
               />
+              {/* New geometry layer */}
+              {/* TODO: 
+                  1. style add to layer, 
+                  2. on feature click show validate button with feature info's 
+              */}
+              <VectorLayer
+                geojson={newGeomFeatureCollection}
+                viewProperties={{
+                  size: map?.getSize(),
+                  padding: [50, 50, 50, 50],
+                  constrainResolution: true,
+                  duration: 2000,
+                }}
+                layerProperties={{ name: 'new-entities' }}
+                zIndex={5}
+                style=""
+                mapOnClick={projectClickOnTaskFeature}
+                getTaskStatusStyle={(feature) => {
+                  const geomType = feature.getGeometry().getType();
+                  const entity = entityOsmMap?.find(
+                    (entity) => entity?.id === feature?.getProperties()?.entity_id,
+                  ) as EntityOsmMap;
+                  const status = entity_state[entity?.status];
+                  return getFeatureStatusStyle(geomType, mapTheme, status);
+                }}
+              />
               {dataExtractUrl && isValidUrl(dataExtractUrl) && dataExtractExtent && selectedTask && (
                 <VectorLayer
                   fgbUrl={dataExtractUrl}

src/frontend/src/views/SubmissionDetails.tsx

@@ -204,7 +204,6 @@ const SubmissionDetails = () => {
                         entity_id: restSubmissionDetails?.feature,
                         label: restSubmissionDetails?.meta?.entity?.label,
                         feature: convertCoordinateStringToFeature('xlocation', restSubmissionDetails?.xlocation),
-                        featureId: restSubmissionDetails?.xid,
                       }),
                     );
                   }}

src/mapper/src/lib/components/dialog-entities-actions.svelte

@@ -41,9 +41,9 @@
 	const alertStore = getAlertStore();
 	const taskStore = getTaskStore();
 
-	const selectedEntityOsmId = $derived(entitiesStore.selectedEntity);
+	const selectedEntityId = $derived(entitiesStore.selectedEntity);
 	const selectedEntity = $derived(
-		entitiesStore.entitiesStatusList?.find((entity) => entity.osmid === selectedEntityOsmId),
+		entitiesStore.entitiesStatusList?.find((entity) => entity.entity_id === selectedEntityId),
 	);
 	const selectedEntityCoordinate = $derived(entitiesStore.selectedEntityCoordinate);
 	const entityToNavigate = $derived(entitiesStore.entityToNavigate);
@@ -228,7 +228,7 @@
 				{#if selectedEntity?.status !== 'SURVEY_SUBMITTED' && selectedEntity?.status !== 'VALIDATED'}
 					<div class="flex gap-2">
 						<sl-button
-							disabled={entityToNavigate?.entityId === selectedEntity?.osmid}
+							disabled={entityToNavigate?.entityId === selectedEntity?.entity_id}
 							variant="default"
 							size="small"
 							class="secondary flex-grow"