further cleanup
This commit is contained in:
Samuel Andert
parent
25f214612e
commit
e85f0323ca
@ -1,14 +0,0 @@
|
|||||||
<!-- src/lib/components/CheckValidation.svelte -->
|
|
||||||
<script lang="ts">
|
|
||||||
export let store;
|
|
||||||
|
|
||||||
$: console.log('checkvalidation: ' + $store.isValidated);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 m-10 rounded-full">
|
|
||||||
{#if $store.isValidated}
|
|
||||||
<div class="w-full h-full bg-green-500 rounded-full" />
|
|
||||||
{:else}
|
|
||||||
<div class="w-full h-full bg-red-500 rounded-full" />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
<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 store;
|
|
||||||
export let services;
|
|
||||||
let isStoreLoaded = false;
|
|
||||||
|
|
||||||
$: if ($store) isStoreLoaded = true;
|
|
||||||
|
|
||||||
const initialFormData = {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
about: '',
|
|
||||||
age: '',
|
|
||||||
favoriteFood: ''
|
|
||||||
// slider: 0,
|
|
||||||
// toggle: false
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
|
||||||
$: {
|
|
||||||
$store.isValidated = !(
|
|
||||||
$errors.name ||
|
|
||||||
$errors.email ||
|
|
||||||
$errors.about ||
|
|
||||||
$errors.age ||
|
|
||||||
$errors.favoriteFood
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
||||||
{#if isStoreLoaded}
|
|
||||||
<div class="flex items-center justify-center min-h-screen overflow-scroll">
|
|
||||||
<div class="w-full">
|
|
||||||
STORE: {JSON.stringify($store)}
|
|
||||||
{#if $successMessage}
|
|
||||||
<!-- Display the success message instead of the form -->
|
|
||||||
<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
|
|
||||||
<!-- Icon -->
|
|
||||||
<!-- <div>(icon)</div> -->
|
|
||||||
<!-- Message -->
|
|
||||||
<div class="alert-message">
|
|
||||||
<h3 class="h3">Success</h3>
|
|
||||||
<p>{$successMessage}</p>
|
|
||||||
</div>
|
|
||||||
<!-- Actions (in this case, only the Reset button) -->
|
|
||||||
<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={!$store.isValidated}
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user