table data auto refresh

packages/web/src/buttons/ToolStripCommandButton.svelte

@@ -16,6 +16,7 @@
   export let command;
   export let component = ToolStripButton;
   export let hideDisabled = false;
+  export let buttonLabel = null;
 
   $: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any;
 </script>
@@ -29,6 +30,6 @@
     disabled={!cmd.enabled}
     {...$$restProps}
   >
-    {cmd.toolbarName || cmd.name}
+    {buttonLabel || cmd.toolbarName || cmd.name}
   </svelte:component>
 {/if}

packages/web/src/buttons/ToolStripCommandSplitButton.svelte

@@ -5,7 +5,16 @@
   import ToolStripSplitDropDownButton from './ToolStripSplitDropDownButton.svelte';
 
   export let commands;
-  $: menu = _.compact(commands).map(command => ({ command }));
+  export let hideDisabled = false;
+  export let buttonLabel = null;
+
+  $: menu = _.compact(commands).map(command => (_.isString(command) ? { command } : command));
 </script>
 
-<ToolStripCommandButton command={commands[0]} component={ToolStripSplitDropDownButton} {menu} />
+<ToolStripCommandButton
+  command={commands[0]}
+  component={ToolStripSplitDropDownButton}
+  {menu}
+  {hideDisabled}
+  {buttonLabel}
+/>

packages/web/src/tabs/TableDataTab.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
   const getCurrentEditor = () => getActiveComponent('TableDataTab');
+  const INTERVALS = [5, 10, 15, 13, 60];
 
   registerCommand({
     id: 'tableData.save',
@@ -14,6 +15,46 @@
     onClick: () => getCurrentEditor().save(),
   });
 
+  registerCommand({
+    id: 'tableData.setAutoRefresh.1',
+    category: 'Data grid',
+    name: 'Refresh every 1 second',
+    isRelatedToTab: true,
+    testEnabled: () => !!getCurrentEditor(),
+    onClick: () => getCurrentEditor().setAutoRefresh(1),
+  });
+
+  for (const seconds of INTERVALS) {
+    registerCommand({
+      id: `tableData.setAutoRefresh.${seconds}`,
+      category: 'Data grid',
+      name: `Refresh every ${seconds} seconds`,
+      isRelatedToTab: true,
+      testEnabled: () => !!getCurrentEditor(),
+      onClick: () => getCurrentEditor().setAutoRefresh(seconds),
+    });
+  }
+
+  registerCommand({
+    id: 'tableData.stopAutoRefresh',
+    category: 'Data grid',
+    name: 'Stop auto refresh',
+    isRelatedToTab: true,
+    keyText: 'CtrlOrCommand+Shift+R',
+    testEnabled: () => getCurrentEditor()?.isAutoRefresh() === true,
+    onClick: () => getCurrentEditor().stopAutoRefresh(null),
+  });
+
+  registerCommand({
+    id: 'tableData.startAutoRefresh',
+    category: 'Data grid',
+    name: 'Start auto refresh',
+    isRelatedToTab: true,
+    keyText: 'CtrlOrCommand+Shift+R',
+    testEnabled: () => getCurrentEditor()?.isAutoRefresh() === false,
+    onClick: () => getCurrentEditor().startAutoRefresh(),
+  });
+
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
 </script>
@@ -50,12 +91,13 @@
   import { showSnackbarSuccess } from '../utility/snackbar';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
   import openNewTab from '../utility/openNewTab';
-  import { setContext } from 'svelte';
+  import { onDestroy, setContext } from 'svelte';
   import { apiCall } from '../utility/api';
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
+  import ToolStripCommandSplitButton from '../buttons/ToolStripCommandSplitButton.svelte';
 
   export let tabid;
   export let conid;
@@ -68,6 +110,11 @@
   const config = useGridConfig(tabid);
   const cache = writable(createGridCache());
   const dbinfo = useDatabaseInfo({ conid, database });
+
+  let autoRefreshInterval = 10;
+  let autoRefreshStarted = false;
+  let autoRefreshTimer = null;
+
   $: connection = useConnectionInfo({ conid });
 
   const [changeSetStore, dispatchChangeSet] = createUndoReducer(createChangeSet());
@@ -106,6 +153,38 @@
     return changeSetContainsChanges($changeSetStore?.value);
   }
 
+  export function setAutoRefresh(interval) {
+    autoRefreshInterval = interval;
+    startAutoRefresh();
+    invalidateCommands();
+  }
+
+  export function isAutoRefresh() {
+    return autoRefreshStarted;
+  }
+
+  export function startAutoRefresh() {
+    closeRefreshTimer();
+    autoRefreshTimer = setInterval(() => {
+      cache.update(reloadDataCacheFunc);
+    }, autoRefreshInterval * 1000);
+    autoRefreshStarted = true;
+    invalidateCommands();
+  }
+
+  export function stopAutoRefresh() {
+    closeRefreshTimer();
+    autoRefreshStarted = false;
+    invalidateCommands();
+  }
+
+  function closeRefreshTimer() {
+    if (autoRefreshTimer) {
+      clearInterval(autoRefreshTimer);
+      autoRefreshTimer = null;
+    }
+  }
+
   $: {
     $changeSetStore;
     invalidateCommands();
@@ -117,7 +196,21 @@
   setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
 
+  onDestroy(() => {
+    closeRefreshTimer();
+  });
+
   const quickExportHandlerRef = createQuickExportHandlerRef();
+
+  function createAutoRefreshMenu() {
+    return [
+      { divider: true },
+      { command: 'tableData.stopAutoRefresh', hideDisabled: true },
+      { command: 'tableData.startAutoRefresh', hideDisabled: true },
+      'tableData.setAutoRefresh.1',
+      ...INTERVALS.map(seconds => ({ command: `tableData.setAutoRefresh.${seconds}`, text: `...${seconds} seconds` })),
+    ];
+  }
 </script>
 
 <ToolStripContainer>
@@ -134,8 +227,19 @@
   />
 
   <svelte:fragment slot="toolstrip">
-    <ToolStripCommandButton command="dataGrid.refresh" hideDisabled />
+    <ToolStripCommandSplitButton
-    <ToolStripCommandButton command="dataForm.refresh" hideDisabled />
+      buttonLabel={autoRefreshStarted ? `Refresh (every ${autoRefreshInterval}s)` : null}
+      commands={['dataGrid.refresh', ...createAutoRefreshMenu()]}
+      hideDisabled
+    />
+    <ToolStripCommandSplitButton
+      buttonLabel={autoRefreshStarted ? `Refresh (every ${autoRefreshInterval}s)` : null}
+      commands={['dataForm.refresh', ...createAutoRefreshMenu()]}
+      hideDisabled
+    />
+
+    <!-- <ToolStripCommandButton command="dataGrid.refresh" hideDisabled />
+    <ToolStripCommandButton command="dataForm.refresh" hideDisabled /> -->
     <ToolStripCommandButton command="tableData.save" />
     <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
     <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />