Fix complex forms and simple strings like keywords

NeurodataWithoutBorders · Mar 8, 2024 · 5428796 · 5428796
1 parent da607f8
commit 5428796
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
@@ -121,10 +121,11 @@ const componentCSS = `
     }
 
     .link {
-      margin-top: 20px;
+      margin: 20px 0px;
       border: 1px solid black;
       border-radius: 4px;
       position: relative;
+      
     }
 
     .link > div {

diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js
@@ -737,6 +737,7 @@ export class JSONSchemaInput extends LitElement {
             ? new JSONSchemaForm({
                   schema: schemaCopy,
                   results: updateTarget,
+                  validateEmptyValues: false,
                   onUpdate: (internalPath, value) => {
                       if (!createNewObject) {
                           const path = [key, ...internalPath];
@@ -756,6 +757,7 @@ export class JSONSchemaInput extends LitElement {
                       },
                       required: [tempPropertyKey],
                   },
+                  validateEmptyValues: false,
                   results: updateTarget,
                   onUpdate: (_, value) => {
                       if (createNewObject) updateTarget[key] = value;
@@ -860,48 +862,69 @@ export class JSONSchemaInput extends LitElement {
             const fileSystemFormat = isFilesystemSelector(name, itemSchema?.format);
             if (fileSystemFormat) return createFilesystemSelector(fileSystemFormat);
             // Create tables if possible
-            else if (itemSchema?.type === "string") {
-                console.error('JUST SEARCH STRINGS')
+            else if (itemSchema?.type === "string" && !itemSchema.properties) {
 
                 const list = new List({
                     items: this.value,
+                    emptyMessage: "No items",
                     onChange: ({ items }) => {
                         this.#updateData(fullPath, items.length ? items.map((o) => o.value) : undefined);
                         if (validateOnChange) this.#triggerValidation(name, path);
                     },
                 });
 
+                console.log(list)
 
-                const search = new Search({
-                    options: itemSchema.enum.map((v) => {
-                        return {
-                            key: v,
-                            value: v,
-                            label: itemSchema.enumLabels?.[v] ?? v,
-                            keywords: itemSchema.enumKeywords?.[v],
-                            description: itemSchema.enumDescriptions?.[v],
-                            link: itemSchema.enumLinks?.[v],
-                        };
-                    }),
-                    value: this.value,
-                    listMode: schema.strict === false ? 'click' : "append",
-                    showAllWhenEmpty: false,
-                    onSelect: async ({ label, value }) => {
-                        if (!value) return
-                        if (schema.uniqueItems && this.value && this.value.includes(value)) return
-                        list.add({ content: label,  value })
-                        // search.value = ''
-                        // search.requestUpdate()
-                    },
-                });
+                if (itemSchema.enum) {
 
-                list.classList.add("schema-input");
+                    const search = new Search({
+                        options: itemSchema.enum.map((v) => {
+                            return {
+                                key: v,
+                                value: v,
+                                label: itemSchema.enumLabels?.[v] ?? v,
+                                keywords: itemSchema.enumKeywords?.[v],
+                                description: itemSchema.enumDescriptions?.[v],
+                                link: itemSchema.enumLinks?.[v],
+                            };
+                        }),
+                        value: this.value,
+                        listMode: schema.strict === false ? 'click' : "append",
+                        showAllWhenEmpty: false,
+                        onSelect: async ({ label, value }) => {
+                            if (!value) return
+                            if (schema.uniqueItems && this.value && this.value.includes(value)) return
+                            list.add({ content: label,  value })
+                        },
+                    });
 
-                search.style.height = "auto";
+                    search.style.height = "auto";
+                    return html`<div style="width: 100%;">${search}${list}</div>`;
 
-                console.log(search)
-
-                return html`<div style="width: 100%;">${search}${list}</div>`;
+                }
+
+                else {
+                    const input = document.createElement("input");
+                    input.classList.add("guided--input");
+                    input.placeholder = "Provide an item for the list"
+
+                    const submitButton = new Button({
+                        label: "Submit",
+                        primary: true,
+                        size: "small",
+                        onClick: () => {
+                            const value = input.value
+                            if (!value) return
+                            if (schema.uniqueItems && this.value && this.value.includes(value)) return
+                            list.add({ value })
+                            input.value = ""
+                        }
+                    });
+
+
+
+                    return html`<div style="width: 100%;"><div style="display: flex; gap: 10px; align-items: center;">${input}${submitButton}</div>${list}</div>`;
+                }
 
             } else if (itemSchema?.type === "object" && this.renderTable) {
 

diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts
@@ -37,6 +37,7 @@ export class List extends LitElement {
 
 
       #empty {
+        margin: 1rem;
         margin-left: -40px;
         color: gray;
       }
@@ -412,7 +413,7 @@ export class List extends LitElement {
 
       return html`
       <ol style=${styleMap(this.listStyles)}>
-        ${(items.length || !emptyMessage) ? items.map(this.#renderListItem) : html`<li id="empty">${emptyMessage}</li>`}
+        ${(items.length || !emptyMessage) ? items.map(this.#renderListItem) : html`<div id="empty">${emptyMessage}</div>`}
       </ol>`
     }
   }