database search

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -352,6 +352,24 @@
       { forceNewTab }
     );
   }
+
+  export function handleDatabaseObjectClick(data, forceNewTab = false) {
+    const { schemaName, pureName, conid, database, objectTypeField } = data;
+
+    openDatabaseObjectDetail(
+      defaultTabs[objectTypeField],
+      defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
+      {
+        schemaName,
+        pureName,
+        conid,
+        database,
+        objectTypeField,
+      },
+      forceNewTab,
+      null
+    );
+  }
 </script>
 
 <script lang="ts">
@@ -378,34 +396,7 @@
   export let data;
 
   function handleClick(forceNewTab = false) {
-    const { schemaName, pureName, conid, database, objectTypeField } = data;
+    handleDatabaseObjectClick(data, forceNewTab);
-
-    openDatabaseObjectDetail(
-      defaultTabs[objectTypeField],
-      defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
-      {
-        schemaName,
-        pureName,
-        conid,
-        database,
-        objectTypeField,
-      },
-      forceNewTab,
-      null
-    );
-
-    // openNewTab({
-    //   title: data.pureName,
-    //   icon: 'img table',
-    //   tabComponent: 'TableDataTab',
-    //   props: {
-    //     schemaName,
-    //     pureName,
-    //     conid,
-    //     database,
-    //     objectTypeField,
-    //   },
-    // });
   }
 
   const getDriver = async () => {

packages/web/src/commands/CommandPalette.svelte

@@ -12,6 +12,19 @@
     onClick: () => visibleCommandPalette.set(true),
     testEnabled: () => !getVisibleCommandPalette(),
   });
+
+  registerCommand({
+    id: 'database.search',
+    category: 'Database',
+    name: 'Search',
+    keyText: 'Ctrl+P',
+    onClick: () => visibleCommandPalette.set(true),
+    testEnabled: () => !getVisibleCommandPalette(),
+  });
+
+  function extractDbItems(db) {
+    return db?.tables?.map(table => ({ text: table.pureName, onClick: () => handleDatabaseObjectClick(table) }));
+  }
 </script>
 
 <script>
@@ -19,13 +32,22 @@
 
   import _ from 'lodash';
   import { onMount } from 'svelte';
-  import { commands, commandsCustomized, getVisibleCommandPalette, visibleCommandPalette } from '../stores';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import {
+    commands,
+    commandsCustomized,
+    currentDatabase,
+    getVisibleCommandPalette,
+    visibleCommandPalette,
+  } from '../stores';
   import clickOutside from '../utility/clickOutside';
   import keycodes from '../utility/keycodes';
+  import { useDatabaseInfo } from '../utility/metadataLoaders';
   import registerCommand from './registerCommand';
 
   let domInput;
   let filter = '';
+  let selectedPage = 'menu';
   const domItems = {};
 
   $: selectedIndex = true ? 0 : filter;
@@ -44,9 +66,16 @@
     'text'
   );
 
-  $: filteredItems = (parentCommand ? parentCommand.getSubCommands() : sortedComands).filter(
+  $: conid = _.get($currentDatabase, 'connection._id');
-    x => !x.isGroupCommand && filterName(filter, x.text)
+  $: database = _.get($currentDatabase, 'name');
-  );
+  $: databaseInfo = useDatabaseInfo({ conid, database });
+
+  $: filteredItems = (selectedPage == 'database'
+    ? extractDbItems($databaseInfo)
+    : parentCommand
+    ? parentCommand.getSubCommands()
+    : sortedComands
+  ).filter(x => !x.isGroupCommand && filterName(filter, x.text));
 
   function handleCommand(command) {
     if (command.getSubCommands) {
@@ -78,29 +107,53 @@
 </script>
 
 <div class="main" use:clickOutside on:clickOutside={() => ($visibleCommandPalette = false)}>
-  <div class="search">
+  <div class="pages">
-    <input
+    <div
-      type="text"
+      class="page"
-      bind:this={domInput}
+      class:selected={selectedPage == 'menu'}
-      bind:value={filter}
+      on:click={() => {
-      on:keydown={handleKeyDown}
+        selectedPage = 'menu';
-      placeholder={parentCommand?.text || ''}
+        domInput.focus();
-    />
+      }}
+    >
+      <FontIcon icon="icon menu" /> Commands
+    </div>
+    <div
+      class="page"
+      class:selected={selectedPage == 'database'}
+      on:click={() => {
+        selectedPage = 'database';
+        domInput.focus();
+      }}
+    >
+      <FontIcon icon="icon database" /> Database
+    </div>
   </div>
-  <div class="content">
+  <div class="mainInner">
-    {#each filteredItems as command, index}
+    <div class="search">
-      <div
+      <input
-        class="command"
+        type="text"
-        class:selected={index == selectedIndex}
+        bind:this={domInput}
-        on:click={() => handleCommand(command)}
+        bind:value={filter}
-        bind:this={domItems[index]}
+        on:keydown={handleKeyDown}
-      >
+        placeholder={parentCommand?.text || ''}
-        <div>{command.text}</div>
+      />
-        {#if command.keyText}
+    </div>
-          <div class="shortcut">{command.keyText}</div>
+    <div class="content">
-        {/if}
+      {#each filteredItems as command, index}
-      </div>
+        <div
-    {/each}
+          class="command"
+          class:selected={index == selectedIndex}
+          on:click={() => handleCommand(command)}
+          bind:this={domItems[index]}
+        >
+          <div>{command.text}</div>
+          {#if command.keyText}
+            <div class="shortcut">{command.keyText}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
   </div>
 </div>
 
@@ -108,6 +161,9 @@
   .main {
     width: 500px;
     background: var(--theme-bg-2);
+  }
+
+  .mainInner {
     padding: 5px;
   }
 
@@ -135,4 +191,19 @@
   .shortcut {
     background: var(--theme-bg-3);
   }
+
+  .pages {
+    display: flex;
+  }
+  .page {
+    padding: 5px;
+    border: 1px solid var(--theme-border);
+    cursor: pointer;
+  }
+  .page:hover {
+    color: var(--theme-font-hover);
+  }
+  .page.selected {
+    background: var(--theme-bg-1);
+  }
 </style>