table data auto refresh

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 />
-    <ToolStripCommandButton command="dataForm.refresh" hideDisabled />
+    <ToolStripCommandSplitButton
+      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 />