save command refactor - moved to defining component

packages/web/src/tabs/CollectionDataTab.svelte

@@ -1,6 +1,20 @@
 <script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('CollectionDataTab');
+
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
+
+  registerCommand({
+    id: 'collectionTable.save',
+    group: 'save',
+    category: 'Collection data',
+    name: 'Save',
+    // keyText: 'Ctrl+S',
+    toolbar: true,
+    icon: 'icon save',
+    testEnabled: () => getCurrentEditor()?.canSave(),
+    onClick: () => getCurrentEditor().save(),
+  });
 </script>
 
 <script lang="ts">
@@ -13,6 +27,7 @@
     createGridConfig,
     TableFormViewDisplay,
     CollectionGridDisplay,
+    changeSetContainsChanges,
   } from 'dbgate-datalib';
   import { findEngineDriver } from 'dbgate-tools';
   import { writable } from 'svelte/store';
@@ -22,6 +37,13 @@
   import { useCollectionInfo, useConnectionInfo } from '../utility/metadataLoaders';
   import { extensions } from '../stores';
   import CollectionJsonView from '../jsonview/CollectionJsonView.svelte';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import axiosInstance from '../utility/axiosInstance';
+  import { showModal } from '../modals/modalTools';
+  import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import ConfirmNoSqlModal from '../modals/ConfirmNoSqlModal.svelte';
+  import registerCommand from '../commands/registerCommand';
+  import { registerMenu } from '../utility/contextMenu';
 
   export let tabid;
   export let conid;
@@ -31,6 +53,8 @@
 
   let loadedRows;
 
+  export const activator = createActivator('CollectionDataTab', true);
+
   const config = useGridConfig(tabid);
   const cache = writable(createGridCache());
 
@@ -58,6 +82,40 @@
         )
       : null;
   // $: console.log('LOADED ROWS MONGO', loadedRows);
+
+  async function handleConfirmChange(changeSet) {
+    const resp = await axiosInstance.request({
+      url: 'database-connections/update-collection',
+      method: 'post',
+      params: {
+        conid,
+        database,
+      },
+      data: { changeSet },
+    });
+    const { errorMessage } = resp.data || {};
+    if (errorMessage) {
+      showModal(ErrorMessageModal, { title: 'Error when saving', message: errorMessage });
+    } else {
+      dispatchChangeSet({ type: 'reset', value: createChangeSet() });
+      display?.reload();
+    }
+  }
+
+  export function canSave() {
+    return changeSetContainsChanges($changeSetStore?.value);
+  }
+
+  export function save() {
+    const json = $changeSetStore?.value;
+    showModal(ConfirmNoSqlModal, {
+      json,
+      onConfirm: () => handleConfirmChange(json),
+      engine: display.engine,
+    });
+  }
+
+  registerMenu({ command: 'collectionTable.save', tag: 'save' });
 </script>
 
 <DataGrid

packages/web/src/tabs/FreeTableTab.svelte

@@ -1,5 +1,22 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('FreeTableTab');
+
+  registerCommand({
+    id: 'freeTable.save',
+    group: 'save',
+    category: 'Table data',
+    name: 'Save',
+    // keyText: 'Ctrl+S',
+    toolbar: true,
+    icon: 'icon save',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().save(),
+  });
+</script>
+
 <script lang="ts">
   import { createFreeTableModel, runMacro } from 'dbgate-datalib';
+  import registerCommand from '../commands/registerCommand';
   import DataGrid from '../datagrid/DataGrid.svelte';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
@@ -10,6 +27,8 @@
   import useEditorData from '../query/useEditorData';
   import axiosInstance from '../utility/axiosInstance';
   import { changeTab } from '../utility/common';
+  import { registerMenu } from '../utility/contextMenu';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
   import createUndoReducer from '../utility/createUndoReducer';
   import useGridConfig from '../utility/useGridConfig';
 
@@ -18,6 +37,8 @@
   export let archiveFolder;
   export let archiveFile;
 
+  export const activator = createActivator('FreeTableTab', true);
+
   const config = useGridConfig(tabid);
   const [modelState, dispatchModel] = createUndoReducer(createFreeTableModel());
 
@@ -37,7 +58,7 @@
 
   $: setEditorData($modelState.value);
 
-  function handleSave() {
+  export function save() {
     showModal(SaveArchiveModal, {
       folder: archiveFolder,
       file: archiveFile,
@@ -58,6 +79,8 @@
     const newModel = runMacro(macro, params, $modelState.value, false, cells);
     dispatchModel({ type: 'set', value: newModel });
   }
+
+  registerMenu({ command: 'freeTable.save', tag: 'save' });
 </script>
 
 {#if isLoading}
@@ -70,7 +93,6 @@
     setConfig={config.update}
     modelState={$modelState}
     {dispatchModel}
-    onSave={handleSave}
     focusOnVisible
     gridCoreComponent={FreeTableGridCore}
     freeTableColumn

packages/web/src/tabs/TableDataTab.svelte

@@ -1,4 +1,18 @@
 <script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('TableDataTab');
+
+  registerCommand({
+    id: 'tableData.save',
+    group: 'save',
+    category: 'Table data',
+    name: 'Save',
+    // keyText: 'Ctrl+S',
+    toolbar: true,
+    icon: 'icon save',
+    testEnabled: () => getCurrentEditor()?.canSave(),
+    onClick: () => getCurrentEditor().save(),
+  });
+
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
 </script>
@@ -8,6 +22,8 @@
   import TableDataGrid from '../datagrid/TableDataGrid.svelte';
   import useGridConfig from '../utility/useGridConfig';
   import {
+    changeSetContainsChanges,
+    changeSetToSql,
     createChangeSet,
     createGridCache,
     createGridConfig,
@@ -15,9 +31,20 @@
     TableGridDisplay,
   } from 'dbgate-datalib';
   import { findEngineDriver } from 'dbgate-tools';
+  import { reloadDataCacheFunc } from 'dbgate-datalib';
   import { writable } from 'svelte/store';
   import createUndoReducer from '../utility/createUndoReducer';
   import invalidateCommands from '../commands/invalidateCommands';
+  import axiosInstance from '../utility/axiosInstance';
+  import { showModal } from '../modals/modalTools';
+  import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
+  import { scriptToSql } from 'dbgate-sqltree';
+  import { extensions } from '../stores';
+  import ConfirmSqlModal from '../modals/ConfirmSqlModal.svelte';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import registerCommand from '../commands/registerCommand';
+  import { registerMenu } from '../utility/contextMenu';
 
   export let tabid;
   export let conid;
@@ -25,15 +52,55 @@
   export let schemaName;
   export let pureName;
 
+  export const activator = createActivator('TableDataTab', true);
+
   const config = useGridConfig(tabid);
   const cache = writable(createGridCache());
+  const dbinfo = useDatabaseInfo({ conid, database });
+  $: connection = useConnectionInfo({ conid });
 
   const [changeSetStore, dispatchChangeSet] = createUndoReducer(createChangeSet());
 
+  async function handleConfirmSql(sql) {
+    const resp = await axiosInstance.request({
+      url: 'database-connections/query-data',
+      method: 'post',
+      params: {
+        conid,
+        database,
+      },
+      data: { sql },
+    });
+    const { errorMessage } = resp.data || {};
+    if (errorMessage) {
+      showModal(ErrorMessageModal, { title: 'Error when saving', message: errorMessage });
+    } else {
+      dispatchChangeSet({ type: 'reset', value: createChangeSet() });
+      cache.update(reloadDataCacheFunc);
+    }
+  }
+
+  export function save() {
+    const driver = findEngineDriver($connection, $extensions);
+    const script = changeSetToSql($changeSetStore?.value, $dbinfo);
+    const sql = scriptToSql(driver, script);
+    showModal(ConfirmSqlModal, {
+      sql,
+      onConfirm: () => handleConfirmSql(sql),
+      engine: driver.engine,
+    });
+  }
+
+  export function canSave() {
+    return changeSetContainsChanges($changeSetStore?.value);
+  }
+
   $: {
     $changeSetStore;
     invalidateCommands();
   }
+
+  registerMenu({ command: 'tableData.save', tag: 'save' });
 </script>
 
 <TableDataGrid