From a8265cebff64274537aea4881c41c45ef725eb2a Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 12 Feb 2022 18:08:25 +0100
Subject: [PATCH] quick export from table data grid toolstrip

---
 .../web/src/buttons/ToolStripButton.svelte    |  2 +-
 .../buttons/ToolStripDropDownButton.svelte    |  7 +++-
 .../src/buttons/ToolStripExportButton.svelte  |  0
 packages/web/src/datagrid/DataGridCore.svelte |  2 +
 .../web/src/datagrid/SqlDataGridCore.svelte   | 40 +++++++++++--------
 packages/web/src/icons/FontIcon.svelte        |  1 +
 packages/web/src/tabs/TableDataTab.svelte     | 17 ++++++++
 packages/web/src/tabs/ViewDataTab.svelte      | 28 ++++++++-----
 packages/web/src/utility/contextMenu.ts       |  2 +-
 .../web/src/utility/createQuickExportMenu.ts  | 19 +++++++--
 10 files changed, 83 insertions(+), 35 deletions(-)
 create mode 100644 packages/web/src/buttons/ToolStripExportButton.svelte

diff --git a/packages/web/src/buttons/ToolStripButton.svelte b/packages/web/src/buttons/ToolStripButton.svelte
index f4e7ee2f..7016bd0c 100644
--- a/packages/web/src/buttons/ToolStripButton.svelte
+++ b/packages/web/src/buttons/ToolStripButton.svelte
@@ -11,7 +11,7 @@
 
   function handleClick(e) {
     if (disabled) return;
-    dispatch('click');
+    dispatch('click', { target: e.target });
   }
 </script>
 
diff --git a/packages/web/src/buttons/ToolStripDropDownButton.svelte b/packages/web/src/buttons/ToolStripDropDownButton.svelte
index 82b6de12..5a06ab9a 100644
--- a/packages/web/src/buttons/ToolStripDropDownButton.svelte
+++ b/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>
diff --git a/packages/web/src/buttons/ToolStripExportButton.svelte b/packages/web/src/buttons/ToolStripExportButton.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 0366d4c4..5c0e119f 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/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(),
   });
diff --git a/packages/web/src/datagrid/SqlDataGridCore.svelte b/packages/web/src/datagrid/SqlDataGridCore.svelte
index 52762a94..ecfdefe2 100644
--- a/packages/web/src/datagrid/SqlDataGridCore.svelte
+++ b/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 () => {
-        const coninfo = await getConnectionInfo({ conid });
-        exportElectronFile(
-          pureName || 'Data',
-          {
-            functionName: 'queryReader',
-            props: {
-              connection: {
-                ..._.omit(coninfo, ['_id', 'displayName']),
-                database,
-              },
-              sql: display.getExportQuery(),
-            },
-          },
-          fmt
-        );
-      }),
+      ...createQuickExportMenu($extensions, quickExportHandler),
       tag: 'export',
     },
     { command: 'sqlDataGrid.export', tag: 'export' }
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 3b26a3e7..2f607482 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/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',
diff --git a/packages/web/src/tabs/TableDataTab.svelte b/packages/web/src/tabs/TableDataTab.svelte
index 91f69aa0..cd9b3658 100644
--- a/packages/web/src/tabs/TableDataTab.svelte
+++ b/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>
 
diff --git a/packages/web/src/tabs/ViewDataTab.svelte b/packages/web/src/tabs/ViewDataTab.svelte
index 737901d2..fb38195d 100644
--- a/packages/web/src/tabs/ViewDataTab.svelte
+++ b/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
-    {...$$props}
-    {display}
-    config={$config}
-    setConfig={config.update}
-    cache={$cache}
-    setCache={cache.update}
-    focusOnVisible
-    gridCoreComponent={SqlDataGridCore}
-  />
+  <ToolStripContainer>
+    <DataGrid
+      {...$$props}
+      {display}
+      config={$config}
+      setConfig={config.update}
+      cache={$cache}
+      setCache={cache.update}
+      focusOnVisible
+      gridCoreComponent={SqlDataGridCore}
+    />
+    <svelte:fragment slot="toolstrip">
+      <ToolStripCommandButton command="dataGrid.refresh" />
+      <ToolStripCommandButton command="sqlDataGrid.export" />
+    </svelte:fragment>
+  </ToolStripContainer>
 {/if}
 
 <StatusBarTabItem
diff --git a/packages/web/src/utility/contextMenu.ts b/packages/web/src/utility/contextMenu.ts
index f69e31d8..5705bdf6 100644
--- a/packages/web/src/utility/contextMenu.ts
+++ b/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);
diff --git a/packages/web/src/utility/createQuickExportMenu.ts b/packages/web/src/utility/createQuickExportMenu.ts
index 4b6e0086..5872ade5 100644
--- a/packages/web/src/utility/createQuickExportMenu.ts
+++ b/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 => ({
-      text: fmt.label,
-      onClick: handler(fmt),
-    })),
+    submenu: createQuickExportMenuItems(extensions, handler),
   };
 }