feat: import form modal

danielo515 · Jan 20, 2024 · a844983 · a844983
1 parent cc3c65e
commit a844983
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 31 deletions.
diff --git a/src/core/findInputDefinitionSchema.ts b/src/core/findInputDefinitionSchema.ts
@@ -1,5 +1,4 @@
 import { A, NonEmptyArray, ParsingFn, parse, pipe } from "@std";
-import * as Separated from "fp-ts/Separated";
 import * as E from "fp-ts/Either";
 import { ValiError, BaseSchema } from "valibot";
 import { FieldMinimal, FieldMinimalSchema } from "./formDefinitionSchema";
@@ -8,7 +7,8 @@ import { InputTypeToParserMap } from "./InputDefinitionSchema";
 
 export function stringifyIssues(error: ValiError): NonEmptyArray<string> {
     return error.issues.map(
-        (issue) => `${issue.path?.map((i) => i.key)}: ${issue.message} got ${issue.input}`,
+        (issue) =>
+            `${issue.path?.map((i) => i.key).join(".")}: ${issue.message} got ${issue.input}`,
     ) as NonEmptyArray<string>;
 }
 export class InvalidInputTypeError {

diff --git a/src/core/formDefinitionSchema.ts b/src/core/formDefinitionSchema.ts
@@ -96,10 +96,7 @@ export class MigrationError {
             ${this.error.issues.map((issue) => issue.message).join(", ")}`;
     }
     toArrayOfStrings(): string[] {
-        return [
-            ...stringifyIssues(this.error),
-            ...this.fieldErrors.map((issue) => issue.toString()),
-        ];
+        return stringifyIssues(this.error);
     }
     // This allows to store the error in the settings, along with the rest of the forms and
     // have save all the data in one go transparently.

diff --git a/src/views/FormImport.svelte b/src/views/FormImport.svelte
@@ -67,4 +67,7 @@
         padding: 1rem;
         min-height: 50vh;
     }
+    p {
+        margin: 0;
+    }
 </style>
diff --git a/src/views/ManageForms.svelte b/src/views/ManageForms.svelte
@@ -15,9 +15,7 @@
     export let forms: Readable<FormDefinition[]>;
     export let invalidForms: Readable<MigrationError[]>;
     function handleDeleteForm(formName: string) {
-        const confirmed = confirm(
-            `Are you sure you want to delete ${formName}?`,
-        );
+        const confirmed = confirm(`Are you sure you want to delete ${formName}?`);
         if (confirmed) {
             console.log(`Deleting ${formName}`);
             deleteForm(formName);
@@ -39,16 +37,12 @@
 
 <div class="header">
     <h1>Manage forms</h1>
-    <Button onClick={createNewForm} text="Create new form" variant="primary"
-    ></Button>
+    <Button onClick={createNewForm} text="Create new form" variant="primary"></Button>
     {#if $invalidForms.length}
         <h5 class="modal-form-danger">
             There are {$invalidForms.length} invalid forms.
         </h5>
-        <p>
-            Please take a look at the invalid forms section for details and
-            potential fixes.
-        </p>
+        <p>Please take a look at the invalid forms section for details and potential fixes.</p>
     {/if}
 </div>
 
@@ -64,8 +58,8 @@
                                 >{Array.isArray(value)
                                     ? value.length
                                     : typeof value === "object"
-                                    ? !!value
-                                    : value}</span
+                                      ? !!value
+                                      : value}</span
                             >
                         </KeyValue>
                     {/if}
@@ -110,21 +104,21 @@
                     <h4 class="form-name">{form.name}</h4>
                     {#each form.fieldErrors as error}
                         <div class="flex-row">
-                            {#if E.isLeft(error)}
-                                <pre class="invalid-field-json"><code>
-                                    {JSON.stringify(error.left.field, null, 1)}
+                            <!-- {#if E.isLeft(error)} -->
+                            <pre class="invalid-field-json"><code>
+                                    {"\n" + JSON.stringify(error.field, null, 1)}
                                 </code></pre>
-                                <KeyValue key={error.left.path}>
-                                    {#each error.left.getFieldErrors() as fieldError}
-                                        <span>{fieldError}</span>
-                                    {/each}
-                                </KeyValue>
-                                <hr />
-                            {:else}
-                                <KeyValue key="field">
-                                    <span>{error.right.name} ✅</span>
-                                </KeyValue>
-                            {/if}
+                            <KeyValue key={error.path}>
+                                {#each error.getFieldErrors() as fieldError}
+                                    <span>{fieldError}</span>
+                                {/each}
+                            </KeyValue>
+                            <hr />
+                            <!-- {:else} -->
+                            <!--     <KeyValue key="field"> -->
+                            <!--         <span>{error.right.name} ✅</span> -->
+                            <!--     </KeyValue> -->
+                            <!-- {/if} -->
                         </div>
                     {/each}
                 </div>
@@ -166,6 +160,10 @@
     }
     .invalid-field-json {
         background-color: var(--background-secondary);
+        padding: 0 8px;
         margin: 0;
     }
+    .invalid-field-json code {
+        display: flex;
+    }
 </style>