table keyboard navigation WIP

packages/web/src/appobj/AppObjectCore.svelte

@@ -66,6 +66,11 @@
   }
 
   // $: console.log(title, indentLevel);
+  let domDiv;
+
+  $: if (isBold && domDiv) {
+    domDiv.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }
 </script>
 
 <div
@@ -83,6 +88,7 @@
   on:dragenter
   on:dragend
   on:drop
+  bind:this={domDiv}
 >
   {#if checkedObjectsStore}
     <CheckboxField

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -509,9 +509,9 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify(
   extInfo={data.extInfo}
   icon="img database"
   colorMark={passProps?.connectionColorFactory &&
-    passProps?.connectionColorFactory({ conid: _.get(data.connection, '_id'), database: data.name }, null, null, false)}
-  isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
-    extractDbNameFromComposite(_.get($currentDatabase, 'name')) == data.name}
+    passProps?.connectionColorFactory({ conid: data?.connection?._id, database: data.name }, null, null, false)}
+  isBold={$currentDatabase?.connection?._id == data?.connection?._id &&
+    extractDbNameFromComposite($currentDatabase?.name) == data.name}
   on:click={() => switchCurrentDatabase(data)}
   on:dragstart
   on:dragenter

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -853,6 +853,7 @@
     getExtensions,
     openedConnections,
     pinnedTables,
+    selectedDatabaseObjectAppObject,
   } from '../stores';
   import openNewTab from '../utility/openNewTab';
   import {
@@ -880,11 +881,13 @@
   import { getDefaultFileFormat } from '../plugins/fileformats';
   import hasPermission from '../utility/hasPermission';
   import { openImportExportTab } from '../utility/importExportTools';
+  import { matchDatabaseObjectAppObject } from './appObjectMatchers';
 
   export let data;
   export let passProps;
 
   function handleClick(forceNewTab = false, preventPreviewMode = false) {
+    $selectedDatabaseObjectAppObject = data;
     handleDatabaseObjectClick(data, forceNewTab, preventPreviewMode);
   }
 
@@ -918,6 +921,7 @@
   onPin={isPinned ? null : () => pinnedTables.update(list => [...list, data])}
   onUnpin={isPinned ? () => pinnedTables.update(list => list.filter(x => !testEqual(x, data))) : null}
   extInfo={getExtInfo(data)}
+  isBold={matchDatabaseObjectAppObject($selectedDatabaseObjectAppObject, data)}
   on:click={() => handleClick()}
   on:middleclick={() => handleClick(true)}
   on:dblclick={() => handleClick(false, true)}

packages/web/src/appobj/appObjectMatchers.ts

@@ -0,0 +1,9 @@
+export function matchDatabaseObjectAppObject(obj1, obj2) {
+  return (
+    obj1?.objectTypeField == obj2?.objectTypeField &&
+    obj1?.conid == obj2?.conid &&
+    obj1?.database == obj2?.database &&
+    obj1?.pureName == obj2?.pureName &&
+    obj1?.schemaName == obj2?.schemaName
+  );
+}

packages/web/src/stores.ts

@@ -153,6 +153,8 @@ export const activeDbKeysStore = writableWithStorage({}, 'activeDbKeysStore');
 export const appliedCurrentSchema = writable<string>(null);
 export const loadingSchemaLists = writable({}); // dict [`${conid}::${database}`]: true
 
+export const selectedDatabaseObjectAppObject = writable(null);
+
 export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
   $extensions.themes.find(x => x.themeClassName == $currentTheme)
 );
@@ -321,3 +323,9 @@ appliedCurrentSchema.subscribe(value => {
   appliedCurrentSchemaValue = value;
 });
 export const getAppliedCurrentSchema = () => appliedCurrentSchemaValue;
+
+let selectedDatabaseObjectAppObjectValue = null;
+selectedDatabaseObjectAppObject.subscribe(value => {
+  selectedDatabaseObjectAppObjectValue = value;
+});
+export const getSelectedDatabaseObjectAppObject = () => selectedDatabaseObjectAppObjectValue;

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import keycodes from '../utility/keycodes';
+  import _ from 'lodash';
+
+  export let list;
+  export let selectedObjectStore;
+  export let getSelectedObject;
+  export let selectedObjectMatcher;
+
+  function handleKeyDown(ev) {
+    function selectByDiff(diff) {
+      const selected = getSelectedObject();
+      const index = _.findIndex(list, x => selectedObjectMatcher(x, selected));
+      if (index >= 0 && list[index + diff]) {
+        selectedObjectStore.set(list[index + diff]);
+      }
+    }
+    if (ev.keyCode == keycodes.upArrow) {
+      selectByDiff(-1);
+      ev.preventDefault();
+    }
+    if (ev.keyCode == keycodes.downArrow) {
+      selectByDiff(1);
+      ev.preventDefault();
+    }
+  }
+</script>
+
+<div tabindex="0" on:keydown={handleKeyDown} class="wrapper">
+  <slot />
+</div>
+
+<style>
+  .wrapper:focus {
+    outline: none;
+  }
+</style>

packages/web/src/widgets/SqlObjectList.svelte

@@ -36,13 +36,20 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { findEngineDriver } from 'dbgate-tools';
-  import { currentDatabase, extensions } from '../stores';
+  import {
+    currentDatabase,
+    extensions,
+    getSelectedDatabaseObjectAppObject,
+    selectedDatabaseObjectAppObject,
+  } from '../stores';
   import newQuery from '../query/newQuery';
   import runCommand from '../commands/runCommand';
   import { apiCall } from '../utility/api';
   import { filterAppsForDatabase } from '../utility/appTools';
   import SchemaSelector from './SchemaSelector.svelte';
   import { appliedCurrentSchema } from '../stores';
+  import AppObjectListHandler from './AppObjectListHandler.svelte';
+  import { matchDatabaseObjectAppObject } from '../appobj/appObjectMatchers';
 
   export let conid;
   export let database;
@@ -172,23 +179,32 @@
     {#if ($status && ($status.name == 'pending' || $status.name == 'checkStructure' || $status.name == 'loadStructure') && $objects) || !$objects}
       <LoadingInfo message={$status?.feedback?.analysingMessage || 'Loading database structure'} />
     {:else}
-      <AppObjectList
+      <AppObjectListHandler
         list={objectList
           .filter(x => ($appliedCurrentSchema ? x.schemaName == $appliedCurrentSchema : true))
           .map(x => ({ ...x, conid, database }))}
-        module={databaseObjectAppObject}
-        groupFunc={data => getObjectTypeFieldLabel(data.objectTypeField, driver)}
-        subItemsComponent={SubColumnParamList}
-        isExpandable={data =>
-          data.objectTypeField == 'tables' || data.objectTypeField == 'views' || data.objectTypeField == 'matviews'}
-        expandIconFunc={chevronExpandIcon}
-        {filter}
-        passProps={{
-          showPinnedInsteadOfUnpin: true,
-          connection: $connection,
-          hideSchemaName: !!$appliedCurrentSchema,
-        }}
-      />
+        selectedObjectStore={selectedDatabaseObjectAppObject}
+        getSelectedObject={getSelectedDatabaseObjectAppObject}
+        selectedObjectMatcher={matchDatabaseObjectAppObject}
+      >
+        <AppObjectList
+          list={objectList
+            .filter(x => ($appliedCurrentSchema ? x.schemaName == $appliedCurrentSchema : true))
+            .map(x => ({ ...x, conid, database }))}
+          module={databaseObjectAppObject}
+          groupFunc={data => getObjectTypeFieldLabel(data.objectTypeField, driver)}
+          subItemsComponent={SubColumnParamList}
+          isExpandable={data =>
+            data.objectTypeField == 'tables' || data.objectTypeField == 'views' || data.objectTypeField == 'matviews'}
+          expandIconFunc={chevronExpandIcon}
+          {filter}
+          passProps={{
+            showPinnedInsteadOfUnpin: true,
+            connection: $connection,
+            hideSchemaName: !!$appliedCurrentSchema,
+          }}
+        />
+      </AppObjectListHandler>
     {/if}
   </WidgetsInnerContainer>
 {/if}