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

refactoring action button area of our recipies svelte part1

Browse Source
This commit is contained in:
Samuel Andert 2023-07-31 10:50:19 +02:00
parent 189857759e
commit 028614a6e0
1 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,32 +43,35 @@
start: { start: {
meta: { meta: {
title: 'Welcome!', title: 'Welcome!',
description: 'Start your registration process by clicking next.' description: 'Start your registration process by clicking next.',
buttonLabel: 'Start'
}, },
on: { NEXT: 'nameInput' } on: { NEXT: 'name' }
}, },
nameInput: { name: {
meta: { meta: {
title: 'Name Input', title: 'Name Input',
description: 'Please enter your name.', description: 'Please enter your name.',
fieldLabel: 'Name' fieldLabel: 'Name',
buttonLabel: 'Next'
}, },
entry: assign({ entry: assign({
constraints: (context) => constraints.name || {} constraints: (context) => constraints.name || {}
}), }),
on: { on: {
NEXT: { NEXT: {
target: 'emailInput', target: 'email',
actions: ['setName'] actions: ['setName']
}, },
BACK: 'start' BACK: 'start'
} }
}, },
emailInput: { email: {
meta: { meta: {
title: 'Email Input', title: 'Email Input',
description: 'Please enter your email address.', description: 'Please enter your email address.',
fieldLabel: 'Email' fieldLabel: 'Email',
buttonLabel: 'Next'
}, },
entry: assign({ entry: assign({
constraints: (context) => constraints.email || {} constraints: (context) => constraints.email || {}
@ -78,13 +81,14 @@
target: 'summary', target: 'summary',
actions: ['setEmail'] actions: ['setEmail']
}, },
BACK: 'nameInput' BACK: 'name'
} }
}, },
summary: { summary: {
meta: { meta: {
title: 'Summary', title: 'Summary',
description: 'Review your details before submission.' description: 'Review your details before submission.',
buttonLabel: 'test'
}, },
on: { on: {
SUBMIT: 'submitting' SUBMIT: 'submitting'
@ -107,7 +111,8 @@
}, },
success: { success: {
meta: { meta: {
title: 'Success' title: 'Success',
buttonLabel: 'Start again'
}, },
on: { on: {
RESTART: 'start' RESTART: 'start'
@ -115,7 +120,8 @@
}, },
failure: { failure: {
meta: { meta: {
title: 'Submission Failed' title: 'Submission Failed',
buttonLabel: 'Restart'
}, },
on: { on: {
RESTART: 'start' RESTART: 'start'
@ -163,7 +169,7 @@
<button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}> <button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}>
Next Next
</button> </button>
{:else if $state.value === 'nameInput'} {:else if $state.value === 'name'}
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md"> <form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
<div class="mb-4"> <div class="mb-4">
{#if $errors.name} {#if $errors.name}
@ -177,7 +183,7 @@
{/if} {/if}
<input <input
name="name" name={$state.value}
type="text" 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" 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} bind:value={$form.name}
@ -194,7 +200,7 @@
Next Next
</button> </button>
</form> </form>
{:else if $state.value === 'emailInput'} {: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-md">
<div class="mb-4"> <div class="mb-4">
{#if $errors.email} {#if $errors.email}
@ -208,7 +214,7 @@
{/if} {/if}
<input <input
name="email" name={$state.value}
type="email" 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" 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} bind:value={$form.email}
@ -253,3 +259,18 @@
</button> </button>
{/if} {/if}
</main> </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
? stateMachine.states[$state.value].meta.buttonLabel
: ''}
</button>
{/if}
</div>