fix: form for each step

src/lib/layout/wizard.svelte

@@ -12,22 +12,33 @@
     import { Steps } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
-    import type { SvelteComponent } from 'svelte';
+    import { createEventDispatcher, type SvelteComponent } from 'svelte';
 
     export let title: string;
     export let steps: WizardStepsType;
     export let finalAction = 'Create';
 
+    const dispatch = createEventDispatcher();
+
     let currentStep = 1;
 
-    const handleKeydown = (event: KeyboardEvent) => {
+    function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
             wizard.hide();
         }
-    };
+    }
+
+    function submit() {
+        if (isLastStep) {
+            dispatch('finish');
+        } else {
+            currentStep++;
+        }
+    }
 
     $: prepared = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
+    $: isLastStep = currentStep === steps.size;
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -57,8 +68,8 @@
         <slot name="media" />
     </div>
     <div class="wizard-main">
-        <Form on:submit>
-            {#each [...steps] as [step, { component }]}
+        <Form on:submit={submit}>
+            {#each prepared as [step, { component }]}
                 {#if currentStep === step}
                     <svelte:component this={component} />
                 {/if}
@@ -67,13 +78,13 @@
                 <div class="u-flex u-main-end u-gap-12">
                     {#if currentStep === 1}
                         <Button secondary on:click={wizard.hide}>Cancel</Button>
-                        <Button on:click={() => currentStep++}>Next</Button>
-                    {:else if currentStep === steps.size}
+                        <Button submit>Next</Button>
+                    {:else if isLastStep}
                         <Button secondary on:click={() => currentStep--}>Back</Button>
                         <Button submit>{finalAction}</Button>
                     {:else}
                         <Button secondary on:click={() => currentStep--}>Back</Button>
-                        <Button on:click={() => currentStep++}>Next</Button>
+                        <Button submit>Next</Button>
                     {/if}
                 </div>
             </div>

src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { attributeList } from './store';
+    import { attributeList, documentList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import { onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
     import Step1 from './wizard/step1.svelte';
@@ -46,6 +46,7 @@
                 message: 'Document has been created',
                 type: 'success'
             });
+            documentList.load(databaseId, collectionId);
             wizard.hide();
         } catch (error) {
             addNotification({
@@ -55,13 +56,11 @@
         }
     };
 
-    $: attributeList.load(databaseId, collectionId);
-
-    $: if (!$wizard.show) {
-        initializeDocument();
+    onDestroy(() => {
+        $createDocument.document = {};
         $createDocument.read = [];
         $createDocument.write = [];
-    }
+    });
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
@@ -74,4 +73,4 @@
     });
 </script>
 
-<Wizard title="Create document" steps={stepsComponents} on:submit={create} />
+<Wizard title="Create document" steps={stepsComponents} on:finish={create} />

src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts

@@ -66,9 +66,9 @@ export const documentList = cachedStore<
         load: (
             databaseId: string,
             collectionId: string,
-            queries: [],
-            limit: number,
-            offset: number
+            queries?: [],
+            limit?: number,
+            offset?: number
         ) => Promise<void>;
     }
 >('documentList', function ({ set }) {