From 3b0640875e22b4e63e64e3b7a0fb3d74f8462323 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 10:59:46 +0200
Subject: [PATCH] minor Form fixes

---
 .../components/refactor/ComposerForm.svelte   | 70 +++++++++++--------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index 343769f..950fdc8 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -72,7 +72,13 @@
 			},
 			submitting: {
 				on: {
-					SUBMIT: 'submitted'
+					SUBMIT: 'submitted',
+					PREV: {
+						target: 'input',
+						actions: assign({
+							currentField: (context) => context.currentField - 1
+						})
+					}
 				}
 			},
 			submitted: {
@@ -119,36 +125,38 @@
 
 <div class="p-6">
 	<form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full max-w-md">
-		<div class="mb-4">
-			{#if $errors[fields[$state.context.currentField].name]}
-				<span class="block mb-2 font-semibold text-red-500">
-					{$errors[fields[$state.context.currentField].name]}
-				</span>
-			{:else}
-				<label
-					for={fields[$state.context.currentField].name}
-					class="block mb-2 font-semibold text-white"
-				>
-					{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
-						fields[$state.context.currentField].name.slice(1)}
-				</label>
-			{/if}
-			{#if fields[$state.context.currentField].type === 'text'}
-				<TextInput {childInput} />
-			{:else if fields[$state.context.currentField].type === 'email'}
-				<TextInput {childInput} />
-			{:else if fields[$state.context.currentField].type === 'textarea'}
-				<TextAreaInput {childInput} />
-			{:else if fields[$state.context.currentField].type === 'select'}
-				<SelectInput {childInput} />
-			{:else if fields[$state.context.currentField].type === 'slider'}
-				<SliderInput {childInput} />
-			{:else if fields[$state.context.currentField].type === 'toggle'}
-				<ToggleInput {childInput} />
-			{:else if fields[$state.context.currentField].type === 'number'}
-				<NumberInput {childInput} />
-			{/if}
-		</div>
+		{#if !$state.matches('submitting')}
+			<div class="mb-4">
+				{#if $errors[fields[$state.context.currentField].name]}
+					<span class="block mb-2 font-semibold text-red-500">
+						{$errors[fields[$state.context.currentField].name]}
+					</span>
+				{:else}
+					<label
+						for={fields[$state.context.currentField].name}
+						class="block mb-2 font-semibold text-white"
+					>
+						{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
+							fields[$state.context.currentField].name.slice(1)}
+					</label>
+				{/if}
+				{#if fields[$state.context.currentField].type === 'text'}
+					<TextInput {childInput} />
+				{:else if fields[$state.context.currentField].type === 'email'}
+					<TextInput {childInput} />
+				{:else if fields[$state.context.currentField].type === 'textarea'}
+					<TextAreaInput {childInput} />
+				{:else if fields[$state.context.currentField].type === 'select'}
+					<SelectInput {childInput} />
+				{:else if fields[$state.context.currentField].type === 'slider'}
+					<SliderInput {childInput} />
+				{:else if fields[$state.context.currentField].type === 'toggle'}
+					<ToggleInput {childInput} />
+				{:else if fields[$state.context.currentField].type === 'number'}
+					<NumberInput {childInput} />
+				{/if}
+			</div>
+		{/if}
 		{#if $state.matches('submitting')}
 			<div class="mb-4">
 				<h2 class="text-lg font-semibold text-white">Summary</h2>