diff --git a/src/lib/components/cleanup/Recipies.svelte b/src/lib/components/cleanup/Recipies.svelte deleted file mode 100644 index 1ee4978..0000000 --- a/src/lib/components/cleanup/Recipies.svelte +++ /dev/null @@ -1,293 +0,0 @@ - - -
-
-

- {$state.value in stateMachine.states && stateMachine.states[$state.value].meta - ? stateMachine.states[$state.value].meta.title - : 'Unknown state'} -

-

- {$state.value in stateMachine.states - ? stateMachine.states[$state.value].meta.description - : ''} -

- - {#if stateMachine.states[$state.value].meta.composite} - - {/if} - - {#if $state.value === 'start'}Welcome{:else if $state.value === 'name'} -
-
- {#if $errors.name} - {$errors.name} - {:else} - - {/if} - - -
-
- {:else if $state.value === 'email'} -
-
- {#if $errors.email} - {$errors.email} - {:else} - - {/if} - - -
-
- {:else if $state.value === 'summary'} -

Name: {$form.name}

-

Email: {$form.email}

- {:else if $state.value === 'submitting'} - Add spinner here - {:else if $state.value === 'success'} -

Thank you for your submission!

- {:else if $state.value === 'failure'} -

- Error: {$state.context.error?.message || 'An unknown error occurred.'} -

- {/if} - {#if possibleActions} -
- {#each $possibleActions as action (action)} - {#if action === 'BACK'} - - {/if} - {/each} - - {#each $possibleActions as action (action)} - {#if action !== 'NEXT' && action !== 'BACK'} - - {/if} - {/each} - - {#each $possibleActions as action (action)} - {#if action === 'NEXT'} - - {/if} - {/each} -
- {/if} -
-
diff --git a/src/lib/components/cleanup/recipeMachine.ts b/src/lib/components/cleanup/recipeMachine.ts deleted file mode 100644 index 97a7ed4..0000000 --- a/src/lib/components/cleanup/recipeMachine.ts +++ /dev/null @@ -1,96 +0,0 @@ -// src/lib/components/Recipies/machines/authMachine.ts -import { createMachine } from 'xstate'; - -export const recipeMachine = createMachine( - { - id: 'auth', - initial: 'notAuthenticated', - states: { - notAuthenticated: { - meta: { - title: 'Welcome!', - buttons: [ - { - type: 'START', - label: 'Login', - disabled: false - } - ] - }, - on: { - START: { - target: 'signIn', - actions: 'startSignIn' - } - } - }, - signIn: { - meta: { - title: 'Sign In', - composite: { - id: 'signInForm', - component: 'oForm' - }, - buttons: [ - { - type: 'BACK', - label: 'Back', - disabled: true - }, - { - type: 'NEXT', - label: 'Authenticate', - disabled: false - } - ] - }, - on: { - BACK: 'notAuthenticated', - NEXT: { - target: 'authenticated', - actions: 'authenticate' - } - } - }, - authenticated: { - meta: { - title: 'Authenticated', - buttons: [ - { - type: 'LOGOUT', - label: 'Logout', - disabled: false - } - ] - }, - on: { - LOGOUT: { - target: 'notAuthenticated', - actions: 'logout' - } - } - } - } - }, - { - actions: { - startSignIn: (context, event) => { - console.log('Starting sign in process...'); - }, - authenticate: (context, event) => { - console.log('Authenticating...'); - }, - logout: (context, event) => { - console.log('Logging out...'); - }, - setValidated: (context, event) => { - console.log('Form is validated'); - // Add your logic here to update the visual representation - }, - setNotValidated: (context, event) => { - console.log('Form is not validated'); - // Add your logic here to update the visual representation - } - } - } -) \ No newline at end of file diff --git a/src/lib/components/cleanup/toggleMachine.ts b/src/lib/components/cleanup/toggleMachine.ts deleted file mode 100644 index cbd954b..0000000 --- a/src/lib/components/cleanup/toggleMachine.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Machine } from 'xstate'; - -export const toggleMachine = Machine({ - id: 'toggleMachine', - initial: 'NOTREADY', - states: { - NOTREADY: { - on: { TOGGLE: 'READY' } - }, - READY: { - on: { TOGGLE: 'NOTREADY' } - } - } -}); \ No newline at end of file diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte index e4aae2b..5ec4820 100644 --- a/src/lib/components/refactor/ComposerForm.svelte +++ b/src/lib/components/refactor/ComposerForm.svelte @@ -8,17 +8,19 @@ import SelectInput from './inputFields/SelectInput.svelte'; import TextAreaInput from './inputFields/TextAreaInput.svelte'; import NumberInput from './inputFields/NumberInput.svelte'; + import { derived } from 'svelte/store'; + import { createUser } from './userService'; export let me; const { fields, validators } = $me.context; - const initialFormData = fields.reduce((acc, field) => { + let initialFormData = fields.reduce((acc, field) => { acc[field.name] = field.placeholder; return acc; }, {}); - const { form, errors, validate, constraints } = superForm(initialFormData, { + let { form, errors, validate, constraints } = superForm(initialFormData, { validators: validators, warnings: { noValidationAndConstraints: false @@ -61,6 +63,7 @@ ] } ], + PREV: { target: 'input', actions: assign({ @@ -82,13 +85,33 @@ } }, submitted: { - // Add your submission logic here + on: { + RESTART: { + target: 'input', + actions: assign({ + currentField: 0, + formData: () => ({ ...initialFormData }) // Create a new object + }) + } + } } } }); const { state, send } = useMachine(formMachine); + $: if ($state.matches('submitted')) { + // Reset the superForm instance when the form is submitted + ({ form, errors, validate, constraints } = superForm(initialFormData, { + validators: validators, + warnings: { + noValidationAndConstraints: false + }, + validationMethod: 'oninput', + clearOnSubmit: 'errors-and-message' + })); + } + async function handleNext() { const currentFieldName = fields[$state.context.currentField].name; const validationResult = await validate(currentFieldName); @@ -98,11 +121,11 @@ } const fieldValue = $form[currentFieldName]; - console.log(`Current input value: ${fieldValue}`); - send('NEXT', { fieldValue }); - - // Log the context formData - console.log(`Context formData: ${JSON.stringify($state.context.formData)}`); + if ($state.matches('submitting')) { + send('SUBMIT'); + } else { + send('NEXT', { fieldValue }); + } } function handleKeyDown(event) { @@ -111,6 +134,7 @@ handleNext(); } } + let childInput; $: { childInput = { @@ -121,25 +145,37 @@ constraints }; } + + const possibleActions = derived(state, ($state) => + Object.keys(formMachine.states[$state.value]?.on || {}) + ); -
+
- {#if !$state.matches('submitting')} + {#if $state.matches('input')}
- {#if $errors[fields[$state.context.currentField].name]} - - {$errors[fields[$state.context.currentField].name]} - - {:else} -
{#if fields[$state.context.currentField].type === 'text'} {:else if fields[$state.context.currentField].type === 'email'} @@ -165,33 +201,47 @@ {/each}
{/if} + {#if $state.matches('submitted')} + submitted + {/if}
- - {#if !$state.matches('submitting')} - - {/if} - {#if $state.matches('submitting')} - - {/if} + {#each $possibleActions as action (action)} + {#if action === 'PREV'} + + {/if} + {/each} + + {#each $possibleActions as action (action)} + {#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'} + + {/if} + {/each} + + {#each $possibleActions as action (action)} + {#if action === 'NEXT' || action === 'SUBMIT'} + + {/if} + {/each}
diff --git a/src/lib/components/refactor/inputfields/NumberInput.svelte b/src/lib/components/refactor/inputfields/NumberInput.svelte index 8373447..7041245 100644 --- a/src/lib/components/refactor/inputfields/NumberInput.svelte +++ b/src/lib/components/refactor/inputfields/NumberInput.svelte @@ -10,14 +10,56 @@ onMount(() => { inputElement.focus(); }); + function increment(event) { + event.preventDefault(); + form.update((values) => { + values[field.name] = values[field.name] ? Number(values[field.name]) + 1 : 1; + return values; + }); + } + + function decrement(event) { + event.preventDefault(); + form.update((values) => { + values[field.name] = values[field.name] ? Number(values[field.name]) - 1 : 0; + return values; + }); + } - +
+ + + +
+ + diff --git a/src/lib/components/refactor/inputfields/SelectInput.svelte b/src/lib/components/refactor/inputfields/SelectInput.svelte index b53932e..2ab0f65 100644 --- a/src/lib/components/refactor/inputfields/SelectInput.svelte +++ b/src/lib/components/refactor/inputfields/SelectInput.svelte @@ -15,7 +15,7 @@