Refactor next part, updated Form to the new Composer
This commit is contained in:
Samuel Andert
@ -25,6 +25,12 @@
|
||||
{/each}
|
||||
{/if}
|
||||
</section>
|
||||
<button
|
||||
class="self-center px-4 py-2 font-bold text-white rounded hover:bg-blue-700"
|
||||
on:click={sendMessage}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
<section class="flex-grow p-8 overflow-y-auto">
|
||||
{#if $data.store.messages}
|
||||
{#each $data.store.messages as message}
|
||||
@ -32,10 +38,4 @@
|
||||
{/each}
|
||||
{/if}
|
||||
</section>
|
||||
<button
|
||||
class="self-center px-4 py-2 mb-4 font-bold text-white rounded hover:bg-blue-700"
|
||||
on:click={sendMessage}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
|
||||
163
src/lib/components/refactor/ComposerForm.svelte
Normal file
163
src/lib/components/refactor/ComposerForm.svelte
Normal file
@ -0,0 +1,163 @@
|
||||
<script lang="ts">
|
||||
import { superForm } from 'sveltekit-superforms/client';
|
||||
import { UserSchema } from '$lib/types/UserSchema';
|
||||
import { afterUpdate } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
|
||||
|
||||
export let data;
|
||||
export let me;
|
||||
|
||||
const initialFormData = {
|
||||
name: '',
|
||||
email: '',
|
||||
about: '',
|
||||
age: '',
|
||||
favoriteFood: ''
|
||||
};
|
||||
|
||||
const fields = ['name', 'email', 'about', 'age', 'favoriteFood'];
|
||||
|
||||
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
||||
validators: UserSchema,
|
||||
warnings: {
|
||||
noValidationAndConstraints: false
|
||||
},
|
||||
validationMethod: 'oninput', // Trigger validation on input events
|
||||
clearOnSubmit: 'errors-and-message'
|
||||
});
|
||||
|
||||
const successMessage = writable<string | null>(null);
|
||||
|
||||
// Update the isValidated property of the store whenever the errors object changes
|
||||
$: {
|
||||
// Send events to the state machine based on the validation status
|
||||
if (!($errors.name || $errors.email || $errors.about || $errors.age || $errors.favoriteFood)) {
|
||||
me.do.machine.send('VALIDATE');
|
||||
} else {
|
||||
me.do.machine.send('INVALIDATE');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
// Manually validate the form
|
||||
const validationResult = await validate();
|
||||
|
||||
// Prevent submission if there are errors
|
||||
if (!validationResult.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Here, we'll just log the form data
|
||||
console.log(form);
|
||||
|
||||
// Set the success message after successful submission
|
||||
successMessage.set('Form submitted successfully!');
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
// Reset the form and remove the message
|
||||
form.set({});
|
||||
successMessage.set(null);
|
||||
}
|
||||
|
||||
// After update, scroll to the message container for better user experience
|
||||
afterUpdate(() => {
|
||||
const messageContainer = document.getElementById('message-container');
|
||||
if (messageContainer) {
|
||||
messageContainer.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full p-6 border-2 border-red-500">
|
||||
My state is: {$data.state}
|
||||
{#if $successMessage}
|
||||
<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
|
||||
<div class="alert-message">
|
||||
<h3 class="h3">Success</h3>
|
||||
<p>{$successMessage}</p>
|
||||
</div>
|
||||
<div class="alert-actions">
|
||||
<button
|
||||
class="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"
|
||||
on:click={handleReset}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
|
||||
{#each fields as field}
|
||||
<div class="mb-4">
|
||||
{#if $errors[field]}
|
||||
<span class="block mb-2 font-semibold text-red-500">{$errors[field]}</span>
|
||||
{:else}
|
||||
<label for={field} class="block mb-2 font-semibold text-white"
|
||||
>{field.charAt(0).toUpperCase() + field.slice(1)}
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
{#if field === 'about'}
|
||||
<textarea
|
||||
name={field}
|
||||
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[field]}
|
||||
aria-invalid={$errors[field] ? 'true' : undefined}
|
||||
{...constraints[field]}
|
||||
/>
|
||||
{:else if field === 'favoriteFood'}
|
||||
<select
|
||||
name={field}
|
||||
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[field]}
|
||||
aria-invalid={$errors[field] ? 'true' : undefined}
|
||||
{...constraints[field]}
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
<option value="apple">Apple</option>
|
||||
<option value="banana">Banana</option>
|
||||
<option value="coconut">Coconut</option>
|
||||
<option value="strawberry">Strawberry</option>
|
||||
<option value="mango">Mango</option>
|
||||
</select>
|
||||
{:else if field === 'age'}
|
||||
<input
|
||||
name={field}
|
||||
type="number"
|
||||
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[field]}
|
||||
aria-invalid={$errors[field] ? 'true' : undefined}
|
||||
{...constraints[field]}
|
||||
/>
|
||||
{:else if field === 'slider'}
|
||||
<RangeSlider name={field} bind:value={$form[field]} min={0} max={100} step={1} ticked>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xs">{$form[field]} / 100</div>
|
||||
</div>
|
||||
</RangeSlider>
|
||||
{:else if field === 'toggle'}
|
||||
<SlideToggle name={field} bind:checked={$form[field]} />
|
||||
{:else}
|
||||
<input
|
||||
name={field}
|
||||
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"
|
||||
bind:value={$form[field]}
|
||||
aria-invalid={$errors[field] ? 'true' : undefined}
|
||||
{...constraints[field]}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<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={$data.state === 'notValidated'}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
@ -18,17 +18,17 @@
|
||||
},
|
||||
layout: {
|
||||
columns: '1fr 1fr',
|
||||
rows: '1fr 1fr',
|
||||
rows: 'auto 1fr',
|
||||
areas: `
|
||||
"top aside"
|
||||
"bottom aside"
|
||||
"topleft topright"
|
||||
"mainleft mainright"
|
||||
`
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'ComposerCharly',
|
||||
component: 'ComposerCharly',
|
||||
slot: 'aside',
|
||||
slot: 'mainright',
|
||||
data: {
|
||||
map: {
|
||||
todos: queryTodos,
|
||||
@ -58,7 +58,7 @@
|
||||
{
|
||||
id: 'ComposerBob',
|
||||
component: 'ComposerBob',
|
||||
slot: 'top',
|
||||
slot: 'topleft',
|
||||
machine: {
|
||||
initial: 'READY',
|
||||
states: {
|
||||
@ -74,7 +74,7 @@
|
||||
{
|
||||
id: 'ComposerAlice',
|
||||
component: 'ComposerAlice',
|
||||
slot: 'bottom',
|
||||
slot: 'topright',
|
||||
machine: {
|
||||
initial: 'RED',
|
||||
states: {
|
||||
@ -93,6 +93,40 @@
|
||||
NOTREADY: 'RED'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'ComposerForm',
|
||||
component: 'ComposerForm',
|
||||
slot: 'mainleft',
|
||||
machine: {
|
||||
id: 'validation',
|
||||
initial: 'notValidated',
|
||||
context: {
|
||||
isValidated: false
|
||||
},
|
||||
states: {
|
||||
notValidated: {
|
||||
on: {
|
||||
VALIDATE: {
|
||||
target: 'isValidated',
|
||||
actions: 'setValidated'
|
||||
}
|
||||
}
|
||||
},
|
||||
isValidated: {
|
||||
on: {
|
||||
INVALIDATE: {
|
||||
target: 'notValidated',
|
||||
actions: 'setNotValidated'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
services: {
|
||||
setValidated: (context) => (context.isValidated = true),
|
||||
setNotValidated: (context) => (context.isValidated = false)
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user