save command refactor - moved to defining component

packages/datalib/src/GridDisplay.ts

@@ -110,11 +110,7 @@ export abstract class GridDisplay {
   }
 
   reload() {
-    this.setCache(cache => ({
+    this.setCache(reloadDataCacheFunc);
-      // ...cache,
-      ...createGridCache(),
-      refreshTime: new Date().getTime(),
-    }));
   }
 
   includeInColumnSet(field: keyof GridConfigColumns, uniqueName: string, isIncluded: boolean) {
@@ -586,3 +582,11 @@ export abstract class GridDisplay {
     }));
   }
 }
+
+export function reloadDataCacheFunc(cache: GridCache): GridCache {
+  return {
+    // ...cache,
+    ...createGridCache(),
+    refreshTime: new Date().getTime(),
+  };
+}

packages/web/src/datagrid/CollectionDataGridCore.svelte

@@ -128,34 +128,6 @@
   // $: console.log('GRIDER', grider);
   // $: if (onChangeGrider) onChangeGrider(grider);
 
-  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();
-    }
-  }
-
-  function handleSave() {
-    const json = changeSetState && changeSetState.value;
-    showModal(ConfirmNoSqlModal, {
-      json,
-      onConfirm: () => handleConfirmChange(json),
-      engine: display.engine,
-    });
-  }
-
   function exportGrid() {
     const initialValues: any = {};
     initialValues.sourceStorageType = 'query';
@@ -219,5 +191,4 @@
   bind:loadedRows
   frameSelection={!!macroPreview}
   {grider}
-  onSave={handleSave}
 />

packages/web/src/datagrid/DataGridCore.svelte

@@ -12,18 +12,6 @@
     onClick: () => getCurrentDataGrid().refresh(),
   });
 
-  registerCommand({
-    id: 'dataGrid.save',
-    group: 'save',
-    category: 'Data grid',
-    name: 'Save',
-    // keyText: 'Ctrl+S',
-    toolbar: true,
-    icon: 'icon save',
-    testEnabled: () => getCurrentDataGrid()?.getGrider()?.allowSave,
-    onClick: () => getCurrentDataGrid().save(),
-  });
-
   registerCommand({
     id: 'dataGrid.revertRowChanges',
     category: 'Data grid',
@@ -261,7 +249,6 @@
   export let onReferenceSourceChanged = undefined;
   export let onReferenceClick = undefined;
   // export let onSelectedCellsPublishedChanged = undefined;
-  export let onSave;
   export let focusOnVisible = false;
   export let onExportGrid = null;
   export let onOpenQuery = null;
@@ -303,10 +290,6 @@
     display.reload();
   }
 
-  export function save() {
-    if (onSave) onSave();
-  }
-
   export function getGrider() {
     return grider;
   }
@@ -491,10 +474,6 @@
     editJsonRowDocument(grider, rowIndex);
   }
 
-  // export function getGeneralAllowSave() {
-  //   return generalAllowSave;
-  // }
-
   $: autofillMarkerCell =
     selectedCells && selectedCells.length > 0 && _.uniq(selectedCells.map(x => x[0])).length == 1
       ? [_.max(selectedCells.map(x => x[0])), _.max(selectedCells.map(x => x[1]))]
@@ -994,12 +973,12 @@
         // if (action.mode == 'save') setTimeout(handleSave, 0);
         return {};
       }
-      case 'shouldSave': {
+      // case 'shouldSave': {
-        return {
+      //   return {
-          ...state,
+      //     ...state,
-          shouldSave: true,
+      //     shouldSave: true,
-        };
+      //   };
-      }
+      // }
     }
     return {};
   }, {});
@@ -1019,7 +998,7 @@
     { command: 'dataGrid.switchToJson', hideDisabled: true },
     { command: 'dataGrid.editJsonDocument', hideDisabled: true },
     { divider: true },
-    { command: 'dataGrid.save' },
+    { placeTag: 'save' },
     { command: 'dataGrid.revertRowChanges' },
     { command: 'dataGrid.revertAllChanges' },
     { command: 'dataGrid.deleteSelectedRows' },

packages/web/src/datagrid/SqlDataGridCore.svelte

@@ -102,35 +102,6 @@
   // $: console.log('GRIDER', grider);
   // $: if (onChangeGrider) onChangeGrider(grider);
 
-  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() });
-      display.reload();
-    }
-  }
-
-  function handleSave() {
-    const script = changeSetToSql(changeSetState && changeSetState.value, display.dbinfo);
-    const sql = scriptToSql(display.driver, script);
-    showModal(ConfirmSqlModal, {
-      sql,
-      onConfirm: () => handleConfirmSql(sql),
-      engine: display.engine,
-    });
-  }
-
   function exportGrid() {
     const initialValues: any = {};
     initialValues.sourceStorageType = 'query';
@@ -196,5 +167,4 @@
   bind:selectedCellsPublished
   frameSelection={!!macroPreview}
   {grider}
-  onSave={handleSave}
 />

packages/web/src/formview/FormView.svelte

@@ -10,16 +10,16 @@
     onClick: () => getCurrentDataForm().switchToTable(),
   });
 
-  registerCommand({
+  // registerCommand({
-    id: 'dataForm.save',
+  //   id: 'dataForm.save',
-    group: 'save',
+  //   group: 'save',
-    category: 'Data form',
+  //   category: 'Data form',
-    name: 'Save',
+  //   name: 'Save',
-    toolbar: true,
+  //   toolbar: true,
-    icon: 'icon save',
+  //   icon: 'icon save',
-    testEnabled: () => getCurrentDataForm()?.getFormer()?.allowSave,
+  //   testEnabled: () => getCurrentDataForm()?.getFormer()?.allowSave,
-    onClick: () => getCurrentDataForm().save(),
+  //   onClick: () => getCurrentDataForm().save(),
-  });
+  // });
 
   registerCommand({
     id: 'dataForm.copyToClipboard',
@@ -164,7 +164,7 @@
 
   import axiosInstance from '../utility/axiosInstance';
   import { copyTextToClipboard } from '../utility/clipboard';
-  import contextMenu from '../utility/contextMenu';
+  import contextMenu, { getContextMenu, registerMenu } from '../utility/contextMenu';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import createReducer from '../utility/createReducer';
   import keycodes from '../utility/keycodes';
@@ -181,7 +181,6 @@
   export let isLoading;
   export let former;
   export let formDisplay;
-  export let onSave;
   export let onNavigate;
 
   let wrapperHeight = 1;
@@ -228,14 +227,14 @@
     }));
   }
 
-  export function save() {
+  // export function save() {
-    if ($inplaceEditorState.cell) {
+  //   if ($inplaceEditorState.cell) {
-      // @ts-ignore
+  //     // @ts-ignore
-      dispatchInsplaceEditor({ type: 'shouldSave' });
+  //     dispatchInsplaceEditor({ type: 'shouldSave' });
-      return;
+  //     return;
-    }
+  //   }
-    if (onSave) onSave();
+  //   if (onSave) onSave();
-  }
+  // }
 
   export function setNull() {
     if (isDataCell(currentCell)) {
@@ -332,36 +331,35 @@
         // if (action.mode == 'save') setTimeout(handleSave, 0);
         return {};
       }
-      case 'shouldSave': {
+      // case 'shouldSave': {
-        return {
+      //   return {
-          ...state,
+      //     ...state,
-          shouldSave: true,
+      //     shouldSave: true,
-        };
+      //   };
-      }
+      // }
     }
     return {};
   }, {});
-  function createMenu() {
+  registerMenu(
-    return [
+    { command: 'dataForm.switchToTable' },
-      { command: 'dataForm.switchToTable' },
+    { command: 'dataForm.copyToClipboard' },
-      { command: 'dataForm.copyToClipboard' },
+    { divider: true },
-      { divider: true },
+    { command: 'dataForm.filterSelected' },
-      { command: 'dataForm.filterSelected' },
+    { command: 'dataForm.addToFilter' },
-      { command: 'dataForm.addToFilter' },
+    { divider: true },
-      { divider: true },
+    { placeTag: 'save' },
-      { command: 'dataForm.save' },
+    { command: 'dataForm.revertRowChanges' },
-      { command: 'dataForm.revertRowChanges' },
+    { command: 'dataForm.setNull' },
-      { command: 'dataForm.setNull' },
+    { divider: true },
-      { divider: true },
+    { command: 'dataForm.undo' },
-      { command: 'dataForm.undo' },
+    { command: 'dataForm.redo' },
-      { command: 'dataForm.redo' },
+    { divider: true },
-      { divider: true },
+    { command: 'dataForm.goToFirst' },
-      { command: 'dataForm.goToFirst' },
+    { command: 'dataForm.goToPrevious' },
-      { command: 'dataForm.goToPrevious' },
+    { command: 'dataForm.goToNext' },
-      { command: 'dataForm.goToNext' },
+    { command: 'dataForm.goToLast' }
-      { command: 'dataForm.goToLast' },
+  );
-    ];
+  const menu = getContextMenu();
-  }
 
   function handleKeyDown(event) {
     if ($inplaceEditorState.cell) return;
@@ -437,7 +435,7 @@
 </script>
 
 <div class="outer">
-  <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
+  <div class="wrapper" use:contextMenu={menu} bind:clientHeight={wrapperHeight}>
     {#each columnChunks as chunk, chunkIndex}
       <table on:mousedown={handleTableMouseDown}>
         {#each chunk as col, rowIndex}

packages/web/src/formview/SqlFormView.svelte

@@ -131,34 +131,34 @@
 
   $: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
 
-  async function handleConfirmSql(sql) {
+  // async function handleConfirmSql(sql) {
-    const resp = await axiosInstance.request({
+  //   const resp = await axiosInstance.request({
-      url: 'database-connections/query-data',
+  //     url: 'database-connections/query-data',
-      method: 'post',
+  //     method: 'post',
-      params: {
+  //     params: {
-        conid,
+  //       conid,
-        database,
+  //       database,
-      },
+  //     },
-      data: { sql },
+  //     data: { sql },
-    });
+  //   });
-    const { errorMessage } = resp.data || {};
+  //   const { errorMessage } = resp.data || {};
-    if (errorMessage) {
+  //   if (errorMessage) {
-      showModal(ErrorMessageModal, { title: 'Error when saving', message: errorMessage });
+  //     showModal(ErrorMessageModal, { title: 'Error when saving', message: errorMessage });
-    } else {
+  //   } else {
-      dispatchChangeSet({ type: 'reset', value: createChangeSet() });
+  //     dispatchChangeSet({ type: 'reset', value: createChangeSet() });
-      formDisplay.reload();
+  //     formDisplay.reload();
-    }
+  //   }
-  }
+  // }
 
-  function handleSave() {
+  // function handleSave() {
-    const script = changeSetToSql(changeSetState && changeSetState.value, formDisplay.dbinfo);
+  //   const script = changeSetToSql(changeSetState && changeSetState.value, formDisplay.dbinfo);
-    const sql = scriptToSql(formDisplay.driver, script);
+  //   const sql = scriptToSql(formDisplay.driver, script);
-    showModal(ConfirmSqlModal, {
+  //   showModal(ConfirmSqlModal, {
-      sql,
+  //     sql,
-      onConfirm: () => handleConfirmSql(sql),
+  //     onConfirm: () => handleConfirmSql(sql),
-      engine: formDisplay.engine,
+  //     engine: formDisplay.engine,
-    });
+  //   });
-  }
+  // }
 </script>
 
 <FormView
@@ -167,6 +167,5 @@
   isLoading={isLoadingData}
   {allRowCount}
   {rowCountBefore}
-  onSave={handleSave}
   onNavigate={handleNavigate}
 />

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