SYNC: cell data widget moved

packages/web/src/datagrid/DataGrid.svelte

@@ -24,7 +24,7 @@
   registerCommand({
     id: 'dataGrid.switchToTable',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.witchToTable', { defaultMessage: 'Switch to table'}),
+    name: __t('command.datagrid.witchToTable', { defaultMessage: 'Switch to table' }),
     icon: 'icon table',
     keyText: 'F4',
     testEnabled: () => getCurrentEditor()?.switchViewEnabled('table'),
@@ -70,6 +70,7 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import { __t, _t } from '../translations';
   import { isProApp } from '../utility/proTools';
+  import CellDataWidget from '../widgets/CellDataWidget.svelte';
 
   export let config;
   export let setConfig;
@@ -91,6 +92,7 @@
   export let hasMultiColumnFilter = false;
   export let setLoadedRows = null;
   export let hideGridLeftColumn = false;
+  export let cellDataViewVisible = true;
 
   export let onPublishedCellsChanged;
 
@@ -107,6 +109,7 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
+  let cellViewWidth;
   const collapsedLeftColumnStore =
     getContext('collapsedLeftColumnStore') || writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
 
@@ -157,6 +160,7 @@
   );
 
   $: if (managerSize) setLocalStorage('dataGridManagerWidth', managerSize);
+  $: if (cellViewWidth) setLocalStorage('dataGridCellViewWidth', cellViewWidth);
 
   function getInitialManagerSize() {
     const width = getLocalStorage('dataGridManagerWidth');
@@ -165,6 +169,14 @@
     }
     return '300px';
   }
+
+  function getInitialCellViewWidth() {
+    const width = getLocalStorage('dataGridCellViewWidth');
+    if (_.isNumber(width) && width > 30 && width < 500) {
+      return width;
+    }
+    return 300;
+  }
 </script>
 
 <HorizontalSplitter
@@ -227,30 +239,45 @@
   <svelte:fragment slot="2">
     <VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro && !isFormView && showMacros}>
       <svelte:fragment slot="1">
-        {#if isFormView}
-          <svelte:component this={formViewComponent} {...$$props} />
-        {:else if isJsonView}
-          <svelte:component this={jsonViewComponent} {...$$props} {setLoadedRows} />
-        {:else}
-          <svelte:component
-            this={gridCoreComponent}
-            {...$$props}
-            {collapsedLeftColumnStore}
-            formViewAvailable={!!formViewComponent}
-            macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
-            macroPreview={$selectedMacro}
-            {setLoadedRows}
-            onPublishedCellsChanged={value => {
-              publishedCells = value;
-              if (onPublishedCellsChanged) {
-                onPublishedCellsChanged(value);
-              }
-            }}
-            onChangeSelectedColumns={cols => {
-              if (domColumnManager) domColumnManager.setSelectedColumns(cols);
-            }}
-          />
-        {/if}
+        <HorizontalSplitter
+          initialSizeRight={getInitialCellViewWidth()}
+          onChangeSize={value => (cellViewWidth = value)}
+          isSplitter={cellDataViewVisible && !isFormView}
+        >
+          <svelte:fragment slot="1">
+            {#if isFormView}
+              <svelte:component this={formViewComponent} {...$$props} />
+            {:else if isJsonView}
+              <svelte:component this={jsonViewComponent} {...$$props} {setLoadedRows} />
+            {:else}
+              <svelte:component
+                this={gridCoreComponent}
+                {...$$props}
+                {collapsedLeftColumnStore}
+                formViewAvailable={!!formViewComponent}
+                macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
+                macroPreview={$selectedMacro}
+                {setLoadedRows}
+                onPublishedCellsChanged={value => {
+                  publishedCells = value;
+                  if (onPublishedCellsChanged) {
+                    onPublishedCellsChanged(value);
+                  }
+                }}
+                onChangeSelectedColumns={cols => {
+                  if (domColumnManager) domColumnManager.setSelectedColumns(cols);
+                }}
+              />
+            {/if}
+          </svelte:fragment>
+          <svelte:fragment slot="2">
+            <CellDataWidget
+              onClose={() => {
+                cellDataViewVisible = false;
+              }}
+            />
+          </svelte:fragment>
+        </HorizontalSplitter>
       </svelte:fragment>
 
       <svelte:fragment slot="2">

packages/web/src/widgets/CellDataWidget.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-  import { isWktGeometry } from 'dbgate-tools';
 
   const formats = [
     {
@@ -110,9 +109,9 @@
   import XmlCellView from '../celldata/XmlCellView.svelte';
   import { _t } from '../translations';
 
-  let selectedFormatType = 'autodetect';
+  export let onClose;
 
-  export let selection = undefined;
+  let selectedFormatType = 'autodetect';
 
   $: autodetectFormatType = autodetect(selection);
   $: autodetectFormat = formats.find(x => x.type == autodetectFormatType);
@@ -124,7 +123,7 @@
 </script>
 
 <div class="wrapper">
-  <WidgetTitle>{_t('cellDataWidget.title', { defaultMessage: "Cell data view" })}</WidgetTitle>
+  <WidgetTitle {onClose}>{_t('cellDataWidget.title', { defaultMessage: "Cell data view" })}</WidgetTitle>
   <div class="main">
     <div class="toolbar">
       Format:<span>&nbsp;</span>

packages/web/src/widgets/WidgetContainer.svelte

@@ -4,7 +4,6 @@
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
   import PluginsWidget from './PluginsWidget.svelte';
-  import CellDataWidget from './CellDataWidget.svelte';
   import HistoryWidget from './HistoryWidget.svelte';
   import AdminMenuWidget from './AdminMenuWidget.svelte';
   import AdminPremiumPromoWidget from './AdminPremiumPromoWidget.svelte';
@@ -29,9 +28,6 @@
 {#if $visibleSelectedWidget == 'plugins' && hasPermission('widgets/plugins')}
   <PluginsWidget />
 {/if}
-{#if $visibleSelectedWidget == 'cell-data' && hasPermission('widgets/cell-data')}
-  <CellDataWidget />
-{/if}
 {#if $visibleSelectedWidget == 'admin' && hasPermission('widgets/admin')}
   <AdminMenuWidget />
 {/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -72,11 +72,6 @@
     //   name: 'plugins',
     //   title: 'Extensions & Plugins',
     // },
-    {
-      icon: 'icon cell-data',
-      name: 'cell-data',
-      title: _t('widgets.selectedCellDataDetailView', { defaultMessage: 'Selected cell data detail view' }),
-    },
     {
       name: 'cloud-public',
       title: _t('widgets.dbgateCloud', { defaultMessage: 'DbGate Cloud' }),