From 8bebdfccd857a0975be9b965f174f461dbc8e6d3 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Sun, 25 Jun 2023 08:16:31 +0200
Subject: [PATCH] Small frontend fixes

---
 frontend/src/components/forminput.svelte      |  2 +-
 frontend/src/components/grid-items.svelte     |  4 +-
 .../connection/collection/find.svelte         | 42 ++++++++++++++-----
 .../connection/collection/insert.svelte       | 14 +++----
 4 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/forminput.svelte b/frontend/src/components/forminput.svelte
index a3f7193..9d2498a 100644
--- a/frontend/src/components/forminput.svelte
+++ b/frontend/src/components/forminput.svelte
@@ -70,7 +70,7 @@
 <div class="forminput {type}">
   <div class="field">
     {#if type === 'string'}
-      <input type="text" bind:value use:input={{ type, onValid, onInvalid, mandatory, autofocus }} />
+      <input type="text" bind:value use:input={{ type, onValid, onInvalid, mandatory, autofocus }} autocomplete="off" spellcheck="false" />
     {:else if type === 'objectid'}
       <input
         type="text"
diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte
index 1cb1536..95ea050 100644
--- a/frontend/src/components/grid-items.svelte
+++ b/frontend/src/components/grid-items.svelte
@@ -30,7 +30,9 @@
 
   function refresh(hideObjectIndicators, items) {
     _items = objectToArray(items).map(item => {
-      item.children = objectToArray(item.children);
+      if (item.children) {
+        item.children = objectToArray(item.children);
+      }
       return item;
     });
 
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 97d2b9a..5207f3f 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -169,22 +169,41 @@
         <span class="label">Query or id</span>
         <input type="text"
           class="code"
+          placeholder={defaults.query}
+          autocomplete="off"
+          spellcheck="false"
+          use:input={{ type: 'json', autofocus: true }}
           bind:this={queryField}
           bind:value={form.query}
-          use:input={{ type: 'json', autofocus: true }}
-          placeholder={defaults.query} />
+        />
       </label>
 
       <label class="field">
         <span class="label">Sort</span>
-        <input type="text" class="code" bind:value={form.sort} use:input={{ type: 'json' }} placeholder={defaults.sort} />
+        <input
+          type="text"
+          class="code"
+          placeholder={defaults.sort}
+          autocomplete="off"
+          spellcheck="false"
+          bind:value={form.sort}
+          use:input={{ type: 'json' }}
+        />
       </label>
     </div>
 
     <div class="form-row two">
       <label class="field">
         <span class="label">Fields</span>
-        <input type="text" class="code" bind:value={form.fields} use:input={{ type: 'json' }} placeholder={defaults.fields} />
+        <input
+          type="text"
+          class="code"
+          placeholder={defaults.fields}
+          autocomplete="off"
+          spellcheck="false"
+          bind:value={form.fields}
+          use:input={{ type: 'json' }}
+        />
       </label>
 
       <label class="field">
@@ -194,7 +213,8 @@
           bind:value={form.skip}
           use:input
           placeholder={defaults.skip}
-          list="skipstops" />
+          list="skipstops"
+        />
       </label>
 
       <label class="field">
@@ -204,7 +224,8 @@
           bind:value={form.limit}
           use:input
           placeholder={defaults.limit}
-          list="limits" />
+          list="limits"
+        />
       </label>
     </div>
 
@@ -242,9 +263,11 @@
         {:else}
           <Grid
             key="_id"
-            columns={$views[collection.viewKey]?.columns?.map(c => {
-              return { key: c.key, title: c.key };
-            }) || []}
+            columns={$views[collection.viewKey]?.columns
+              ?.filter(c => c.showInTable)
+              .map(c => {
+                return { key: c.key, title: c.key };
+              }) || []}
             showHeaders={true}
             items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
             bind:activePath
@@ -295,7 +318,6 @@
 </div>
 
 {#if objectViewerData}
-  <!-- @todo Implement save -->
   <ObjectViewer bind:data={objectViewerData} saveable on:save={saveDocument} bind:successMessage={objectViewerSuccessMessage} />
 {/if}
 
diff --git a/frontend/src/organisms/connection/collection/insert.svelte b/frontend/src/organisms/connection/collection/insert.svelte
index 9387c25..f75bcad 100644
--- a/frontend/src/organisms/connection/collection/insert.svelte
+++ b/frontend/src/organisms/connection/collection/insert.svelte
@@ -73,12 +73,7 @@
   }
 
   function showJson() {
-    if (viewType === 'form') {
-      objectViewerData = { ...(newItems[0] || {}) };
-    }
-    else if (viewType === 'table') {
-      objectViewerData = [ ...newItems ];
-    }
+    objectViewerData = [ ...newItems ];
   }
 
   function addRow(beforeIndex = -1) {
@@ -151,7 +146,6 @@
       <div class="table">
         <Grid
           key="id"
-          items={newItems}
           columns={$views[collection.viewKey]?.columns
             ?.filter(c => inputTypes.includes(c.inputType))
             .map(c => {
@@ -162,7 +156,9 @@
           canRemoveItems={true}
           hideChildrenToggles={true}
           on:addRow={addRow}
+          on:removeItem={() => deleteRow()}
           bind:inputsValid={allValid}
+          bind:items={newItems}
         />
       </div>
     {/if}
@@ -209,7 +205,9 @@
   </div>
 </form>
 
-<ObjectViewer data={objectViewerData} />
+{#if objectViewerData}
+  <ObjectViewer bind:data={objectViewerData} />
+{/if}
 
 <style>
   form {