Handle back button

src/OAP/Oap.Theme.Svelte/src/ApplicationForm.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { onMount, setContext } from "svelte";
 	import { Client, setContextClient, queryStore } from "@urql/svelte";
-	import { graphql } from "./gql";
-	import ApplicationFormStep from "./components/ApplicationFormStep.svelte";
-	import { step, applicationId, application } from "./lib/stores";
-	import { createHttpClient } from "./lib/oap/oapApiV1Client";
-	import { onMount } from "svelte";
 	import type { IServiceError, IServiceResult } from "facility-core";
 
+	import { graphql } from "./gql";
+	import { applicationFormState } from "./lib/stores";
+	import { createHttpClient } from "./lib/oap/oapApiV1Client";
+
+	import ApplicationFormStep from "./components/ApplicationFormStep.svelte";
+	import type { FormContext } from "./lib/contextModels";
+
 	export let antiForgeryToken: string | null;
 	export let contentItemId: string;
 	export let client: Client;
@@ -44,19 +47,19 @@
 	let serviceError: IServiceError | null = null;
 	let serviceMsg: string | null;
 
-	function setResultOrError<T>(
-		response: IServiceResult<T>,
-	) {
+	function setResultOrError<T>(response: IServiceResult<T>) {
 		if (response.error) {
 			serviceError = response.error;
 		} else {
 			serviceMsg = "Did a thing!";
-			step.update((x) => x + 1);
+			$applicationFormState.currentStep += 1;
 		}
 	}
 
 	async function handleSubmit(event: SubmitEvent) {
-		if (!$applicationId) {
+		event.preventDefault();
+
+		if (!$applicationFormState.application?.id) {
 			const response = await oapApi.createApplication({
 				applicationCreateSet: {
 					terms: {
@@ -66,10 +69,14 @@
 			});
 
 			setResultOrError(response);
-			applicationId.set(response.value?.application?.id ?? null);
+
+			applicationFormState.update((a) => {
+				a.application = response.value?.application ?? null;
+				return a;
+			});
 		} else {
 			const response = await oapApi.updateApplication({
-				id: $applicationId,
+				id: $applicationFormState.application?.id,
 				applicationChangeSet: {
 					terms: {
 						hasReadInstructions: true,
@@ -78,17 +85,38 @@
 			});
 
 			setResultOrError(response);
+
+			applicationFormState.update((a) => {
+				a.application = response.value?.application ?? null;
+				return a;
+			});
 		}
 	}
 
+	function handleBack(event: Event) {
+		event.preventDefault();
+		applicationFormState.update((a) => {
+			a.currentStep -= 1;
+			return a;
+		});
+	}
+
+	setContext<FormContext>("formContext", {
+		handleSubmit,
+		handleBack,
+	});
+
 	onMount(async () => {
-		if ($applicationId) {
+		if ($applicationFormState.application?.id) {
 			const response = await oapApi.getApplication({
-				id: $applicationId,
+				id: $applicationFormState.application.id,
 			});
 
 			setResultOrError(response);
-			application.set(response.value?.application ?? null);
+			applicationFormState.update((a) => {
+				a.application = response.value?.application ?? null;
+				return a;
+			});
 		}
 	});
 </script>
@@ -101,7 +129,7 @@
 	<p>No content data??</p>
 {:else if $content.data?.oapApplicationForm}
 	<div class="flex flex-col gap-x-4">
-		{#each $content.data?.oapApplicationForm as oapApplicationForm}
+		{#each $content.data.oapApplicationForm as oapApplicationForm}
 			{#if oapApplicationForm}
 				<h1
 					class="mb-6 border-b-2 border-solid border-black pb-1 text-center text-2xl font-bold"
@@ -120,9 +148,8 @@
 				</div>
 			{/if}
 			{#each oapApplicationForm?.list?.contentItems ?? [] as contentItem, index}
-				{#if contentItem?.__typename === "OapApplicationFormStep" && $step === index}
+				{#if contentItem?.__typename === "OapApplicationFormStep" && $applicationFormState.currentStep === index}
 					<ApplicationFormStep
-						onSubmit={handleSubmit}
 						{antiForgeryToken}
 						fragment={contentItem}
 					/>

src/OAP/Oap.Theme.Svelte/src/components/ApplicationFormStep.svelte

@@ -24,10 +24,6 @@
 	import Form from "./Form.svelte";
 	import type { EventHandler } from "svelte/elements";
 
-	export let onSubmit:
-		| EventHandler<SubmitEvent, HTMLFormElement>
-		| undefined
-		| null;
 	export let antiForgeryToken: string | null;
 	export let fragment: FragmentType<typeof ApplicationFormStepFragment>;
 
@@ -44,6 +40,6 @@
 
 {#each content.flow?.widgets ?? [] as widget}
 	{#if widget?.__typename === "Form"}
-		<Form {onSubmit} {antiForgeryToken} fragment={widget} />
+		<Form {antiForgeryToken} fragment={widget} />
 	{/if}
 {/each}

src/OAP/Oap.Theme.Svelte/src/components/Fields/Button.svelte

@@ -7,10 +7,14 @@
 </script>
 
 <script lang="ts">
+	import type { EventHandler } from "svelte/elements";
+
 	export let type: HTMLButtonElement["type"] | null | undefined;
 	export let name: string | null | undefined;
 	export let id: string | null | undefined;
 	export let text: string | null | undefined;
+	export let onClick: EventHandler<Event, HTMLButtonElement> | undefined =
+		undefined;
 
 	const cssClasses =
 		type === "submit"
@@ -18,6 +22,6 @@
 			: "cursor-pointer px-4 py-2 text-gray-800 hover:text-gray-400";
 </script>
 
-<button class={cssClasses} {type} {name} {id}>
+<button class={cssClasses} {type} {name} {id} on:click={onClick}>
 	{@html text}
 </button>

src/OAP/Oap.Theme.Svelte/src/components/Form.svelte

@@ -26,7 +26,6 @@
 </script>
 
 <script lang="ts">
-	import type { EventHandler } from "svelte/elements";
 	import { useFragment, type FragmentType } from "../gql";
 	import ButtonWidget from "./Widgets/ButtonWidget.svelte";
 	import InputWidget from "./Widgets/InputWidget.svelte";
@@ -34,14 +33,14 @@
 	import TextAreaWidget from "./Widgets/TextAreaWidget.svelte";
 	import LabelWidget from "./Widgets/LabelWidget.svelte";
 	import ApplicationFormButtonsWidget from "./Widgets/ApplicationFormButtonsWidget.svelte";
+	import { getContext } from "svelte";
+	import { type FormContext } from "../lib/contextModels";
 
-	export let onSubmit:
-		| EventHandler<SubmitEvent, HTMLFormElement>
-		| undefined
-		| null;
 	export let antiForgeryToken: string | null;
 	export let fragment: FragmentType<typeof FormFragment>;
 
+	const formContext = getContext<FormContext>("formContext");
+
 	const content = useFragment(FormFragment, fragment);
 </script>
 
@@ -49,7 +48,7 @@
 	id={content.formElement?.id}
 	action={content.form?.action}
 	method={content.form?.method}
-	on:submit|preventDefault={onSubmit}
+	on:submit|preventDefault={formContext.handleSubmit}
 >
 	<input
 		type="hidden"

src/OAP/Oap.Theme.Svelte/src/components/Widgets/ApplicationFormButtonsWidget.svelte

@@ -26,6 +26,8 @@
 	import { useFragment, type FragmentType } from "../../gql";
 	import Widget from "./Widget.svelte";
 	import Button, { isButtonType } from "../Fields/Button.svelte";
+	import { getContext } from "svelte";
+	import type { FormContext } from "../../lib/contextModels";
 	export let fragment: FragmentType<
 		typeof OapApplicationFormButtonsWidgetFragment
 	>;
@@ -33,6 +35,8 @@
 		OapApplicationFormButtonsWidgetFragment,
 		fragment,
 	);
+
+	const formContext = getContext<FormContext>("formContext");
 </script>
 
 <Widget metadata={content.metadata}>
@@ -45,6 +49,7 @@
 				type={isButtonType(content.back?.type)
 					? content.back?.type
 					: "button"}
+				onClick={formContext.handleBack}
 			/>
 		{:else}
 			<span>&nbsp;</span>

src/OAP/Oap.Theme.Svelte/src/lib/contextModels.ts

@@ -0,0 +1,6 @@
+import type { EventHandler } from "svelte/elements";
+
+export interface FormContext {
+	handleSubmit: EventHandler<SubmitEvent, HTMLFormElement>;
+	handleBack: EventHandler<Event, HTMLButtonElement>;
+}

src/OAP/Oap.Theme.Svelte/src/lib/stores.ts

@@ -1,5 +1,3 @@
-import applicationId from "./stores/applicationId";
-import step from "./stores/step";
-import application from './stores/application';
+import applicationFormState from "./stores/applicationFormState";
 
-export { step, applicationId, application };
+export { applicationFormState };

src/OAP/Oap.Theme.Svelte/src/lib/stores/application.ts

@@ -1,6 +0,0 @@
-import { writable } from "svelte/store";
-import { type IApplication } from "../oap/oapApiV1ClientTypes";
-
-const application = writable<IApplication | null>(null);
-
-export default application;

src/OAP/Oap.Theme.Svelte/src/lib/stores/applicationFormState.ts

@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+import type { ApplicationFormState } from "../viewModels";
+
+const applicationFormState = writable<ApplicationFormState>({
+	application: null,
+	currentStep: 0,
+});
+
+export default applicationFormState;

src/OAP/Oap.Theme.Svelte/src/lib/stores/applicationId.ts

@@ -1,4 +0,0 @@
-import { writable } from 'svelte/store';
-const applicationId = writable<string | null>(null);
-
-export default applicationId;

src/OAP/Oap.Theme.Svelte/src/lib/stores/step.ts

@@ -1,4 +0,0 @@
-import { writable } from 'svelte/store';
-const step = writable(0);
-
-export default step;

src/OAP/Oap.Theme.Svelte/src/lib/viewModels.ts

@@ -0,0 +1,6 @@
+import type { IApplication } from "./oap/oapApiV1ClientTypes";
+
+export interface ApplicationFormState {
+	application: IApplication | null;
+	currentStep: number;
+}