Further improved the dynamic action area renderering
This commit is contained in:
Samuel Andert
parent
028614a6e0
commit
6092199fe5
@ -5,6 +5,7 @@
|
|||||||
import { TreeSchema } from '$lib/types/TreeSchema';
|
import { TreeSchema } from '$lib/types/TreeSchema';
|
||||||
import { writable, get } from 'svelte/store';
|
import { writable, get } from 'svelte/store';
|
||||||
import { createUser } from './userService';
|
import { createUser } from './userService';
|
||||||
|
import { derived } from 'svelte/store';
|
||||||
|
|
||||||
const initialFormData = { name: '', age: '' };
|
const initialFormData = { name: '', age: '' };
|
||||||
|
|
||||||
@ -150,127 +151,123 @@
|
|||||||
const { state, send } = useMachine(stateMachine);
|
const { state, send } = useMachine(stateMachine);
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
// Reactively update the form validation status based on the errors
|
|
||||||
isFormValid.set(Object.keys(get(errors)).length === 0);
|
isFormValid.set(Object.keys(get(errors)).length === 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const possibleActions = derived(state, ($state) =>
|
||||||
|
Object.keys(stateMachine.states[$state.value]?.on || {})
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main class="flex items-center justify-center w-full h-full">
|
||||||
<h1 class="text-2xl">
|
<div class="w-full max-w-lg">
|
||||||
{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
|
<h1 class="text-2xl">
|
||||||
? stateMachine.states[$state.value].meta.title
|
{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
|
||||||
: 'Unknown state'}
|
? stateMachine.states[$state.value].meta.title
|
||||||
</h1>
|
: 'Unknown state'}
|
||||||
<p>
|
</h1>
|
||||||
{$state.value in stateMachine.states ? stateMachine.states[$state.value].meta.description : ''}
|
<p>
|
||||||
</p>
|
|
||||||
|
|
||||||
{#if $state.value === 'start'}
|
|
||||||
<button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
{:else if $state.value === 'name'}
|
|
||||||
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
|
|
||||||
<div class="mb-4">
|
|
||||||
{#if $errors.name}
|
|
||||||
<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
|
|
||||||
{:else}
|
|
||||||
<label for="name" class="block mb-2 font-semibold text-white"
|
|
||||||
>{$state.value in stateMachine.states
|
|
||||||
? stateMachine.states[$state.value].meta.fieldLabel
|
|
||||||
: ''}</label
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<input
|
|
||||||
name={$state.value}
|
|
||||||
type="text"
|
|
||||||
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
bind:value={$form.name}
|
|
||||||
aria-invalid={$errors.name ? 'true' : undefined}
|
|
||||||
{...$state.context.constraints}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
disabled={$errors.name}
|
|
||||||
on:click={() => send('NEXT')}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{:else if $state.value === 'email'}
|
|
||||||
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
|
|
||||||
<div class="mb-4">
|
|
||||||
{#if $errors.email}
|
|
||||||
<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
|
|
||||||
{:else}
|
|
||||||
<label for="email" class="block mb-2 font-semibold text-white"
|
|
||||||
>{$state.value in stateMachine.states
|
|
||||||
? stateMachine.states[$state.value].meta.fieldLabel
|
|
||||||
: ''}</label
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<input
|
|
||||||
name={$state.value}
|
|
||||||
type="email"
|
|
||||||
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
bind:value={$form.email}
|
|
||||||
aria-invalid={$errors.email ? 'true' : undefined}
|
|
||||||
{...$state.context.constraints}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
disabled={$errors.email}
|
|
||||||
on:click={() => send('NEXT')}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{:else if $state.value === 'summary'}
|
|
||||||
<p>Name: {$form.name}</p>
|
|
||||||
<p>Email: {$form.email}</p>
|
|
||||||
<button
|
|
||||||
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
|
|
||||||
on:click={() => {
|
|
||||||
console.log('Submit button clicked');
|
|
||||||
send('SUBMIT');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
{:else if $state.value === 'submitting'}
|
|
||||||
<!-- You can optionally add a spinner or some visual indication here -->
|
|
||||||
{:else if $state.value === 'success'}
|
|
||||||
<p>Thank you for your submission!</p>
|
|
||||||
<button class="px-4 py-2 mt-4 text-white bg-green-500 rounded" on:click={() => send('RESTART')}>
|
|
||||||
Start Again
|
|
||||||
</button>
|
|
||||||
{:else if $state.value === 'failure'}
|
|
||||||
<p class="text-red-500">
|
|
||||||
Error: {$state.context.error?.message || 'An unknown error occurred.'}
|
|
||||||
</p>
|
|
||||||
<button class="px-4 py-2 mt-4 text-white bg-red-500 rounded" on:click={() => send('RESTART')}>
|
|
||||||
Try Again
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- this is our new button -->
|
|
||||||
<div>
|
|
||||||
{#if $state.value in stateMachine.states && stateMachine.states[$state.value].on.NEXT}
|
|
||||||
<button
|
|
||||||
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
|
|
||||||
on:click={() => send('NEXT')}
|
|
||||||
disabled={$errors[$state.value]}
|
|
||||||
>
|
|
||||||
{$state.value in stateMachine.states
|
{$state.value in stateMachine.states
|
||||||
? stateMachine.states[$state.value].meta.buttonLabel
|
? stateMachine.states[$state.value].meta.description
|
||||||
: ''}
|
: ''}
|
||||||
</button>
|
</p>
|
||||||
{/if}
|
|
||||||
</div>
|
{#if $state.value === 'start'}Welcome{:else if $state.value === 'name'}
|
||||||
|
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
|
||||||
|
<div class="mb-4">
|
||||||
|
{#if $errors.name}
|
||||||
|
<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
|
||||||
|
{:else}
|
||||||
|
<label for="name" class="block mb-2 font-semibold text-white"
|
||||||
|
>{$state.value in stateMachine.states
|
||||||
|
? stateMachine.states[$state.value].meta.fieldLabel
|
||||||
|
: ''}</label
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<input
|
||||||
|
name={$state.value}
|
||||||
|
type="text"
|
||||||
|
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
bind:value={$form.name}
|
||||||
|
aria-invalid={$errors.name ? 'true' : undefined}
|
||||||
|
{...$state.context.constraints}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{:else if $state.value === 'email'}
|
||||||
|
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
|
||||||
|
<div class="mb-4">
|
||||||
|
{#if $errors.email}
|
||||||
|
<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
|
||||||
|
{:else}
|
||||||
|
<label for="email" class="block mb-2 font-semibold text-white"
|
||||||
|
>{$state.value in stateMachine.states
|
||||||
|
? stateMachine.states[$state.value].meta.fieldLabel
|
||||||
|
: ''}</label
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<input
|
||||||
|
name={$state.value}
|
||||||
|
type="email"
|
||||||
|
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
bind:value={$form.email}
|
||||||
|
aria-invalid={$errors.email ? 'true' : undefined}
|
||||||
|
{...$state.context.constraints}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{:else if $state.value === 'summary'}
|
||||||
|
<p>Name: {$form.name}</p>
|
||||||
|
<p>Email: {$form.email}</p>
|
||||||
|
{:else if $state.value === 'submitting'}
|
||||||
|
Add spinner here
|
||||||
|
{:else if $state.value === 'success'}
|
||||||
|
<p>Thank you for your submission!</p>
|
||||||
|
{:else if $state.value === 'failure'}
|
||||||
|
<p class="text-red-500">
|
||||||
|
Error: {$state.context.error?.message || 'An unknown error occurred.'}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
{#if possibleActions}
|
||||||
|
<div class="flex justify-between">
|
||||||
|
{#each $possibleActions as action (action)}
|
||||||
|
{#if action === 'BACK'}
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
|
||||||
|
on:click={() => send(action)}
|
||||||
|
>
|
||||||
|
{action}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each $possibleActions as action (action)}
|
||||||
|
{#if action !== 'NEXT' && action !== 'BACK'}
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 mx-auto mt-4 text-white bg-blue-500 rounded"
|
||||||
|
on:click={() => send(action)}
|
||||||
|
>
|
||||||
|
{action}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each $possibleActions as action (action)}
|
||||||
|
{#if action === 'NEXT'}
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
|
||||||
|
on:click={() => send(action)}
|
||||||
|
disabled={$errors[$state.value] || $state.context.constraints[$state.value]}
|
||||||
|
>
|
||||||
|
{$state.value in stateMachine.states
|
||||||
|
? stateMachine.states[$state.value].meta.buttonLabel
|
||||||
|
: ''}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user