fix(mapper): task id with task index on mapper frontend (#1997)

* feat(tasks): add selectedTaskIndex state to store task index * fix(main): update setSelectedTaskId arguments * fix(+page): update setSelectedTaskId arguments * fix(activities/dialog-task-actions): use task index instead of task id for UI * fix(comment): use task index instead of task id
hotosm · Dec 17, 2024 · 1d0a0a2 · 1d0a0a2
1 parent f2f9354
commit 1d0a0a2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 14 deletions.
diff --git a/src/mapper/src/lib/components/dialog-task-actions.svelte b/src/mapper/src/lib/components/dialog-task-actions.svelte
@@ -35,7 +35,7 @@
 				></hot-icon>
 			</div>
 			<div class="flex justify-between items-center">
-				<p class="text-[#333] text-xl font-barlow-semibold">Task #{taskStore.selectedTaskId}</p>
+				<p class="text-[#333] text-xl font-barlow-semibold">Task #{taskStore.selectedTaskIndex}</p>
 				<div
 					onclick={() => {
 						clickMapNewFeature();
@@ -58,7 +58,7 @@
 			</div>
 
 			{#if taskStore.selectedTaskState === 'UNLOCKED_TO_MAP'}
-				<p class="my-4 sm:my-6">Do you want to start mapping task #{taskStore.selectedTaskId}?</p>
+				<p class="my-4 sm:my-6">Do you want to start mapping task #{taskStore.selectedTaskIndex}?</p>
 				<div class="flex justify-center gap-x-2">
 					<sl-button
 						size="small"
@@ -95,7 +95,7 @@
 					</sl-button>
 				</div>
 			{:else if taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING'}
-				<p class="my-4 sm:my-6">Task #{taskStore.selectedTaskId} has been locked. Is the task completely mapped?</p>
+				<p class="my-4 sm:my-6">Task #{taskStore.selectedTaskIndex} has been locked. Is the task completely mapped?</p>
 				<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
 					<sl-button
 						onclick={() => resetTask(projectData?.id, taskStore.selectedTaskId)}

diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -164,7 +164,7 @@
 		if (clickedTaskFeature && clickedTaskFeature?.length > 0) {
 			taskAreaClicked = true;
 			const clickedTaskId = clickedTaskFeature[0]?.properties?.fid;
-			taskStore.setSelectedTaskId(clickedTaskId);
+			taskStore.setSelectedTaskId(clickedTaskId, clickedTaskFeature[0]?.properties?.task_index);
 			if (+projectSetupStepStore.projectSetupStep === projectSetupStepEnum['task_selection']) {
 				localStorage.setItem(`project-${projectId}-setup`, projectSetupStepEnum['complete_setup']);
 				projectSetupStepStore.setProjectSetupStep(projectSetupStepEnum['complete_setup']);
@@ -322,7 +322,7 @@
 	on:click={(_e) => {
 		// deselect everything on click, to allow for re-selection
 		// if the user clicks on a feature layer directly (on:click)
-		taskStore.setSelectedTaskId(null);
+		taskStore.setSelectedTaskId(null, null);
 		taskAreaClicked = false;
 		toggleActionModal(null);
 		entitiesStore.setSelectedEntity(null);

diff --git a/src/mapper/src/lib/components/more/activities.svelte b/src/mapper/src/lib/components/more/activities.svelte
@@ -21,7 +21,9 @@
 	{:else if taskEvents?.length === 0}
 		<div class="flex justify-center mt-10">
 			<p class="text-[#484848] text-base">
-				{taskStore?.selectedTaskId ? `No activities yet on task ${taskStore?.selectedTaskId}` : 'No activities yet'}
+				{taskStore?.selectedTaskIndex
+					? `No activities yet on task ${taskStore?.selectedTaskIndex}`
+					: 'No activities yet'}
 			</p>
 		</div>
 	{:else}

diff --git a/src/mapper/src/lib/components/more/comment.svelte b/src/mapper/src/lib/components/more/comment.svelte
@@ -20,7 +20,7 @@
 
 <div class="h-[calc(100%-2.25rem)] sm:h-[calc(100%-2.6rem)]">
 	<div
-		class={`overflow-y-scroll overflow-x-hidden flex flex-col gap-2 ${taskStore.selectedTaskId ? 'h-[calc(100%-11.875rem)]' : 'h-[100%]'}`}
+		class={`overflow-y-scroll overflow-x-hidden flex flex-col gap-2 ${taskStore.selectedTaskIndex ? 'h-[calc(100%-11.875rem)]' : 'h-[100%]'}`}
 	>
 		{#if false}
 			{#each Array.from({ length: 5 }) as _, index}
@@ -29,7 +29,7 @@
 		{:else if comments?.length === 0}
 			<div class="flex justify-center mt-10">
 				<p class="text-[#484848] text-base">
-					{taskStore?.selectedTaskId ? `No comments yet on task ${taskStore?.selectedTaskId}` : 'No comments yet'}
+					{taskStore?.selectedTaskIndex ? `No comments yet on task ${taskStore?.selectedTaskIndex}` : 'No comments yet'}
 				</p>
 			</div>
 		{:else}

diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -59,7 +59,7 @@
 		if (!taskObj) return;
 
 		// Set as selected task for buttons
-		taskStore.setSelectedTaskId(taskObj.id);
+		taskStore.setSelectedTaskId(taskObj.id, taskObj?.task_index);
 
 		const taskPolygon = polygon(taskObj.outline.coordinates);
 		const taskBuffer = buffer(taskPolygon, 5, { units: 'meters' });

diff --git a/src/mapper/src/store/tasks.svelte.ts b/src/mapper/src/store/tasks.svelte.ts
@@ -8,7 +8,11 @@ let taskEventShape: Shape;
 let featcol = $state({ type: 'FeatureCollection', features: [] });
 let latestEvent = $state(null);
 let events: TaskEventType[] = $state([]);
+
+// for UI show task index for simplicity & for api's use task id
 let selectedTaskId: number | null = $state(null);
+let selectedTaskIndex: number | null = $state(null);
+
 let selectedTask: any = $state(null);
 let selectedTaskState: string = $state('');
 let selectedTaskGeom: GeoJSON | null = $state(null);
@@ -45,14 +49,14 @@ function getTaskStore() {
 
 	async function appendTaskStatesToFeatcol(projectTasks: ProjectTask[]) {
 		const latestTaskStates = await getLatestStatePerTask();
-
 		const features = projectTasks.map((task) => ({
 			type: 'Feature',
 			geometry: task.outline,
 			properties: {
 				fid: task.id,
 				state: latestTaskStates.get(task.id)?.state || 'UNLOCKED_TO_MAP',
 				actioned_by_uid: latestTaskStates.get(task.id)?.actioned_by_uid,
+				task_index: task?.project_task_index,
 			},
 		}));
 
@@ -78,12 +82,13 @@ function getTaskStore() {
 		return currentTaskStates;
 	}
 
-	async function setSelectedTaskId(newId: number) {
-		selectedTaskId = newId;
+	async function setSelectedTaskId(taskId: number | null, taskIndex: number | null) {
+		selectedTaskId = taskId;
+		selectedTaskIndex = taskIndex;
 		const allTasksCurrentStates = await getLatestStatePerTask();
-		selectedTask = allTasksCurrentStates.get(newId);
+		selectedTask = allTasksCurrentStates.get(taskId);
 		selectedTaskState = selectedTask?.state || 'UNLOCKED_TO_MAP';
-		selectedTaskGeom = featcol.features.find((x) => x.properties.fid === newId)?.geometry || null;
+		selectedTaskGeom = featcol.features.find((x) => x.properties.fid === taskId)?.geometry || null;
 	}
 
 	return {
@@ -107,6 +112,9 @@ function getTaskStore() {
 		get selectedTaskId() {
 			return selectedTaskId;
 		},
+		get selectedTaskIndex() {
+			return selectedTaskIndex;
+		},
 		get selectedTask() {
 			return selectedTask;
 		},