From ea376f5ba715112529f37e1ec24c6bf86b6489bb Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Wed, 7 Jun 2023 21:12:09 +0200
Subject: [PATCH] Fix host/database selection bug in grid

---
 CHANGELOG.md                                  | 10 +++--
 frontend/package.json.md5                     |  2 +-
 frontend/src/components/grid-items.svelte     | 21 +++-------
 frontend/src/lib/objects.js                   | 16 +++++++-
 .../src/organisms/connection/hosttree.svelte  | 39 +++++++++++++------
 5 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c657abb..9161fa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,17 @@
 ## Unreleased
 
-* Added version number of the running Rolens instance in the about dialog (#25, #28)
+* Added version number of the running Rolens instance in the about dialog (#25, #28).
+* Fixed host/database selection bug in grid.
 
-## [v0.2.0](https://github.com/garraflavatra/rolens/releases/tag/v0.2.0)
+## [v0.2.0]
 
 * Added some external links related to Rolens to the application menu.
 * Fix an infinite loop bug when a document in the find view has been double clicked.
 * Find view: added the ability to make changes to single documents from within the object editor.
 
-## [v0.1.0](https://github.com/garraflavatra/rolens/releases/tag/v0.1.0)
+## [v0.1.0]
 
 Initial release.
+
+[v0.2.0]: https://github.com/garraflavatra/rolens/releases/tag/v0.2.0
+[v0.1.0]: https://github.com/garraflavatra/rolens/releases/tag/v0.1.0
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index 0559e98..8325a43 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-541b97f7203adc96312cfd007c0d8b97
\ No newline at end of file
+21089cd8ec83c35046acb2c9ab02da9e
\ No newline at end of file
diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte
index ba0a64f..4b6263e 100644
--- a/frontend/src/components/grid-items.svelte
+++ b/frontend/src/components/grid-items.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { resolveKeypath, setValue } from '$lib/objects';
+  import { pathsAreEqual, resolveKeypath, setValue } from '$lib/objects';
   import contextMenu from '$lib/stores/contextmenu';
   import { createEventDispatcher } from 'svelte';
   import FormInput from './forminput.svelte';
@@ -62,18 +62,9 @@
       return false;
     }
 
-    toggleChildren(itemKey, false);
-
-    if (activeKey !== itemKey) {
-      activeKey = itemKey;
-      if (level === 0) {
-        activePath = [ itemKey ];
-      }
-      else {
-        activePath = [ ...path, itemKey ];
-      }
-      dispatch('select', { level, itemKey, index });
-    }
+    activeKey = itemKey;
+    activePath = [ ...path.slice(0, level), itemKey ];
+    dispatch('select', { level, itemKey, index });
   }
 
   function closeAll() {
@@ -89,7 +80,7 @@
   }
 
   function doubleClick(itemKey, index) {
-    // toggleChildren(itemKey, false);
+    toggleChildren(itemKey, false);
     dispatch('trigger', { level, itemKey, index });
     childrenOpen[itemKey] = true;
   }
@@ -136,7 +127,7 @@
     on:dblclick={() => doubleClick(item[key], index)}
     on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
     class:selectable={canSelect}
-    class:selected={canSelect && !activePath[level + 1] && activePath.every(k => path.includes(k) || k === item[key]) && (activePath[level] === item[key])}
+    class:selected={canSelect && pathsAreEqual(activePath, [ ...path, item[key] ])}
     class:striped
   >
     {#if !hideChildrenToggles}
diff --git a/frontend/src/lib/objects.js b/frontend/src/lib/objects.js
index d960109..a3151d2 100644
--- a/frontend/src/lib/objects.js
+++ b/frontend/src/lib/objects.js
@@ -58,6 +58,20 @@ export function setValue(object, path, value) {
 }
 
 export function deepClone(obj) {
-  // Room for improvement below
+  // @todo: Room for improvement below
   return JSON.parse(JSON.stringify(obj));
 }
+
+export function pathsAreEqual(x, y) {
+  const lengthOfLongest = (x.length >= y.length) ? x.length : y.length;
+  console.log(x, y)
+
+  for (let i = 0; i < lengthOfLongest; i++) {
+    console.log(x[i], y[i])
+    if (x[i] !== y[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/frontend/src/organisms/connection/hosttree.svelte b/frontend/src/organisms/connection/hosttree.svelte
index 2249e1b..d11277e 100644
--- a/frontend/src/organisms/connection/hosttree.svelte
+++ b/frontend/src/organisms/connection/hosttree.svelte
@@ -14,9 +14,9 @@
 
   const dispatch = createEventDispatcher();
   let activeGridPath = [];
-  $: activeHostKey = activeGridPath[0] || activeHostKey;
-  $: activeDbKey = activeGridPath[1];
-  $: activeCollKey = activeGridPath[2];
+  // $: activeGridPath[0] = activeHostKey || undefined;
+  // $: activeGridPath[1] = activeDbKey || undefined;
+  // $: activeGridPath[2] = activeCollKey || undefined;
   $: host = $hosts[activeHostKey];
   $: connection = $connections[activeHostKey];
   $: database = connection?.databases[activeDbKey];
@@ -30,12 +30,16 @@
 
   async function openConnection(hostKey) {
     const progress = startProgress(`Connecting to "${hostKey}"…`);
+    activeCollKey = '';
+    activeDbKey = '';
+    activeHostKey = hostKey;
     const databases = await OpenConnection(hostKey);
 
     if (databases) {
       $connections[hostKey] = { databases: {} };
       databases.forEach(dbKey => {
-        $connections[hostKey].databases[dbKey] = { collections: {} };
+        $connections[hostKey].databases[dbKey] =
+          $connections[hostKey].databases[dbKey] || { collections: {} };
       });
       activeHostKey = hostKey;
       dispatch('connected', hostKey);
@@ -49,17 +53,22 @@
     activeCollKey = '';
     activeDbKey = '';
     activeHostKey = '';
+
     await tick();
     await RemoveHost(hostKey);
-    hosts.update();
+    await reload();
+    await hosts.update();
   }
 
   async function openDatabase(dbKey) {
     const progress = startProgress(`Opening database "${dbKey}"…`);
     const collections = await OpenDatabase(activeHostKey, dbKey);
+    activeDbKey = dbKey;
+    activeCollKey = '';
 
     for (const collKey of collections || []) {
-      $connections[activeHostKey].databases[dbKey].collections[collKey] = {};
+      $connections[activeHostKey].databases[dbKey].collections[collKey] =
+        $connections[activeHostKey].databases[dbKey].collections[collKey] ||{};
     }
 
     progress.end();
@@ -67,14 +76,19 @@
 
   async function dropDatabase(dbKey) {
     const progress = startProgress(`Dropping database "${dbKey}"…`);
-    await DropDatabase(activeHostKey, dbKey);
-    await reload();
+    const success = await DropDatabase(activeHostKey, dbKey);
+    if (success) {
+      activeCollKey = '';
+      activeDbKey = '';
+      await reload();
+    }
     progress.end();
   }
 
   async function openCollection(collKey) {
     const progress = startProgress(`Opening collection "${collKey}"…`);
     const stats = await OpenCollection(activeHostKey, activeDbKey, collKey);
+    activeCollKey = collKey;
     $connections[activeHostKey].databases[activeDbKey].collections[collKey] = $connections[activeHostKey].databases[activeDbKey].collections[collKey] || {};
     $connections[activeHostKey].databases[activeDbKey].collections[collKey].stats = stats;
     progress.end();
@@ -89,8 +103,11 @@
 
   async function dropCollection(dbKey, collKey) {
     const progress = startProgress(`Dropping collection "${collKey}"…`);
-    await DropCollection(activeHostKey, dbKey, collKey);
-    await reload();
+    const success = await DropCollection(activeHostKey, dbKey, collKey);
+    if (success) {
+      activeCollKey = '';
+      await reload();
+    }
     progress.end();
   }
 </script>
@@ -98,6 +115,7 @@
 <Grid
   striped={false}
   columns={[ { key: 'name' }, { key: 'count', right: true } ]}
+  bind:activePath={activeGridPath}
   items={Object.keys($hosts).map(hostKey => ({
     id: hostKey,
     name: $hosts[hostKey].name,
@@ -136,7 +154,6 @@
       { label: `Remove host…`, fn: () => removeHost(hostKey) },
     ],
   }))}
-  bind:activePath={activeGridPath}
   on:select={e => {
     const key = e.detail.itemKey;
     switch (e.detail?.level) {