fix(mapper): replace task id with index on activities panel (#2002)

* feat(tasks): add state of task id & index map * fix(activities): use task index instead of task id on activities card * fix(+page): generate and store key-value pairs of task id-index
hotosm · Dec 20, 2024 · 2b9ca09 · 2b9ca09
1 parent f81c533
commit 2b9ca09
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/mapper/src/lib/components/more/activities.svelte b/src/mapper/src/lib/components/more/activities.svelte
@@ -11,6 +11,7 @@
 	let { taskEvents, zoomToTask }: Props = $props();
 
 	const taskStore = getTaskStore();
+	const taskIdIndexMap: Record<number, number> = taskStore.taskIdIndexMap;
 </script>
 
 <div class="overflow-y-scroll overflow-x-hidden flex flex-col gap-2 pb-2">
@@ -38,7 +39,7 @@
 					<div class="flex flex-col gap-1 flex-1">
 						<p class="font-semibold capitalize">{event?.username}</p>
 						<div class="flex items-center justify-between">
-							<p class="text-[#484848] text-sm">#{event?.task_id}</p>
+							<p class="text-[#484848] text-sm">#{taskIdIndexMap[event?.task_id]}</p>
 							<div class="flex items-center gap-2">
 								<hot-icon name="clock-history" class="!text-[1rem] text-red-600 cursor-pointer duration-200"></hot-icon>
 								<p class="text-[#484848] text-sm">

diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -53,6 +53,16 @@
 		}
 	});
 
+	$effect(() => {
+		let taskIdIndexMap: Record<number, number> = {};
+		if (data?.project?.tasks && data?.project?.tasks?.length > 0) {
+			data?.project?.tasks?.forEach((task: ProjectTask) => {
+				taskIdIndexMap[task.id] = task.project_task_index;
+			});
+		}
+		taskStore.setTaskIdIndexMap(taskIdIndexMap);
+	});
+
 	function zoomToTask(taskId: number) {
 		const taskObj = data.project.tasks.find((task: ProjectTask) => task.id === taskId);
 

diff --git a/src/mapper/src/store/tasks.svelte.ts b/src/mapper/src/store/tasks.svelte.ts
@@ -16,6 +16,7 @@ let selectedTaskIndex: number | null = $state(null);
 let selectedTask: any = $state(null);
 let selectedTaskState: string = $state('');
 let selectedTaskGeom: GeoJSON | null = $state(null);
+let taskIdIndexMap: Record<number, number> = $state({});
 
 function getTaskEventStream(projectId: number): ShapeStream | undefined {
 	if (!projectId) {
@@ -92,15 +93,20 @@ function getTaskStore() {
 		selectedTaskGeom = featcol.features.find((x) => x?.properties?.fid === taskId)?.geometry || null;
 	}
 
+	function setTaskIdIndexMap(idIndexMappedRecord: Record<number, number>) {
+		taskIdIndexMap = idIndexMappedRecord;
+	}
+
 	return {
 		// The task areas / status colours displayed on the map
 		appendTaskStatesToFeatcol: appendTaskStatesToFeatcol,
+		subscribeToEvents: subscribeToTaskEvents,
+		setSelectedTaskId: setSelectedTaskId,
+		setTaskIdIndexMap: setTaskIdIndexMap,
 		get featcol() {
 			return featcol;
 		},
-
 		// The latest event to display in notifications bar
-		subscribeToEvents: subscribeToTaskEvents,
 		get latestEvent() {
 			return latestEvent;
 		},
@@ -109,7 +115,6 @@ function getTaskStore() {
 		},
 
 		// The selected task to display mapping dialog
-		setSelectedTaskId: setSelectedTaskId,
 		get selectedTaskId() {
 			return selectedTaskId;
 		},
@@ -125,6 +130,9 @@ function getTaskStore() {
 		get selectedTaskGeom() {
 			return selectedTaskGeom;
 		},
+		get taskIdIndexMap() {
+			return taskIdIndexMap;
+		},
 	};
 }