Major grid changes and bugfixes

frontend/src/organisms/connection/collection/find.svelte

@@ -20,12 +20,12 @@
   let result = {};
   let submittedForm = {};
   let queryField;
-  let activeKey = '';
+  let activePath = '';
   let json = '';
   $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
 
   async function submitQuery() {
-    activeKey = '';
+    activePath = [];
     result = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
     if (result) {
       submittedForm = JSON.parse(JSON.stringify(form));
@@ -47,8 +47,7 @@
   }
 
   function remove() {
-    // eslint-disable-next-line no-alert
-    alert('yet to be implemented');
+    // todo
   }
 
   function resetFocus() {
@@ -57,13 +56,15 @@
   }
 
   function openJson(itemId) {
-    const item = result?.results?.filter(i => i._id == itemId);
+    const item = result?.results?.find(i => i._id == itemId);
+    if (!item) {
+      return;
+    }
     json = JSON.stringify(item, undefined, 2);
   }
 
   export function performQuery(q) {
     form = { ...defaults, ...q };
-    console.log(form);
     submitQuery();
   }
 </script>
@@ -107,7 +108,7 @@
   <div class="result">
     <div class="grid">
       {#key result}
-        <ObjectGrid data={result.results} bind:activeKey on:trigger={e => openJson(e.detail)} />
+        <ObjectGrid data={result.results} bind:activePath on:trigger={e => openJson(e.detail?.itemKey)} />
       {/key}
     </div>
 
@@ -118,7 +119,7 @@
         {/key}
       </div>
       <div>
-        <button class="btn danger" on:click={remove} disabled={!activeKey}>
+        <button class="btn danger" on:click={remove} disabled={!activePath?.length}>
           <Icon name="-" />
         </button>
         <button class="btn" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results?.length}>

frontend/src/organisms/connection/dblist.svelte

@@ -11,6 +11,9 @@
   export let activeCollKey = '';
 
   const dispatch = createEventDispatcher();
+  let dbAndCollKeys = [];
+  $: activeDbKey = dbAndCollKeys[0];
+  $: activeCollKey = dbAndCollKeys[1];
   $: host = hosts[activeHostKey];
   $: connection = $connections[activeHostKey];
   $: database = connection?.databases[activeDbKey];
@@ -60,6 +63,7 @@
   async function openCollection(collKey) {
     busy.start();
     const stats = await OpenCollection(activeHostKey, activeDbKey, collKey);
+    $connections[activeHostKey].databases[activeDbKey].collections[collKey] = $connections[activeHostKey].databases[activeDbKey].collections[collKey] || {};
     $connections[activeHostKey].databases[activeDbKey].collections[collKey].stats = stats;
     busy.end();
   }
@@ -76,10 +80,10 @@
   <Grid
     striped={false}
     columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
-    items={Object.keys(connection.databases).map(dbKey => ({
+    items={Object.keys(connection.databases).sort().map(dbKey => ({
       id: dbKey,
       collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
-      children: Object.keys(connection.databases[dbKey].collections).map(collKey => ({
+      children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({
         id: collKey,
         menu: [
           { label: `Drop ${collKey}…`, fn: () => dropCollection(dbKey, collKey) },
@@ -88,7 +92,7 @@
           { label: 'New database…', fn: () => dispatch('newDatabase') },
           { label: 'New collection…', fn: () => dispatch('newCollection') },
         ],
-      })).sort((a, b) => a.id.localeCompare(b)) || [],
+      })) || [],
       menu: [
         { label: `Drop ${dbKey}…`, fn: () => dropDatabase(dbKey) },
         { separator: true },
@@ -121,9 +125,14 @@
         }
       }, disabled: !activeDbKey },
     ]}
-    bind:activeKey={activeDbKey}
-    bind:activeChildKey={activeCollKey}
-    on:select={e => openDatabase(e.detail)}
-    on:selectChild={e => openCollection(e.detail)}
+    bind:activePath={dbAndCollKeys}
+    on:select={e => {
+      if (e.detail?.level === 0) {
+        openDatabase(e.detail.itemKey);
+      }
+      else if (e.detail?.level === 1) {
+        openCollection(e.detail.itemKey);
+      }
+    }}
   />
 {/if}