quick export from table data grid toolstrip

packages/web/src/buttons/ToolStripButton.svelte

@@ -11,7 +11,7 @@
 
   function handleClick(e) {
     if (disabled) return;
-    dispatch('click');
+    dispatch('click', { target: e.target });
   }
 </script>
 

packages/web/src/buttons/ToolStripDropDownButton.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
   import { currentDropDownMenu } from '../stores';
 
   import ToolStripButton from './ToolStripButton.svelte';
 
   export let menu;
-  export let title;
+  export let title = undefined;
   export let label;
   export let icon;
   export let component = ToolStripButton;
 
   function handleClick(e) {
-    const rect = e.target.getBoundingClientRect();
+    const rect = e.detail.target.getBoundingClientRect();
     const left = rect.left;
     const top = rect.bottom;
     currentDropDownMenu.set({ left, top, items: menu });
@@ -19,4 +21,5 @@
 
 <svelte:component this={component} {title} {icon} on:click={handleClick}>
   {label}
+  <FontIcon icon="icon chevron-down" />
 </svelte:component>

packages/web/src/datagrid/DataGridCore.svelte

@@ -34,7 +34,9 @@
     id: 'dataGrid.deleteSelectedRows',
     category: 'Data grid',
     name: 'Delete selected rows',
+    toolbarName: 'Delete row(s)',
     keyText: 'Ctrl+Delete',
+    icon: 'icon minus',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
     onClick: () => getCurrentDataGrid().deleteSelectedRows(),
   });

packages/web/src/datagrid/SqlDataGridCore.svelte

@@ -21,6 +21,7 @@
     id: 'sqlDataGrid.export',
     category: 'Data grid',
     name: 'Export',
+    icon: 'icon export',
     keyText: 'Ctrl+E',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().exportGrid(),
@@ -64,6 +65,7 @@
 
 <script lang="ts">
   import _ from 'lodash';
+  import { getContext } from 'svelte';
 
   import registerCommand from '../commands/registerCommand';
   import ImportExportModal from '../modals/ImportExportModal.svelte';
@@ -177,27 +179,31 @@
     );
   }
 
+  const quickExportHandler = fmt => async () => {
+    const coninfo = await getConnectionInfo({ conid });
+    exportElectronFile(
+      pureName || 'Data',
+      {
+        functionName: 'queryReader',
+        props: {
+          connection: {
+            ..._.omit(coninfo, ['_id', 'displayName']),
+            database,
+          },
+          sql: display.getExportQuery(),
+        },
+      },
+      fmt
+    );
+  };
+  const setQuickExportHandler = getContext('setQuickExportHandler');
+  if (setQuickExportHandler) (setQuickExportHandler as any)(quickExportHandler);
+
   registerMenu(
     { command: 'sqlDataGrid.openActiveChart', tag: 'chart' },
     { command: 'sqlDataGrid.openQuery', tag: 'export' },
     {
-      ...createQuickExportMenu($extensions, fmt => async () => {
+      ...createQuickExportMenu($extensions, quickExportHandler),
-        const coninfo = await getConnectionInfo({ conid });
-        exportElectronFile(
-          pureName || 'Data',
-          {
-            functionName: 'queryReader',
-            props: {
-              connection: {
-                ..._.omit(coninfo, ['_id', 'displayName']),
-                database,
-              },
-              sql: display.getExportQuery(),
-            },
-          },
-          fmt
-        );
-      }),
       tag: 'export',
     },
     { command: 'sqlDataGrid.export', tag: 'export' }

packages/web/src/icons/FontIcon.svelte

@@ -18,6 +18,7 @@
     'icon favorite': 'mdi mdi-star',
     'icon share': 'mdi mdi-share-variant',
     'icon add': 'mdi mdi-plus-circle',
+    'icon minus': 'mdi mdi-minus-circle',
     'icon connection': 'mdi mdi-connection',
     'icon cell-data': 'mdi mdi-details',
     'icon sql-generator': 'mdi mdi-cog-transfer',

packages/web/src/tabs/TableDataTab.svelte

@@ -56,6 +56,8 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripDropDownButton from '../buttons/ToolStripDropDownButton.svelte';
+  import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
 
   export let tabid;
   export let conid;
@@ -116,6 +118,19 @@
   const collapsedLeftColumnStore = writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
   setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
+
+  let quickExportHandler = null;
+  function setQuickExportHandler(value) {
+    quickExportHandler = value;
+  }
+  setContext('setQuickExportHandler', setQuickExportHandler);
+  function getExportMenu() {
+    return [
+      quickExportHandler ? createQuickExportMenuItems($extensions, quickExportHandler) : null,
+      { divider: true },
+      { command: 'sqlDataGrid.export', text: 'Advanced settings' },
+    ];
+  }
 </script>
 
 <ToolStripContainer>
@@ -135,6 +150,8 @@
     <ToolStripCommandButton command="dataGrid.refresh" />
     <ToolStripCommandButton command="tableData.save" />
     <ToolStripCommandButton command="dataGrid.insertNewRow" />
+    <ToolStripCommandButton command="dataGrid.deleteSelectedRows" />
+    <ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
   </svelte:fragment>
 </ToolStripContainer>
 

packages/web/src/tabs/ViewDataTab.svelte

@@ -8,6 +8,8 @@
   import { findEngineDriver } from 'dbgate-tools';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
+import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
 
   import DataGrid from '../datagrid/DataGrid.svelte';
   import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
@@ -51,16 +53,22 @@
 </script>
 
 {#if display}
-  <DataGrid
+  <ToolStripContainer>
-    {...$$props}
+    <DataGrid
-    {display}
+      {...$$props}
-    config={$config}
+      {display}
-    setConfig={config.update}
+      config={$config}
-    cache={$cache}
+      setConfig={config.update}
-    setCache={cache.update}
+      cache={$cache}
-    focusOnVisible
+      setCache={cache.update}
-    gridCoreComponent={SqlDataGridCore}
+      focusOnVisible
-  />
+      gridCoreComponent={SqlDataGridCore}
+    />
+    <svelte:fragment slot="toolstrip">
+      <ToolStripCommandButton command="dataGrid.refresh" />
+      <ToolStripCommandButton command="sqlDataGrid.export" />
+    </svelte:fragment>
+  </ToolStripContainer>
 {/if}
 
 <StatusBarTabItem

packages/web/src/utility/contextMenu.ts

@@ -95,7 +95,7 @@ function mapItem(item, commands) {
     const command = commands[item.command];
     if (command) {
       return {
-        text: command.menuName || command.toolbarName || command.name,
+        text: item.text || command.menuName || command.toolbarName || command.name,
         keyText: command.keyText || command.keyTextFromGroup,
         onClick: () => {
           if (command.getSubCommands) visibleCommandPalette.set(command);

packages/web/src/utility/createQuickExportMenu.ts

@@ -1,6 +1,20 @@
 import { ExtensionsDirectory, QuickExportDefinition } from 'dbgate-types';
 import getElectron from './getElectron';
 
+export function createQuickExportMenuItems(
+  extensions: ExtensionsDirectory,
+  handler: (fmt: QuickExportDefinition) => Function
+) {
+  const electron = getElectron();
+  if (!electron) {
+    return null;
+  }
+  return extensions.quickExports.map(fmt => ({
+    text: fmt.label,
+    onClick: handler(fmt),
+  }));
+}
+
 export default function createQuickExportMenu(
   extensions: ExtensionsDirectory,
   handler: (fmt: QuickExportDefinition) => Function
@@ -11,9 +25,6 @@ export default function createQuickExportMenu(
   }
   return {
     text: 'Quick export',
-    submenu: extensions.quickExports.map(fmt => ({
+    submenu: createQuickExportMenuItems(extensions, handler),
-      text: fmt.label,
-      onClick: handler(fmt),
-    })),
   };
 }