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
hotosm · Nov 13, 2024 · a05c60b · a05c60b
1 parent 510dfb0
commit a05c60b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 9 deletions.
diff --git a/src/mapper/src/lib/components/dialog-task-actions.svelte b/src/mapper/src/lib/components/dialog-task-actions.svelte
@@ -1,31 +1,80 @@
 <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')}
 	<div class="flex justify-center !w-[100vw] absolute bottom-[4rem] left-0 pointer-events-none z-50">
 		<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,14 +85,28 @@
 						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>
 					<sl-button
 						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
@@ -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