save command refactor - moved to defining component

2024-11-07 20:26:23 +00:00 · 2021-04-08 07:58:06 +02:00 · 2021-04-08 07:58:06 +02:00 · c48b058b9d
commit c48b058b9d
parent b553dbb6b9
9 changed files with 238 additions and 170 deletions
--- a/packages/datalib/src/GridDisplay.ts
+++ b/packages/datalib/src/GridDisplay.ts
@ -110,11 +110,7 @@ export abstract class GridDisplay {
  }

  reload() {
-    this.setCache(cache => ({
-      // ...cache,
-      ...createGridCache(),
-      refreshTime: new Date().getTime(),
-    }));
+    this.setCache(reloadDataCacheFunc);
  }

  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(),
+  };
+}
--- a/packages/web/src/datagrid/CollectionDataGridCore.svelte
+++ b/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}
 />
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/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': {
-        return {
-          ...state,
-          shouldSave: true,
-        };
-      }
+      // case 'shouldSave': {
+      //   return {
+      //     ...state,
+      //     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' },
--- a/packages/web/src/datagrid/SqlDataGridCore.svelte
+++ b/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}
 />
--- a/packages/web/src/formview/FormView.svelte
+++ b/packages/web/src/formview/FormView.svelte
@ -10,16 +10,16 @@
    onClick: () => getCurrentDataForm().switchToTable(),
  });

-  registerCommand({
-    id: 'dataForm.save',
-    group: 'save',
-    category: 'Data form',
-    name: 'Save',
-    toolbar: true,
-    icon: 'icon save',
-    testEnabled: () => getCurrentDataForm()?.getFormer()?.allowSave,
-    onClick: () => getCurrentDataForm().save(),
-  });
+  // registerCommand({
+  //   id: 'dataForm.save',
+  //   group: 'save',
+  //   category: 'Data form',
+  //   name: 'Save',
+  //   toolbar: true,
+  //   icon: 'icon save',
+  //   testEnabled: () => getCurrentDataForm()?.getFormer()?.allowSave,
+  //   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() {
-    if ($inplaceEditorState.cell) {
-      // @ts-ignore
-      dispatchInsplaceEditor({ type: 'shouldSave' });
-      return;
-    }
-    if (onSave) onSave();
-  }
+  // export function save() {
+  //   if ($inplaceEditorState.cell) {
+  //     // @ts-ignore
+  //     dispatchInsplaceEditor({ type: 'shouldSave' });
+  //     return;
+  //   }
+  //   if (onSave) onSave();
+  // }

  export function setNull() {
    if (isDataCell(currentCell)) {
@ -332,36 +331,35 @@
        // if (action.mode == 'save') setTimeout(handleSave, 0);
        return {};
      }
-      case 'shouldSave': {
-        return {
-          ...state,
-          shouldSave: true,
-        };
-      }
+      // case 'shouldSave': {
+      //   return {
+      //     ...state,
+      //     shouldSave: true,
+      //   };
+      // }
    }
    return {};
  }, {});
-  function createMenu() {
-    return [
-      { command: 'dataForm.switchToTable' },
-      { command: 'dataForm.copyToClipboard' },
-      { divider: true },
-      { command: 'dataForm.filterSelected' },
-      { command: 'dataForm.addToFilter' },
-      { divider: true },
-      { command: 'dataForm.save' },
-      { command: 'dataForm.revertRowChanges' },
-      { command: 'dataForm.setNull' },
-      { divider: true },
-      { command: 'dataForm.undo' },
-      { command: 'dataForm.redo' },
-      { divider: true },
-      { command: 'dataForm.goToFirst' },
-      { command: 'dataForm.goToPrevious' },
-      { command: 'dataForm.goToNext' },
-      { command: 'dataForm.goToLast' },
-    ];
-  }
+  registerMenu(
+    { command: 'dataForm.switchToTable' },
+    { command: 'dataForm.copyToClipboard' },
+    { divider: true },
+    { command: 'dataForm.filterSelected' },
+    { command: 'dataForm.addToFilter' },
+    { divider: true },
+    { placeTag: 'save' },
+    { command: 'dataForm.revertRowChanges' },
+    { command: 'dataForm.setNull' },
+    { divider: true },
+    { command: 'dataForm.undo' },
+    { command: 'dataForm.redo' },
+    { divider: true },
+    { command: 'dataForm.goToFirst' },
+    { command: 'dataForm.goToPrevious' },
+    { command: 'dataForm.goToNext' },
+    { 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}
--- a/packages/web/src/formview/SqlFormView.svelte
+++ b/packages/web/src/formview/SqlFormView.svelte
@ -131,34 +131,34 @@

  $: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);

-  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() });
-      formDisplay.reload();
-    }
-  }
+  // 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() });
+  //     formDisplay.reload();
+  //   }
+  // }

-  function handleSave() {
-    const script = changeSetToSql(changeSetState && changeSetState.value, formDisplay.dbinfo);
-    const sql = scriptToSql(formDisplay.driver, script);
-    showModal(ConfirmSqlModal, {
-      sql,
-      onConfirm: () => handleConfirmSql(sql),
-      engine: formDisplay.engine,
-    });
-  }
+  // function handleSave() {
+  //   const script = changeSetToSql(changeSetState && changeSetState.value, formDisplay.dbinfo);
+  //   const sql = scriptToSql(formDisplay.driver, script);
+  //   showModal(ConfirmSqlModal, {
+  //     sql,
+  //     onConfirm: () => handleConfirmSql(sql),
+  //     engine: formDisplay.engine,
+  //   });
+  // }
 </script>

 <FormView
@ -167,6 +167,5 @@
  isLoading={isLoadingData}
  {allRowCount}
  {rowCountBefore}
-  onSave={handleSave}
  onNavigate={handleNavigate}
 />
--- a/packages/web/src/tabs/CollectionDataTab.svelte
+++ b/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
--- a/packages/web/src/tabs/FreeTableTab.svelte
+++ b/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
--- a/packages/web/src/tabs/TableDataTab.svelte
+++ b/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