diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte index 70593dc..caaf1f3 100644 --- a/src/lib/components/refactor/ComposerForm.svelte +++ b/src/lib/components/refactor/ComposerForm.svelte @@ -42,24 +42,47 @@ }, input: { on: { - NEXT: { - target: 'input', - actions: assign({ - currentField: (context) => context.currentField + 1 - }), - cond: (context) => context.currentField < fields.length - 1 - }, + NEXT: [ + { + target: 'submitting', + actions: [ + assign({ + formData: (context) => ({ + ...context.formData, + [fields[context.currentField].name]: form[fields[context.currentField].name] + }) + }) + ], + cond: (context) => context.currentField === fields.length - 1 + }, + { + target: 'input', + actions: [ + assign({ + currentField: (context) => context.currentField + 1, + formData: (context) => ({ + ...context.formData, + [fields[context.currentField].name]: form[fields[context.currentField].name] + }) + }) + ] + } + ], PREV: { target: 'input', actions: assign({ currentField: (context) => context.currentField - 1 }), cond: (context) => context.currentField > 0 - }, - SUBMIT: 'submitting' + } } }, submitting: { + on: { + SUBMIT: 'submitted' + } + }, + submitted: { // Add your submission logic here } } @@ -67,20 +90,27 @@ const { state, send } = useMachine(formMachine); - async function handleSubmit() { - const validationResult = await validate(); + async function handleNext() { + const currentFieldName = fields[$state.context.currentField].name; + const validationResult = await validate(currentFieldName); - if (!validationResult.valid) { + if (validationResult && !validationResult.valid) { return; } - console.log(form); - send('SUBMIT'); + send('NEXT'); + } + + function handleKeyDown(event) { + if (event.key === 'Enter') { + event.preventDefault(); + handleNext(); + } }