samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Generically populate each input field as a custom step duiring the form process flow

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 09:30:39 +02:00
parent c98253ceb7
commit 20563628e3
1 changed files with 134 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
src/lib/components/refactor/ComposerForm.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { createMachine, assign } from 'xstate';
import { useMachine } from '@xstate/svelte';
import { superForm } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client';
import { afterUpdate } from 'svelte';
import { writable } from 'svelte/store';
import TextInput from './inputFields/TextInput.svelte'; import TextInput from './inputFields/TextInput.svelte';
import ToggleInput from './inputFields/ToggleInput.svelte'; import ToggleInput from './inputFields/ToggleInput.svelte';
import SliderInput from './inputFields/SliderInput.svelte'; import SliderInput from './inputFields/SliderInput.svelte';
@ -27,100 +27,155 @@
clearOnSubmit: 'errors-and-message' clearOnSubmit: 'errors-and-message'
}); });
const successMessage = writable<string | null>(null); const formMachine = createMachine({
id: 'form',
// Update the isValidated property of the store whenever the errors object changes initial: 'start',
$: { context: {
let isValid = fields.every((field) => !$errors[field.name]); currentField: 0,
if (isValid) { formData: initialFormData
$me.do.state.send('VALIDATE'); },
} else { states: {
$me.do.state.send('INVALIDATE'); start: {
on: {
NEXT: 'input'
}
},
input: {
on: {
NEXT: {
target: 'input',
actions: assign({
currentField: (context) => context.currentField + 1
}),
cond: (context) => context.currentField < fields.length - 1
},
PREV: {
target: 'input',
actions: assign({
currentField: (context) => context.currentField - 1
}),
cond: (context) => context.currentField > 0
},
SUBMIT: 'submitting'
}
},
submitting: {
// Add your submission logic here
}
} }
} });
const { state, send } = useMachine(formMachine);
async function handleSubmit() { async function handleSubmit() {
// Manually validate the form
const validationResult = await validate(); const validationResult = await validate();
// Prevent submission if there are errors
if (!validationResult.valid) { if (!validationResult.valid) {
return; return;
} }
// Here, we'll just log the form data
console.log(form); console.log(form);
send('SUBMIT');
// Set the success message after successful submission
successMessage.set('Form submitted successfully!');
} }
function handleReset() {
form.set({});
successMessage.set(null);
}
// After update, scroll to the message container for better user experience
afterUpdate(() => {
const messageContainer = document.getElementById('message-container');
if (messageContainer) {
messageContainer.scrollIntoView({ behavior: 'smooth' });
}
});
</script> </script>
<div class="p-6"> <div class="p-6">
My ID is: {$me.id} <br /> <form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
My state is: {$me.state} <div class="mb-4">
{#if $me.state === 'validated'} {#if $errors[fields[$state.context.currentField].name]}
<aside id="message-container" class="p-4 mt-4 bg-green-500 rounded-md"> <span class="block mb-2 font-semibold text-red-500">
<div class="flex items-center justify-between"> {$errors[fields[$state.context.currentField].name]}
<div> </span>
<h2 class="text-lg font-semibold text-white">Success!</h2> {:else}
<p class="mt-1 text-white">{$me.message}</p> <label
</div> for={fields[$state.context.currentField].name}
<button class="block mb-2 font-semibold text-white"
class="p-1 ml-2 text-white bg-red-500 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500"
on:click={handleReset}
> >
Reset {fields[$state.context.currentField].name.charAt(0).toUpperCase() +
</button> fields[$state.context.currentField].name.slice(1)}
</div> </label>
</aside> {/if}
{:else} {#if fields[$state.context.currentField].type === 'text'}
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md"> <TextInput
{#each fields as field (field.name)} {form}
<div class="mb-4"> {errors}
{#if $errors[field.name]} {validate}
<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span> field={fields[$state.context.currentField]}
{:else} {constraints}
<label for={field.name} class="block mb-2 font-semibold text-white" />
>{field.name.charAt(0).toUpperCase() + field.name.slice(1)} {:else if fields[$state.context.currentField].type === 'email'}
</label> <TextInput
{/if} {form}
{#if field.type === 'text'} {errors}
<TextInput {form} {errors} {validate} {field} {constraints} /> {validate}
{:else if field.type === 'email'} field={fields[$state.context.currentField]}
<TextInput {form} {errors} {validate} {field} {constraints} /> {constraints}
{:else if field.type === 'textarea'} />
<TextAreaInput {form} {errors} {validate} {field} {constraints} /> {:else if fields[$state.context.currentField].type === 'textarea'}
{:else if field.type === 'select'} <TextAreaInput
<SelectInput {form} {errors} {validate} {field} {constraints} /> {form}
{:else if field.type === 'slider'} {errors}
<SliderInput {form} {errors} {validate} {field} {constraints} /> {validate}
{:else if field.type === 'toggle'} field={fields[$state.context.currentField]}
<ToggleInput {form} {errors} {validate} {field} {constraints} /> {constraints}
{:else if field.type === 'number'} />
<NumberInput {form} {errors} {validate} {field} {constraints} /> {:else if fields[$state.context.currentField].type === 'select'}
{/if} <SelectInput
</div> {form}
{/each} {errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
{:else if fields[$state.context.currentField].type === 'slider'}
<SliderInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
{:else if fields[$state.context.currentField].type === 'toggle'}
<ToggleInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
{:else if fields[$state.context.currentField].type === 'number'}
<NumberInput
{form}
{errors}
{validate}
field={fields[$state.context.currentField]}
{constraints}
/>
{/if}
</div>
<div class="flex justify-between mt-4">
<button
type="button"
on:click={() => send('PREV')}
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
disabled={$state.context.currentField === 0}
>
Previous
</button>
<button
type="button"
on:click={() => send('NEXT')}
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
disabled={$errors[fields[$state.context.currentField].name]}
>
Next
</button>
<button <button
type="submit" type="submit"
class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" class="px-4 py-2 text-white bg-green-500 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
disabled={$me.state === 'notValidated'}
> >
Submit Submit
</button> </button>
</form> </div>
{/if} </form>
</div> </div>