From c48b058b9debb3e9ce489485c7cf64c0a65b55fa Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 8 Apr 2021 07:58:06 +0200 Subject: [PATCH] save command refactor - moved to defining component --- packages/datalib/src/GridDisplay.ts | 14 ++- .../datagrid/CollectionDataGridCore.svelte | 29 ------ packages/web/src/datagrid/DataGridCore.svelte | 35 ++----- .../web/src/datagrid/SqlDataGridCore.svelte | 30 ------ packages/web/src/formview/FormView.svelte | 94 +++++++++---------- packages/web/src/formview/SqlFormView.svelte | 55 ++++++----- .../web/src/tabs/CollectionDataTab.svelte | 58 ++++++++++++ packages/web/src/tabs/FreeTableTab.svelte | 26 ++++- packages/web/src/tabs/TableDataTab.svelte | 67 +++++++++++++ 9 files changed, 238 insertions(+), 170 deletions(-) diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts index ddc2ef07..b22010ed 100644 --- 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(), + }; +} diff --git a/packages/web/src/datagrid/CollectionDataGridCore.svelte b/packages/web/src/datagrid/CollectionDataGridCore.svelte index 2fcb6895..8cdd1fdf 100644 --- 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} /> diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte index 50562a84..6169ab57 100644 --- 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' }, diff --git a/packages/web/src/datagrid/SqlDataGridCore.svelte b/packages/web/src/datagrid/SqlDataGridCore.svelte index 1ac7fb36..64565a4d 100644 --- 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} /> diff --git a/packages/web/src/formview/FormView.svelte b/packages/web/src/formview/FormView.svelte index b6558335..193ea990 100644 --- 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 @@
-
+
{#each columnChunks as chunk, chunkIndex} {#each chunk as col, rowIndex} diff --git a/packages/web/src/formview/SqlFormView.svelte b/packages/web/src/formview/SqlFormView.svelte index a412809e..33e92fac 100644 --- 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, + // }); + // } diff --git a/packages/web/src/tabs/CollectionDataTab.svelte b/packages/web/src/tabs/CollectionDataTab.svelte index 5149eee5..c19ba0e5 100644 --- a/packages/web/src/tabs/CollectionDataTab.svelte +++ b/packages/web/src/tabs/CollectionDataTab.svelte @@ -1,6 +1,20 @@ + 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(), + }); + + {#if isLoading} @@ -70,7 +93,6 @@ setConfig={config.update} modelState={$modelState} {dispatchModel} - onSave={handleSave} focusOnVisible gridCoreComponent={FreeTableGridCore} freeTableColumn diff --git a/packages/web/src/tabs/TableDataTab.svelte b/packages/web/src/tabs/TableDataTab.svelte index 5a2f82e9..918c174e 100644 --- a/packages/web/src/tabs/TableDataTab.svelte +++ b/packages/web/src/tabs/TableDataTab.svelte @@ -1,4 +1,18 @@ @@ -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' });