redis key navigation

packages/tools/src/dbKeysLoader.ts

@@ -175,3 +175,23 @@ export function dbKeys_reloadFolder(tree: DbKeysTreeModel, root: string): DbKeys
     },
   };
 }
+
+function addFlatItems(tree: DbKeysTreeModel, root: string, res: DbKeysNodeModel[]) {
+  const item = tree.dirsByKey[root];
+  if (!item.isExpanded) {
+    return false;
+  }
+  const children = tree.childrenByKey[root] || [];
+  for (const child of children) {
+    res.push(child);
+    if (child.type == 'dir') {
+      addFlatItems(tree, child.root, res);
+    }
+  }
+}
+
+export function dbKeys_getFlatList(tree: DbKeysTreeModel) {
+  const res: DbKeysNodeModel[] = [];
+  addFlatItems(tree, '', res);
+  return res;
+}

packages/web/src/stores.ts

@@ -161,6 +161,8 @@ export const lastUsedDefaultActions = writableWithStorage({}, 'lastUsedDefaultAc
 export const selectedDatabaseObjectAppObject = writable(null);
 export const focusedConnectionOrDatabase = writable<{ conid: string; database?: string; connection: any }>(null);
 
+export const focusedTreeDbKey = writable<{ key: string; root: string; type: string }>(null);
+
 export const DEFAULT_OBJECT_SEARCH_SETTINGS = {
   pureName: true,
   schemaName: false,
@@ -408,3 +410,9 @@ connectionAppObjectSearchSettings.subscribe(value => {
   connectionAppObjectSearchSettingsValue = value;
 });
 export const getConnectionAppObjectSearchSettings = () => connectionAppObjectSearchSettingsValue;
+
+let focusedTreeDbKeyValue = null;
+focusedTreeDbKey.subscribe(value => {
+  focusedTreeDbKeyValue = value;
+});
+export const getFocusedTreeDbKey = () => focusedTreeDbKeyValue;

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import keycodes from '../utility/keycodes';
   import _ from 'lodash';
-  import { sleep } from '../utility/common';
+  
-
   export let list;
   export let selectedObjectStore;
   export let getSelectedObject;

packages/web/src/widgets/DbKeysTree.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { dbKeys_loadMissing, dbKeys_refreshAll, findEngineDriver } from 'dbgate-tools';
+  import { dbKeys_getFlatList, dbKeys_loadMissing, dbKeys_refreshAll, findEngineDriver } from 'dbgate-tools';
 
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
@@ -9,17 +9,26 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import AddDbKeyModal from '../modals/AddDbKeyModal.svelte';
   import { showModal } from '../modals/modalTools';
-  import { currentDatabase, focusedConnectionOrDatabase, getExtensions } from '../stores';
+  import {
+    currentDatabase,
+    focusedConnectionOrDatabase,
+    focusedTreeDbKey,
+    getExtensions,
+    getFocusedTreeDbKey,
+  } from '../stores';
   import { apiCall } from '../utility/api';
   import { useConnectionInfo } from '../utility/metadataLoaders';
 
   import DbKeysSubTree from './DbKeysSubTree.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
-  
+  import AppObjectListHandler from './AppObjectListHandler.svelte';
+
   export let conid;
   export let database;
 
+  let domListHandler;
+
   let filter;
 
   let model = dbKeys_refreshAll();
@@ -99,5 +108,16 @@
   <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
 {/if}
 <WidgetsInnerContainer hideContent={differentFocusedDb}>
-  <DbKeysSubTree root="" {filter} {model} {changeModel} {conid} {database} {connection} />
+  <AppObjectListHandler
+    bind:this={domListHandler}
+    list={dbKeys_getFlatList(model)}
+    selectedObjectStore={focusedTreeDbKey}
+    getSelectedObject={getFocusedTreeDbKey}
+    selectedObjectMatcher={(o1, o2) => o1?.key == o2?.key && o1?.type == o2?.type && o1?.root == o2?.root}
+    handleObjectClick={(data, clickAction) => {
+      focusedTreeDbKey.set(data);
+    }}
+  >
+    <DbKeysSubTree root="" {filter} {model} {changeModel} {conid} {database} {connection} />
+  </AppObjectListHandler>
 </WidgetsInnerContainer>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -13,9 +13,10 @@
   import InputTextModal from '../modals/InputTextModal.svelte';
   import { showModal } from '../modals/modalTools';
   import newQuery from '../query/newQuery';
-  import { activeDbKeysStore } from '../stores';
+  import { activeDbKeysStore, focusedTreeDbKey } from '../stores';
   import { apiCall } from '../utility/api';
   import { getConnectionInfo } from '../utility/metadataLoaders';
+  import _ from 'lodash';
   import openNewTab from '../utility/openNewTab';
   import { showSnackbarError } from '../utility/snackbar';
 
@@ -162,9 +163,16 @@
       };
     }
   }}
+  on:mousedown={() => {
+    $focusedTreeDbKey = _.pick(item, ['type', 'key', 'root']);
+  }}
   extInfo={item.count ? `(${item.count})` : null}
   {indentLevel}
   menu={createMenu}
+  isChoosed={$focusedTreeDbKey &&
+    item.key == $focusedTreeDbKey.key &&
+    item.root == $focusedTreeDbKey.root &&
+    item.type == $focusedTreeDbKey.type}
 />
 <!-- <div on:click={() => (isExpanded = !isExpanded)}>
   <FontIcon icon={} />