From a05c60b0a735c70b985e4f069e0d39e305965e6f Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Wed, 13 Nov 2024 22:05:03 +0545
Subject: [PATCH] feat(mapper): map new feature in odk btn (#1879)

* fix(dialog-task-actions): add keyboard listener event

* feat(icon): icon add

* fix(+page): change dialogTaskActions prop type

* feat(dialog-task-actions): mapNewFeature btn add to open ODK
---
 .../lib/components/dialog-task-actions.svelte | 91 +++++++++++++++++--
 .../src/routes/[projectId]/+page.svelte       |  4 +-
 src/mapper/static/assets/icons/new-window.svg |  1 +
 3 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 src/mapper/static/assets/icons/new-window.svg

diff --git a/src/mapper/src/lib/components/dialog-task-actions.svelte b/src/mapper/src/lib/components/dialog-task-actions.svelte
index 577c47d6c0..cf5813cef3 100644
--- a/src/mapper/src/lib/components/dialog-task-actions.svelte
+++ b/src/mapper/src/lib/components/dialog-task-actions.svelte
@@ -1,16 +1,37 @@
 <script lang="ts">
 	import { mapTask, finishTask, resetTask } from '$lib/db/events';
+	import type { ProjectData } from '$lib/types';
 	import { getTaskStore } from '$store/tasks.svelte.ts';
+	import { getAlertStore } from '$store/common.svelte.ts';
 
 	type Props = {
 		isTaskActionModalOpen: boolean;
 		toggleTaskActionModal: (value: boolean) => void;
 		selectedTab: string;
-		projectId: number;
+		projectData: ProjectData;
 	};
 
 	const taskStore = getTaskStore();
-	let { isTaskActionModalOpen, toggleTaskActionModal, selectedTab, projectId }: Props = $props();
+	const alertStore = getAlertStore();
+	let { isTaskActionModalOpen, toggleTaskActionModal, selectedTab, projectData }: Props = $props();
+
+	function mapNewFeature() {
+		const xformId = projectData?.odk_form_id;
+		if (!xformId) {
+			return;
+		}
+
+		const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+		if (isMobile) {
+			document.location.href = `odkcollect://form/${xformId}`;
+		} else {
+			alertStore.setAlert({
+				variant: 'warning',
+				message: 'Requires a mobile phone with ODK Collect.',
+			});
+		}
+	}
 </script>
 
 {#if taskStore.selectedTaskId && selectedTab === 'map' && isTaskActionModalOpen && (taskStore.selectedTaskState === 'UNLOCKED_TO_MAP' || taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING')}
@@ -18,14 +39,42 @@
 		<div
 			class="bg-white w-full font-barlow-regular md:max-w-[580px] pointer-events-auto px-4 py-3 sm:py-4 rounded-t-3xl"
 		>
-			<div class="flex justify-between items-center">
-				<p class="text-[#333] text-xl font-barlow-semibold">Task #{taskStore.selectedTaskId}</p>
+			<div class="flex justify-end">
 				<hot-icon
 					name="close"
 					class="!text-[1.5rem] text-[#52525B] cursor-pointer hover:text-red-600 duration-200"
 					onclick={() => toggleTaskActionModal(false)}
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							toggleTaskActionModal(false);
+						}
+					}}
+					role="button"
+					tabindex="0"
 				></hot-icon>
 			</div>
+			<div class="flex justify-between items-center">
+				<p class="text-[#333] text-xl font-barlow-semibold">Task #{taskStore.selectedTaskId}</p>
+				<div
+					onclick={() => {
+						mapNewFeature();
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							mapNewFeature();
+						}
+					}}
+					role="button"
+					tabindex="0"
+					class="flex items-center gap-1 cursor-pointer group"
+				>
+					<hot-icon
+						name="new-window"
+						class="!text-[1.25rem] duration-200 text-[#333333] font-light group-hover:text-black"
+					></hot-icon>
+					<p class="uppercase text-[0.813rem] text-red-600 group-hover:text-red-700">map new feature</p>
+				</div>
+			</div>
 
 			{#if taskStore.selectedTaskState === 'UNLOCKED_TO_MAP'}
 				<p class="my-4 sm:my-6">Do you want to start mapping task #{taskStore.selectedTaskId}?</p>
@@ -36,6 +85,13 @@
 						class="secondary"
 						onclick={() => toggleTaskActionModal(false)}
 						outline
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								toggleTaskActionModal(false);
+							}
+						}}
+						role="button"
+						tabindex="0"
 					>
 						<span class="font-barlow-medium text-sm">CANCEL</span>
 					</sl-button>
@@ -43,7 +99,14 @@
 						variant="default"
 						size="small"
 						class="primary"
-						onclick={() => mapTask(projectId, taskStore.selectedTaskId)}
+						onclick={() => mapTask(projectData?.id, taskStore.selectedTaskId)}
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								mapTask(projectData?.id, taskStore.selectedTaskId);
+							}
+						}}
+						role="button"
+						tabindex="0"
 					>
 						<hot-icon slot="prefix" name="location" class="!text-[1rem] text-white cursor-pointer duration-200"
 						></hot-icon>
@@ -54,11 +117,18 @@
 				<p class="my-4 sm:my-6">Task #{taskStore.selectedTaskId} 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(projectId, taskStore.selectedTaskId)}
+						onclick={() => resetTask(projectData?.id, taskStore.selectedTaskId)}
 						variant="default"
 						outline
 						size="small"
 						class="secondary"
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								resetTask(projectData?.id, taskStore.selectedTaskId);
+							}
+						}}
+						role="button"
+						tabindex="0"
 					>
 						<hot-icon
 							slot="prefix"
@@ -68,10 +138,17 @@
 						<span class="font-barlow-medium text-sm">CANCEL MAPPING</span>
 					</sl-button>
 					<sl-button
-						onclick={() => finishTask(projectId, taskStore.selectedTaskId)}
+						onclick={() => finishTask(projectData?.id, taskStore.selectedTaskId)}
 						variant="default"
 						size="small"
 						class="green"
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								finishTask(projectData?.id, taskStore.selectedTaskId);
+							}
+						}}
+						role="button"
+						tabindex="0"
 					>
 						<hot-icon slot="prefix" name="check" class="!text-[1rem] text-white cursor-pointer duration-200"></hot-icon>
 						<span class="font-barlow-medium text-sm">COMPLETE MAPPING</span>
diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
index 0de4ec3319..6ae5ac7bed 100644
--- a/src/mapper/src/routes/[projectId]/+page.svelte
+++ b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -143,7 +143,7 @@
 			isTaskActionModalOpen = value;
 		}}
 		{selectedTab}
-		projectId={data.projectId}
+		projectData={data?.project}
 	/>
 
 	{#if selectedTab !== 'map'}
@@ -202,7 +202,7 @@
 		class="z-9999 fixed bottom-0 left-0 right-0"
 		placement="bottom"
 		no-scroll-controls
-		onsl-tab-show={(e:  CustomEvent<{ name: string }>) => {
+		onsl-tab-show={(e: CustomEvent<{ name: string }>) => {
 			selectedTab = e.detail.name;
 			if (
 				e.detail.name !== 'qrcode' &&
diff --git a/src/mapper/static/assets/icons/new-window.svg b/src/mapper/static/assets/icons/new-window.svg
new file mode 100644
index 0000000000..9fbfa97cb7
--- /dev/null
+++ b/src/mapper/static/assets/icons/new-window.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor" class="bi"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240v80H200v560h560v-240h80v240q0 33-23.5 56.5T760-120H200Zm440-400v-120H520v-80h120v-120h80v120h120v80H720v120h-80Z"/></svg>
\ No newline at end of file