fix(more): if no events i.e.activities or comments then show a message

hotosm · Nov 12, 2024 · 281a6a3 · 281a6a3
1 parent 01d625f
commit 281a6a3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/mapper/src/lib/components/more/activities.svelte b/src/mapper/src/lib/components/more/activities.svelte
@@ -1,20 +1,29 @@
 <script lang="ts">
 	import ActivitiesSkeleton from '$lib/components/more/skeleton/activities.svelte';
 	import type { TaskEventType } from '$lib/types';
+	import { getTaskStore } from '$store/tasks.svelte.ts';
 
 	interface Props {
 		taskEvents: TaskEventType[];
 		zoomToTask: (taskId: number) => void;
 	}
 
 	let { taskEvents, zoomToTask }: Props = $props();
+
+	const taskStore = getTaskStore();
 </script>
 
 <div class="overflow-y-scroll overflow-x-hidden flex flex-col gap-2 pb-2">
 	{#if false}
 		{#each Array.from({ length: 5 }) as _, index}
 			<ActivitiesSkeleton />
 		{/each}
+	{: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'}
+			</p>
+		</div>
 	{:else}
 		{#each taskEvents as event}
 			<div class="flex flex-col gap-2 py-3 bg-[#F6F5F5] rounded-md mr-1">
@@ -54,13 +63,14 @@
 						}}
 						role="button"
 						tabindex="0"
-						onclick={() => {							
-							zoomToTask(event?.task_id)}}
+						onclick={() => {
+							zoomToTask(event?.task_id);
+						}}
 						name="map"
 						class="!text-[1rem] text-[#484848] hover:text-red-600 cursor-pointer duration-200"
 					></hot-icon>
 				</div>
 			</div>
 		{/each}
 	{/if}
-</div>
+</div>
diff --git a/src/mapper/src/lib/components/more/comment.svelte b/src/mapper/src/lib/components/more/comment.svelte
@@ -26,6 +26,12 @@
 			{#each Array.from({ length: 5 }) as _, index}
 				<CommentSkeleton />
 			{/each}
+		{: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'}
+				</p>
+			</div>
 		{:else}
 			{#each comments as comment}
 				<div class="flex flex-col gap-2 py-3 bg-[#F6F5F5] rounded-md">