switch grid view command moved

packages/web/src/datagrid/DataGrid.svelte

@@ -1,4 +1,33 @@
 <script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('DataGrid');
+
+  registerCommand({
+    id: 'dataGrid.switchToForm',
+    category: 'Data grid',
+    name: 'Switch to form',
+    keyText: 'F4',
+    testEnabled: () => getCurrentEditor()?.switchViewEnabled('form'),
+    onClick: () => getCurrentEditor().switchToView('form'),
+  });
+
+  registerCommand({
+    id: 'dataGrid.switchToJson',
+    category: 'Data grid',
+    name: 'Switch to JSON',
+    keyText: 'F4',
+    testEnabled: () => getCurrentEditor()?.switchViewEnabled('json'),
+    onClick: () => getCurrentEditor().switchToView('json'),
+  });
+
+  registerCommand({
+    id: 'dataGrid.switchToTable',
+    category: 'Data grid',
+    name: 'Switch to table',
+    keyText: 'F4',
+    testEnabled: () => getCurrentEditor()?.switchViewEnabled('table'),
+    onClick: () => getCurrentEditor().switchToView('table'),
+  });
+
   function extractMacroValuesForMacro(macroValues, macro) {
     // return {};
     if (!macro) return {};
@@ -12,22 +41,25 @@
 <script lang="ts">
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
-  import { runMacroOnChangeSet } from 'dbgate-datalib';
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import FormViewFilters from '../formview/FormViewFilters.svelte';
   import MacroDetail from '../freetable/MacroDetail.svelte';
   import MacroManager from '../freetable/MacroManager.svelte';
-  import createRef from '../utility/createRef';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import ColumnManager from './ColumnManager.svelte';
   import ReferenceManager from './ReferenceManager.svelte';
   import FreeTableColumnEditor from '../freetable/FreeTableColumnEditor.svelte';
   import JsonViewFilters from '../jsonview/JsonViewFilters.svelte';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import _ from 'lodash';
+  import registerCommand from '../commands/registerCommand';
+  import { registerMenu } from '../utility/contextMenu';
 
   export let config;
+  export let setConfig;
   export let gridCoreComponent;
   export let formViewComponent = null;
   export let jsonViewComponent = null;
@@ -46,6 +78,8 @@
 
   export let loadedRows;
 
+  export const activator = createActivator('DataGrid', false);
+
   let selectedCellsPublished = () => [];
 
   const selectedMacro = writable(null);
@@ -61,19 +95,36 @@
   const handleExecuteMacro = () => {
     onRunMacro($selectedMacro, extractMacroValuesForMacro($macroValues, $selectedMacro), selectedCellsPublished());
     $selectedMacro = null;
-
-    // const newChangeSet = runMacroOnChangeSet(
-    //   $selectedMacro,
-    //   extractMacroValuesForMacro($macroValues, $selectedMacro),
-    //   selectedCellsPublished,
-    //   changeSetState?.value,
-    //   display
-    // );
-    // if (newChangeSet) {
-    //   dispatchChangeSet({ type: 'set', value: newChangeSet });
-    // }
-    // $selectedMacro = null;
   };
+
+  export function switchViewEnabled(view) {
+    if (view == 'form') return !!formViewComponent && !!formDisplay && !isFormView && display?.baseTable?.primaryKey;
+    if (view == 'table') return !!(isFormView || isJsonView);
+    if (view == 'json') return !!jsonViewComponent && !isJsonView;
+  }
+
+  export function switchToView(view) {
+    if (view == 'form') {
+      display.switchToFormView(selectedCellsPublished()[0]?.rowData);
+    }
+    if (view == 'table') {
+      setConfig(cfg => ({
+        ...cfg,
+        isFormView: false,
+        isJsonView: false,
+        formViewKey: null,
+      }));
+    }
+    if (view == 'json') {
+      display.switchToJsonView();
+    }
+  }
+
+  registerMenu(
+    { command: 'dataGrid.switchToForm', tag: 'switch', hideDisabled: true },
+    { command: 'dataGrid.switchToTable', tag: 'switch', hideDisabled: true },
+    { command: 'dataGrid.switchToJson', tag: 'switch', hideDisabled: true }
+  );
 </script>
 
 <HorizontalSplitter initialValue="300px" bind:size={managerSize}>
@@ -127,7 +178,6 @@
             this={gridCoreComponent}
             {...$$props}
             formViewAvailable={!!formViewComponent && !!formDisplay}
-            jsonViewAvailable={!!jsonViewComponent}
             macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
             macroPreview={$selectedMacro}
             bind:loadedRows

packages/web/src/datagrid/DataGridCore.svelte

@@ -96,23 +96,6 @@
     onClick: () => getCurrentDataGrid().copyToClipboard(),
   });
 
-  registerCommand({
-    id: 'dataGrid.switchToForm',
-    category: 'Data grid',
-    name: 'Switch to form',
-    keyText: 'F4',
-    testEnabled: () => getCurrentDataGrid()?.formViewEnabled(),
-    onClick: () => getCurrentDataGrid().switchToForm(),
-  });
-
-  registerCommand({
-    id: 'dataGrid.switchToJson',
-    category: 'Data grid',
-    name: 'Switch to JSON',
-    keyText: 'F4',
-    testEnabled: () => getCurrentDataGrid()?.jsonViewEnabled(),
-    onClick: () => getCurrentDataGrid().switchToJson(),
-  });
 
   registerCommand({
     id: 'dataGrid.editJsonDocument',
@@ -234,7 +217,6 @@
   // export let onSelectedCellsPublishedChanged = undefined;
   export let focusOnVisible = false;
   export let formViewAvailable = false;
-  export let jsonViewAvailable = false;
   export let errorMessage = undefined;
 
   export let isLoadedAll;
@@ -360,24 +342,6 @@
     }
   }
 
-  export function formViewEnabled() {
-    return formViewAvailable && display.baseTable && display.baseTable.primaryKey;
-  }
-
-  export function jsonViewEnabled() {
-    return jsonViewAvailable;
-  }
-
-  export function switchToForm() {
-    const cell = currentCell;
-    const rowData = isRegularCell(cell) ? grider.getRowData(cell[0]) : null;
-    display.switchToFormView(rowData);
-  }
-
-  export function switchToJson() {
-    display.switchToJsonView();
-  }
-
   export function filterSelectedValue() {
     const flts = {};
     for (const cell of selectedCells) {
@@ -958,10 +922,7 @@
   registerMenu(
     { command: 'dataGrid.refresh' },
     { command: 'dataGrid.copyToClipboard' },
-    { command: 'dataGrid.export' },
-    { command: 'dataGrid.switchToForm', hideDisabled: true },
-    { command: 'dataGrid.switchToJson', hideDisabled: true },
-    { command: 'dataGrid.editJsonDocument', hideDisabled: true },
+    { placeTag: 'switch' },
     { divider: true },
     { placeTag: 'save' },
     { command: 'dataGrid.revertRowChanges' },

packages/web/src/formview/FormView.svelte

@@ -1,15 +1,6 @@
 <script lang="ts" context="module">
   const getCurrentDataForm = () => getActiveComponent('FormView');
 
-  registerCommand({
-    id: 'dataForm.switchToTable',
-    category: 'Data form',
-    name: 'Switch to table',
-    keyText: 'F4',
-    testEnabled: () => getCurrentDataForm() != null,
-    onClick: () => getCurrentDataForm().switchToTable(),
-  });
-
   // registerCommand({
   //   id: 'dataForm.save',
   //   group: 'save',
@@ -219,14 +210,6 @@
     if (onNavigate) onNavigate(command);
   }
 
-  export function switchToTable() {
-    setConfig(cfg => ({
-      ...cfg,
-      isFormView: false,
-      formViewKey: null,
-    }));
-  }
-
   // export function save() {
   //   if ($inplaceEditorState.cell) {
   //     // @ts-ignore
@@ -341,7 +324,7 @@
     return {};
   }, {});
   registerMenu(
-    { command: 'dataForm.switchToTable' },
+    { placeTag: 'switch' },
     { command: 'dataForm.copyToClipboard' },
     { divider: true },
     { command: 'dataForm.filterSelected' },

packages/web/src/jsonview/CollectionJsonView.svelte

@@ -1,14 +1,5 @@
 <script lang="ts" context="module">
   const getCurrentEditor = () => getActiveComponent('CollectionJsonView');
-
-  registerCommand({
-    id: 'dataJson.switchToTable',
-    category: 'Data Json',
-    name: 'Switch to table',
-    keyText: 'F4',
-    testEnabled: () => getCurrentEditor() != null,
-    onClick: () => getCurrentEditor().switchToTable(),
-  });
 </script>
 
 <script lang="ts">
@@ -56,18 +47,10 @@
     loadData();
   }
 
-  export function switchToTable() {
-    setConfig(cfg => ({
-      ...cfg,
-      isJsonView: false,
-    }));
-  }
-
   onMount(() => {
     loadData();
   });
 
-  registerMenu({ command: 'dataJson.switchToTable' });
   const menu = getContextMenu();
 
   $: grider = new ChangeSetGrider(loadedRows, changeSetState, dispatchChangeSet, display);
@@ -75,7 +58,7 @@
   // $: console.log('GRIDER', grider);
 </script>
 
-<div class="flexcol flex1" use:contextMenu={menu}>
+<div class="flexcol flex1" use:contextMenu={[{ placeTag: 'switch' }, menu]}>
   <div class="toolbar">
     <Pager bind:skip bind:limit on:load={() => display.reload()} />
   </div>