database search

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -3,7 +3,7 @@
   export const createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
   const electron = getElectron();
 
-  const icons = {
+  export const databaseObjectIcons = {
     tables: 'img table',
     collections: 'img collection',
     views: 'img view',
@@ -337,7 +337,7 @@
       {
         title: scriptTemplate ? 'Query #' : pureName,
         tooltip,
-        icon: scriptTemplate ? 'img sql-file' : icons[objectTypeField],
+        icon: scriptTemplate ? 'img sql-file' : databaseObjectIcons[objectTypeField],
         tabComponent: scriptTemplate ? 'QueryTab' : tabComponent,
         props: {
           schemaName,
@@ -548,7 +548,7 @@
   module={$$props.module}
   {data}
   title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
-  icon={icons[data.objectTypeField]}
+  icon={databaseObjectIcons[data.objectTypeField]}
   menu={createMenu}
   on:click={() => handleClick()}
   on:middleclick={() => handleClick(true)}

packages/web/src/commands/CommandPalette.svelte

@@ -11,8 +11,8 @@
     toolbar: true,
     showDisabled: true,
     icon: 'icon menu',
-    onClick: () => visibleCommandPalette.set(true),
+    onClick: () => visibleCommandPalette.set('menu'),
-    testEnabled: () => !getVisibleCommandPalette(),
+    testEnabled: () => getVisibleCommandPalette() != 'menu',
   });
 
   registerCommand({
@@ -20,12 +20,29 @@
     category: 'Database',
     name: 'Search',
     keyText: electron ? 'Ctrl+P' : 'F3',
-    onClick: () => visibleCommandPalette.set(true),
+    onClick: () => visibleCommandPalette.set('database'),
-    testEnabled: () => !getVisibleCommandPalette(),
+    testEnabled: () => getVisibleCommandPalette() != 'database',
   });
 
-  function extractDbItems(db) {
+  function extractDbItems(db, dbConnectionInfo) {
-    return db?.tables?.map(table => ({ text: table.pureName, onClick: () => handleDatabaseObjectClick(table) }));
+    const objectList = _.flatten(
+      ['tables', 'collections', 'views', 'matviews', 'procedures', 'functions'].map(objectTypeField =>
+        _.sortBy(
+          ((db || {})[objectTypeField] || []).map(obj => ({
+            text: obj.pureName,
+            onClick: () => handleDatabaseObjectClick({ objectTypeField, ...dbConnectionInfo, ...obj }),
+            icon: databaseObjectIcons[objectTypeField],
+          })),
+          ['schemaName', 'pureName']
+        )
+      )
+    );
+    return objectList;
+
+    // return db?.tables?.map(table => ({
+    //   text: table.pureName,
+    //   onClick: () => handleDatabaseObjectClick({ ...dbinfo, ...table }),
+    // }));
   }
 </script>
 
@@ -34,6 +51,7 @@
 
   import _ from 'lodash';
   import { onMount } from 'svelte';
+  import { databaseObjectIcons, handleDatabaseObjectClick } from '../appobj/DatabaseObjectAppObject.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import {
     commands,
@@ -50,7 +68,6 @@
 
   let domInput;
   let filter = '';
-  let selectedPage = 'menu';
   const domItems = {};
 
   $: selectedIndex = true ? 0 : filter;
@@ -73,8 +90,8 @@
   $: database = _.get($currentDatabase, 'name');
   $: databaseInfo = useDatabaseInfo({ conid, database });
 
-  $: filteredItems = (selectedPage == 'database'
+  $: filteredItems = ($visibleCommandPalette == 'database'
-    ? extractDbItems($databaseInfo)
+    ? extractDbItems($databaseInfo, { conid, database })
     : parentCommand
     ? parentCommand.getSubCommands()
     : sortedComands
@@ -87,7 +104,7 @@
       filter = '';
       selectedIndex = 0;
     } else {
-      $visibleCommandPalette = false;
+      $visibleCommandPalette = null;
       command.onClick();
     }
   }
@@ -100,7 +117,7 @@
       e.stopPropagation();
       handleCommand(filteredItems[selectedIndex]);
     }
-    if (e.keyCode == keycodes.escape) $visibleCommandPalette = false;
+    if (e.keyCode == keycodes.escape) $visibleCommandPalette = null;
 
     if (e.keyCode == keycodes.pageDown) selectedIndex = Math.min(selectedIndex + 15, filteredItems.length - 1);
     if (e.keyCode == keycodes.pageUp) selectedIndex = Math.max(selectedIndex - 15, 0);
@@ -109,13 +126,19 @@
   $: if (domItems[selectedIndex]) domItems[selectedIndex].scrollIntoView({ block: 'nearest', inline: 'nearest' });
 </script>
 
-<div class="main" use:clickOutside on:clickOutside={() => ($visibleCommandPalette = false)}>
+<div
+  class="main"
+  use:clickOutside
+  on:clickOutside={() => {
+    $visibleCommandPalette = null;
+  }}
+>
   <div class="pages">
     <div
       class="page"
-      class:selected={selectedPage == 'menu'}
+      class:selected={$visibleCommandPalette == 'menu'}
       on:click={() => {
-        selectedPage = 'menu';
+        $visibleCommandPalette = 'menu';
         domInput.focus();
       }}
     >
@@ -123,9 +146,9 @@
     </div>
     <div
       class="page"
-      class:selected={selectedPage == 'database'}
+      class:selected={$visibleCommandPalette == 'database'}
       on:click={() => {
-        selectedPage = 'database';
+        $visibleCommandPalette = 'database';
         domInput.focus();
       }}
     >
@@ -150,7 +173,12 @@
           on:click={() => handleCommand(command)}
           bind:this={domItems[index]}
         >
-          <div>{command.text}</div>
+          <div>
+            {#if command.icon}
+              <span class="mr-1"><FontIcon icon={command.icon} /></span>
+            {/if}
+            {command.text}
+          </div>
           {#if command.keyText}
             <div class="shortcut">{command.keyText}</div>
           {/if}

packages/web/src/stores.ts

@@ -35,7 +35,7 @@ export const openedConnections = writable([]);
 export const currentDatabase = writable(null);
 export const openedTabs = writableWithStorage<TabDefinition[]>([], 'openedTabs');
 export const extensions = writable<ExtensionsDirectory>(null);
-export const visibleCommandPalette = writable(false);
+export const visibleCommandPalette = writable(null);
 export const commands = writable({});
 export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -66,7 +66,7 @@
 
 <div class="main">
   {#if !$visibleToolbar}
-    <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
+    <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = 'menu')}>
       <FontIcon icon="icon menu" />
     </div>
   {/if}