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

Updated Summary page UI

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 16:15:54 +02:00
parent f568c83f16
commit 503773b121
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/composer/ComposerForm.svelte
View File

@ -45,7 +45,7 @@
on: { on: {
NEXT: [ NEXT: [
{ {
target: 'submitting', target: 'summary',
actions: assign({ actions: assign({
formData: (context, event) => ({ formData: (context, event) => ({
...context.formData, ...context.formData,
@ -76,7 +76,7 @@
} }
} }
}, },
submitting: { summary: {
on: { on: {
SUBMIT: 'submitted', SUBMIT: 'submitted',
PREV: { PREV: {
@ -123,7 +123,7 @@
} }
const fieldValue = $form[currentFieldName]; const fieldValue = $form[currentFieldName];
if ($state.matches('submitting')) { if ($state.matches('summary')) {
send('SUBMIT'); send('SUBMIT');
} else { } else {
send('NEXT', { fieldValue }); send('NEXT', { fieldValue });
@ -192,12 +192,20 @@
{/if} {/if}
</div> </div>
{/if} {/if}
{#if $state.matches('submitting')} {#if $state.matches('summary')}
<div class="mb-4"> <div class="mb-4">
<h2 class="text-lg font-semibold text-white">Summary</h2> <h2 class="mb-2 text-5xl font-semibold text-center text-white">Summary</h2>
{#each Object.entries($state.context.formData) as [key, value]} <p class="text-2xl text-center text-white">Please verify your summary</p>
<p class="mt-1 text-white">{key}: {value}</p> <dl class="list-dl">
{/each} {#each Object.entries($state.context.formData) as [key, value]}
<div>
<span class="flex-auto">
<dt class="text-sm text-gray-300">{key}</dt>
<dd class="text-2xl font-semibold">{value}</dd>
</span>
</div>
{/each}
</dl>
</div> </div>
{/if} {/if}
{#if $state.matches('submitted')} {#if $state.matches('submitted')}