More UI improvements

frontend/src/components/grid.svelte

@@ -105,9 +105,9 @@
 
 <style>
   .grid {
-    background-color: #fff;
     width: 100%;
     height: 100%;
+    background-color: #fff;
   }
   .grid.contained {
     border: 1px solid #ccc;
@@ -152,6 +152,8 @@
   button.toggle {
     color: inherit;
     padding: 0;
+    margin: 0;
+    display: contents;
   }
   button.toggle :global(svg) {
     width: 15px;

frontend/src/components/objectgrid.svelte

@@ -28,7 +28,6 @@
     }
     else {
       items = dissectObject(data);
-      console.log(items);
     }
   }
 
@@ -55,11 +54,13 @@
   }
 
   function dissectObject(object) {
-    return Object.entries(object).map(([ key, value ]) => {
+    const entries = [ ...Array.isArray(object) ? object.entries() : Object.entries(object) ];
+    return entries.map(([ key, value ]) => {
+      key = key + '';
       const type = getType(value);
       const child = { key, value, type };
 
-      if (type.startsWith('object')) {
+      if (type.startsWith('object') || type.startsWith('array')) {
         child.children = dissectObject(value);
       }
 

frontend/src/components/tabbar.svelte

@@ -44,6 +44,7 @@
     border-bottom: none;
     border-radius: 5px 5px 0 0;
     cursor: pointer;
+    background-color: #fff;
   }
   .tabs li.active button {
     color: #fff;

frontend/src/organisms/addressbar/index.svelte

@@ -57,6 +57,7 @@
     height: 3rem;
     border: 1px solid #ccc;
     border-radius: 10px;
+    background-color: #fff;
   }
 
   .address .protocol,

frontend/src/organisms/collection-detail/find.svelte

@@ -16,7 +16,7 @@
     limit: 30,
   };
 
-  const form = {
+  let form = {
     query: '{}',
     sort: '{ "_id": 1 }',
     fields: '{}',
@@ -62,6 +62,12 @@
     queryField?.select();
   }
 
+  export function performQuery(q) {
+    form = { ...defaults, ...q };
+    console.log(form);
+    submitQuery();
+  }
+
   onMount(resetFocus);
 </script>
 
@@ -110,9 +116,9 @@
 
     <div class="controls">
       <div>
-        {#if result}
-          Results: {result.total || 0}
-        {/if}
+        {#key result}
+          <span class="flash-green">Results: {result.total || 0}</span>
+        {/key}
       </div>
       <div>
         <button class="btn danger" on:click={remove} disabled={!activeKey}>

frontend/src/organisms/collection-detail/index.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { tick } from 'svelte';
   import TabBar from '../../components/tabbar.svelte';
   import Find from './find.svelte';
   import Indexes from './indexes.svelte';
@@ -12,12 +13,20 @@
   export let collectionKey;
 
   let tab = 'find';
+  let find;
 
   $: if (collection) {
     collection.hostKey = hostKey;
     collection.dbKey = dbKey;
     collection.key = collectionKey;
   }
+
+  async function catchQuery(event) {
+    tab = 'find';
+    await tick();
+    console.log(event, find);
+    find.performQuery(event.detail);
+  }
 </script>
 
 <div class="collection" class:empty={!collection}>
@@ -34,8 +43,8 @@
 
       <div class="container">
         {#if tab === 'stats'} <Stats {collection} />
-        {:else if tab === 'find'} <Find {collection} />
-        {:else if tab === 'insert'} <Insert {collection} />
+        {:else if tab === 'find'} <Find {collection} bind:this={find} />
+        {:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} />
         {:else if tab === 'remove'} <Remove {collection} />
         {:else if tab === 'indexes'} <Indexes {collection} />
         {/if}

frontend/src/organisms/collection-detail/insert.svelte

@@ -1,35 +1,63 @@
 <script>
+  import { input } from '../../actions';
+  import { createEventDispatcher } from 'svelte';
   import { PerformInsert } from '../../../wailsjs/go/main/App';
 
   export let collection;
 
-  let input = '';
+  const dispatch = createEventDispatcher();
+  let json = '';
   let insertedIds;
 
   async function insert() {
-    insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, input);
+    insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, json);
+  }
+
+  function showDocs() {
+    dispatch('performFind', {
+      query: insertedIds.length === 1
+        ? `{ "_id": ${JSON.stringify(insertedIds[0])} }`
+        : `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
+    });
   }
 </script>
 
 <form on:submit|preventDefault={insert}>
   <label class="field">
-    <textarea cols="30" rows="10" bind:value={input} placeholder="[]" class="code"></textarea>
+    <textarea
+      cols="30"
+      rows="10"
+      placeholder="[]"
+      class="code"
+      bind:value={json}
+      use:input={{ json: true }}
+    ></textarea>
   </label>
 
   <div class="flex">
     <div>
       {#if insertedIds}
-        Success! {insertedIds.length} document{insertedIds.length > 1 ? 's' : ''} inserted
+        <span class="flash-green">Success! {insertedIds.length} document{insertedIds.length > 1 ? 's' : ''} inserted</span>
       {/if}
     </div>
-    <button type="submit" class="btn" disabled={!input}>Insert</button>
+    <div>
+      {#if insertedIds}
+        <button class="btn" type="button" on:click={showDocs}>View inserted docs</button>
+      {/if}
+      <button type="submit" class="btn" disabled={!json}>Insert</button>
+    </div>
   </div>
 </form>
 
 <style>
+  form {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: 0.5rem;
+  }
+
   .flex {
     display: flex;
     justify-content: space-between;
-    margin-top: 0.5rem;
   }
 </style>

frontend/src/organisms/collection-detail/remove.svelte

@@ -23,9 +23,14 @@
 </form>
 
 <style>
+  form {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    gap: 0.5rem;
+  }
+
   .flex {
     display: flex;
     justify-content: space-between;
-    margin-top: 0.5rem;
   }
 </style>

frontend/src/style.css

@@ -10,11 +10,17 @@ body {
     cursor: default;
     font-size: 15px;
     line-height: 15px;
+    background-color: #eee;
 }
 
 * {
     vertical-align: middle;
     box-sizing: border-box;
+    overscroll-behavior: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    touch-action: none;
 }
 
 p {
@@ -96,3 +102,11 @@ p {
 code, .code {
     font-family: Menlo, monospace;
 }
+
+@keyframes flashGreen {
+    0% { color: #0d0; }
+    100% { color: unset; }
+}
+.flash-green {
+    animation: 1s ease-out 0s 1 flashGreen;
+}