feat(mapper): project details section add to bottom sheet (#1994)

* fix(more): if not instructions, show message * fix(page): margin remove from h5 * fix(more): project information stack add * feat(project-info): project information section add
hotosm · Dec 16, 2024 · d027fb8 · d027fb8
1 parent c6707dd
commit d027fb8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/src/mapper/src/lib/components/more/index.svelte b/src/mapper/src/lib/components/more/index.svelte
@@ -2,11 +2,17 @@
 	import Editor from '$lib/components/editor/editor.svelte';
 	import Comment from '$lib/components/more/comment.svelte';
 	import Activities from '$lib/components/more/activities.svelte';
+	import ProjectInfo from '$lib/components/more/project-info.svelte';
 	import { getTaskStore } from '$store/tasks.svelte.ts';
 	import type { ProjectData, TaskEventType } from '$lib/types';
 
-	type stackType = '' | 'Comment' | 'Instructions' | 'Activities';
+	type stackType = '' | 'Comment' | 'Instructions' | 'Activities' | 'Project Information';
+
 	const stackGroup: { icon: string; title: stackType }[] = [
+		{
+			icon: 'info-circle',
+			title: 'Project Information',
+		},
 		{
 			icon: 'chat',
 			title: 'Comment',
@@ -24,7 +30,7 @@
 	type Props = {
 		projectData: ProjectData;
 		zoomToTask: (taskId: number) => void;
-	}
+	};
 
 	let { projectData, zoomToTask }: Props = $props();
 	const taskStore = getTaskStore();
@@ -88,15 +94,22 @@
 			<p class="text-[1.125rem] font-barlow-semibold">{activeStack}</p>
 		</div>
 	{/if}
+
 	<!-- body -->
 	{#if activeStack === 'Comment'}
 		<Comment {comments} projectId={projectData?.id} />
 	{/if}
-
 	{#if activeStack === 'Instructions'}
-		<Editor editable={false} content={projectData?.per_task_instructions} />
+		{#if projectData?.per_task_instructions}
+			<Editor editable={false} content={projectData?.per_task_instructions} />
+		{:else}
+			<div class="flex justify-center mt-10">
+				<p class="text-[#484848] text-base">No Instructions</p>
+			</div>
+		{/if}
 	{/if}
 	{#if activeStack === 'Activities'}
-		<Activities {taskEvents} zoomToTask={zoomToTask} />
+		<Activities {taskEvents} {zoomToTask} />
 	{/if}
+	{#if activeStack === 'Project Information'}<ProjectInfo {projectData} />{/if}
 </div>
diff --git a/src/mapper/src/lib/components/more/project-info.svelte b/src/mapper/src/lib/components/more/project-info.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	type descriptionType = {
+		key: string;
+		value: string;
+	};
+
+	const { projectData } = $props();
+
+	const descriptionList: descriptionType[] = [
+		{ key: 'Project ID', value: projectData?.id },
+		{ key: 'Total Tasks', value: projectData?.tasks?.length },
+		{ key: 'Organization Name', value: projectData?.organisation_name },
+	];
+</script>
+
+<h5 class="text-lg text-[#333333] font-barlow-semibold mb-6 mt-3">{projectData?.name}</h5>
+<div class="flex flex-col gap-3">
+	<h5 class="text-base text-[#D73F3F] font-barlow-semibold">Description</h5>
+	<p class="text-sm text-[#2B2B2B] font-barlow-regular">{projectData?.description}</p>
+	<div class="flex flex-col gap-2">
+		{#each descriptionList as description}
+			<div class="grid grid-cols-2">
+				<p class="text-sm text-[#2B2B2B] font-barlow-regular">{description.key}</p>
+				<p class="text-sm text-[#161616] font-barlow-semibold">
+					<span class="px-2">:</span>
+					{description?.value || '-'}
+				</p>
+			</div>
+		{/each}
+	</div>
+</div>
diff --git a/src/mapper/src/styles/page.css b/src/mapper/src/styles/page.css
@@ -40,3 +40,7 @@
 p {
 	margin: 0px;
 }
+
+h5 {
+	margin: 0;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,3 +40,7 @@ @@
     p {
     	margin: 0px;
     }
+    h5 {
+    	margin: 0;
+    }