feat(mapper): updates to web forms submission image upload (#2292)

* hide conflicting footer when web forms drawer is open

* fix: Submission details page crashing when fetching photos fails

* feature: improved web forms submission

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fixed stepper layout

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: DanielJDufour

src/mapper/src/lib/components/forms/wrapper.svelte

@@ -2,26 +2,96 @@
 	import type { SlDrawer } from '@shoelace-style/shoelace';
 
 	import { getCommonStore } from '$store/common.svelte.ts';
+	import { getLoginStore } from '$store/login.svelte.ts';
+
+	const CUSTOM_UPLOAD_ELEMENT_ID = '95c6807c-82b4-4208-b5df-5a3e795227b0';
 
 	const API_URL = import.meta.env.VITE_API_URL;
 	type Props = {
 		display: Boolean;
 		entityId: string | undefined;
 		projectId: number | undefined;
+		taskId: number | undefined;
 		webFormsRef: HTMLElement | undefined;
 	};
 	const commonStore = getCommonStore();
-	let { display = $bindable(false), entityId, webFormsRef = $bindable(undefined), projectId }: Props = $props();
+	const loginStore = getLoginStore();
+
+	let { display = $bindable(false), entityId, webFormsRef = $bindable(undefined), projectId, taskId }: Props = $props();
 	let drawerRef: SlDrawer;
-	let iframeRef: HTMLIFrameElement;
+	let iframeRef: HTMLIFrameElement | undefined;
 	let odkForm: any;
-	// to-do: hide drawer upon successful submission
+	let startDate: string | undefined;
+
+	let pic: any;
+
+	function handleMutation() {
+		if (!iframeRef) return;
+		if (!iframeRef.contentDocument) return;
+		if (!odkForm) return;
+		if (!webFormsRef) return;
+
+		// check if we've already added the custom upload input
+		if (iframeRef.contentDocument.getElementById(CUSTOM_UPLOAD_ELEMENT_ID)) return;
+		console.log('over-writing control node');
+
+		const uploadControl = odkForm.getChildren().find((n: any) => n.constructor.name === 'UploadControl');
+		const uploadControlNodeId = uploadControl.nodeId;
+		const uploadControlNodeSelector = `[id='${uploadControlNodeId}_container']`;
+		const uploadControlNode = webFormsRef.querySelector(uploadControlNodeSelector);
+		if (!uploadControlNode) return;
+
+		const controlText = iframeRef.contentDocument.createElement('div');
+		controlText.id = CUSTOM_UPLOAD_ELEMENT_ID;
+		controlText.className = 'control-text';
+		controlText.style.marginBottom = '.75rem';
+
+		const label = iframeRef.contentDocument.createElement('label');
+		label.style.fontWeight = '400';
+		label.style.lineHeight = '1.8rem';
+		const span = iframeRef.contentDocument.createElement('span');
+		span.textContent = uploadControl.engineState.label.chunks.map((chunk: any) => chunk.asString).join(' ');
+		label.appendChild(span);
+		controlText.appendChild(label);
+		const inputWrapper = iframeRef.contentDocument.createElement('div');
+		const input = iframeRef.contentDocument.createElement('input');
+		input.id = CUSTOM_UPLOAD_ELEMENT_ID;
+		input.addEventListener('change', () => {
+			pic = input.files?.[0];
+		});
+		input.type = 'file';
+		inputWrapper.appendChild(input);
+
+		uploadControlNode.innerHTML = '';
+		uploadControlNode.appendChild(controlText);
+		uploadControlNode.appendChild(inputWrapper);
+	}
 	function handleSubmit(payload: any) {
 		(async () => {
 			if (!payload.detail) return;
+
+			let submission_xml = await payload.detail[0].data.instanceFile.text();
+
+			submission_xml = submission_xml.replace('<start/>', `<start>${startDate}</start>`);
+			submission_xml = submission_xml.replace('<end/>', `<end>${new Date().toISOString()}</end>`);
+
+			const authDetails = loginStore?.getAuthDetails;
+			if (authDetails?.username) {
+				submission_xml = submission_xml.replace('<username/>', `<username>${authDetails?.username}</username>`);
+			}
+
+			if (authDetails?.email_address) {
+				submission_xml = submission_xml.replace('<email/>', `<email>${authDetails?.email_address}</email>`);
+			}
+
+			if (pic && pic?.name) {
+				submission_xml = submission_xml.replace('<image/>', `<image>${pic?.name}</image>`);
+			}
+
 			const url = `${API_URL}/submission?project_id=${projectId}`;
 			var data = new FormData();
-			data.append('submission_xml', await payload.detail[0].data.instanceFile.text());
+			data.append('submission_xml', submission_xml);
+			data.append('submission_files', pic);
 			await fetch(url, {
 				method: 'POST',
 				body: data,
@@ -35,11 +105,12 @@
 			console.log('set odkForm', odkForm);
 			// over-write default language
 			setFormLanguage(commonStore.locale);
+
+			const nodes = odkForm.getChildren();
+
 			// select feature that you clicked on map
-			odkForm
-				.getChildren()
-				.find((it: any) => it.definition.nodeset === '/data/feature')
-				?.setValueState([entityId]);
+			nodes.find((it: any) => it.definition.nodeset === '/data/feature')?.setValueState([entityId]);
+			nodes.find((it: any) => it.definition.nodeset === '/data/task_id')?.setValueState(`${taskId}`);
 		}
 	}
 	const setFormLanguage = (newLocale: string) => {
@@ -51,6 +122,15 @@
 			}
 		}
 	};
+	$effect(() => {
+		// making sure we re-run whenever one of the following reactive variables changes
+		display;
+		projectId;
+		entityId;
+		if (display) {
+			startDate = new Date().toISOString();
+		}
+	});
 	$effect(() => {
 		if (commonStore.locale) {
 			setFormLanguage(commonStore.locale);
@@ -63,17 +143,21 @@
 		projectId;
 		entityId;
 		if (iframeRef) {
+			const observer = new MutationObserver(handleMutation);
 			const intervalId = setInterval(() => {
 				webFormsRef = iframeRef?.contentDocument?.querySelector('odk-web-form') || undefined;
 				if (webFormsRef) {
 					clearInterval(intervalId);
 					webFormsRef.addEventListener('submit', handleSubmit);
 					webFormsRef.addEventListener('odkForm', handleOdkForm);
+					observer.observe(webFormsRef, { attributes: true, childList: true, subtree: true });
 				}
 			}, 10);
+
 			// clear interval when re-run
 			return () => {
 				clearInterval(intervalId);
+				observer.disconnect();
 			};
 		}
 	});
@@ -104,7 +188,7 @@
 					bind:this={iframeRef}
 					title="odk-web-forms-wrapper"
 					src={`./web-forms.html?projectId=${projectId}&entityId=${entityId}&api_url=${API_URL}&language=${commonStore.locale}`}
-					style="height: {window.outerHeight}px; width: 100%; z-index: 11;"
+					style="height: 100%; width: 100%; z-index: 11;"
 				>
 				</iframe>
 			{/key}

src/mapper/src/routes/[projectId]/+page.svelte

@@ -381,7 +381,8 @@
 		bind:webFormsRef
 		bind:display={displayWebFormsDrawer}
 		projectId={data?.projectId}
-		entityId={selectedEntityId}
+		entityId={selectedEntityId || undefined}
+		taskId={taskStore.selectedTaskId || undefined}
 	/>
 </div>
 

src/mapper/src/store/login.svelte.ts

@@ -1,6 +1,7 @@
 type authDetailsType = {
 	id: number;
 	username: string;
+	email_address?: string;
 	picture: string;
 	role: string;
 	// Here we omit project_roles and orgs_managed as they are not needed