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

Further improved the dynamic action area renderering

Browse Source
This commit is contained in:
Samuel Andert 2023-07-31 11:37:14 +02:00
parent 028614a6e0
commit 6092199fe5
1 changed files with 115 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/lib/components/examples/Recipies.svelte
View File

@ -5,6 +5,7 @@
import { TreeSchema } from '$lib/types/TreeSchema';
import { writable, get } from 'svelte/store';
import { createUser } from './userService';
import { derived } from 'svelte/store';
const initialFormData = { name: '', age: '' };
@ -150,27 +151,29 @@
const { state, send } = useMachine(stateMachine);
$: {
// Reactively update the form validation status based on the errors
isFormValid.set(Object.keys(get(errors)).length === 0);
}
const possibleActions = derived(state, ($state) =>
Object.keys(stateMachine.states[$state.value]?.on || {})
);
</script>
<main>
<main class="flex items-center justify-center w-full h-full">
<div class="w-full max-w-lg">
<h1 class="text-2xl">
{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
? stateMachine.states[$state.value].meta.title
: 'Unknown state'}
</h1>
<p>
{$state.value in stateMachine.states ? stateMachine.states[$state.value].meta.description : ''}
{$state.value in stateMachine.states
? stateMachine.states[$state.value].meta.description
: ''}
</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">
{#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>
@ -191,17 +194,9 @@
{...$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">
<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>
@ -222,55 +217,57 @@
{...$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 -->
Add spinner 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}
{#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('NEXT')}
disabled={$errors[$state.value]}
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>