SYNC: cell data view

packages/web/src/datagrid/DataGrid.svelte

@@ -40,6 +40,17 @@
     onClick: () => getCurrentEditor().toggleLeftPanel(),
   });
 
+  registerCommand({
+    id: 'dataGrid.toggleCellDataView',
+    category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
+    name: __t('command.datagrid.toggleCellDataView', { defaultMessage: 'Toggle cell data view' }),
+    toolbarName: __t('command.datagrid.toggleCellDataView.toolbar', { defaultMessage: 'Cell Data' }),
+    menuName: __t('command.datagrid.toggleCellDataView.menu', { defaultMessage: 'Show Cell Data' }),
+    icon: 'icon cell-data',
+    testEnabled: () => !!getCurrentEditor(),
+    onClick: () => getCurrentEditor().toggleCellDataView(),
+  });
+
   function extractMacroValuesForMacro(macroValues, macro) {
     // return {};
     if (!macro) return {};
@@ -92,7 +103,7 @@
   export let hasMultiColumnFilter = false;
   export let setLoadedRows = null;
   export let hideGridLeftColumn = false;
-  export let cellDataViewVisible = true;
+  export let cellDataViewVisible = false;
 
   export let onPublishedCellsChanged;
 
@@ -152,6 +163,10 @@
     collapsedLeftColumnStore.update(x => !x);
   }
 
+  export function toggleCellDataView() {
+    cellDataViewVisible = !cellDataViewVisible;
+  }
+
   registerMenu(
     { command: 'dataGrid.switchToForm', tag: 'switch', hideDisabled: true },
     { command: 'dataGrid.switchToTable', tag: 'switch', hideDisabled: true },

packages/web/src/datagrid/DataGridCore.svelte

@@ -1858,6 +1858,7 @@
     { command: 'dataGrid.openJsonArrayInSheet', hideDisabled: true },
     { command: 'dataGrid.saveCellToFile', hideDisabled: true },
     { command: 'dataGrid.loadCellFromFile', hideDisabled: true },
+    { command: 'dataGrid.toggleCellDataView', hideDisabled: true },
     // { command: 'dataGrid.copyJsonDocument', hideDisabled: true },
     { divider: true },
     { placeTag: 'export' },

packages/web/src/tabs/TableDataTab.svelte

@@ -23,7 +23,7 @@
       time: 60,
       name: __t('command.datagrid.setAutoRefresh.60', { defaultMessage: 'Refresh every 60 seconds' }),
     },
-  ]
+  ];
 
   registerCommand({
     id: 'tableData.save',
@@ -172,7 +172,10 @@
     const resp = await apiCall('database-connections/run-script', { conid, database, sql, useTransaction: true });
     const { errorMessage } = resp || {};
     if (errorMessage) {
-      showModal(ErrorMessageModal, { title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }), message: errorMessage });
+      showModal(ErrorMessageModal, {
+        title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }),
+        message: errorMessage,
+      });
     } else {
       dispatchChangeSet({ type: 'reset', value: createChangeSet() });
       cache.update(reloadDataCacheFunc);
@@ -192,7 +195,10 @@
       });
       const { errorMessage } = resp || {};
       if (errorMessage) {
-        showModal(ErrorMessageModal, { title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }), message: errorMessage });
+        showModal(ErrorMessageModal, {
+          title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }),
+          message: errorMessage,
+        });
       } else {
         dispatchChangeSet({ type: 'reset', value: createChangeSet() });
         cache.update(reloadDataCacheFunc);
@@ -284,7 +290,10 @@
       { command: 'tableData.stopAutoRefresh', hideDisabled: true },
       { command: 'tableData.startAutoRefresh', hideDisabled: true },
       'tableData.setAutoRefresh.1',
-      ...INTERVALS.map(seconds => ({ command: `tableData.setAutoRefresh.${seconds}`, text: `...${seconds}` + ' ' + _t('command.datagrid.autoRefresh.seconds', { defaultMessage: 'seconds' }) })),
+      ...INTERVALS.map(seconds => ({
+        command: `tableData.setAutoRefresh.${seconds}`,
+        text: `...${seconds}` + ' ' + _t('command.datagrid.autoRefresh.seconds', { defaultMessage: 'seconds' }),
+      })),
     ];
   }
 </script>
@@ -360,13 +369,23 @@
     >
 
     <ToolStripCommandSplitButton
-      buttonLabel={autoRefreshStarted ? _t('tableData.refreshEvery', { defaultMessage: 'Refresh (every {autoRefreshInterval}s)', values: { autoRefreshInterval } }) : null}
+      buttonLabel={autoRefreshStarted
+        ? _t('tableData.refreshEvery', {
+            defaultMessage: 'Refresh (every {autoRefreshInterval}s)',
+            values: { autoRefreshInterval },
+          })
+        : null}
       commands={['dataGrid.refresh', ...createAutoRefreshMenu()]}
       hideDisabled
       data-testid="TableDataTab_refreshGrid"
     />
     <ToolStripCommandSplitButton
-      buttonLabel={autoRefreshStarted ? _t('tableData.refreshEvery', { defaultMessage: 'Refresh (every {autoRefreshInterval}s)', values: { autoRefreshInterval } }) : null}
+      buttonLabel={autoRefreshStarted
+        ? _t('tableData.refreshEvery', {
+            defaultMessage: 'Refresh (every {autoRefreshInterval}s)',
+            values: { autoRefreshInterval },
+          })
+        : null}
       commands={['dataForm.refresh', ...createAutoRefreshMenu()]}
       hideDisabled
       data-testid="TableDataTab_refreshForm"
@@ -402,7 +421,14 @@
 
     <ToolStripButton
       icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
-      on:click={() => collapsedLeftColumnStore.update(x => !x)}>{_t('tableData.viewColumns', { defaultMessage: 'View columns' })}</ToolStripButton
+      on:click={() => collapsedLeftColumnStore.update(x => !x)}
+      >{_t('tableData.viewColumns', { defaultMessage: 'View columns' })}</ToolStripButton
     >
+
+    <ToolStripCommandButton
+      command="dataGrid.toggleCellDataView"
+      hideDisabled
+      data-testid="TableDataTab_toggleCellDataView"
+    />
   </svelte:fragment>
 </ToolStripContainer>