diff --git a/packages/web/src/formview/FormView.js b/packages/web/src/formview/FormView.js index 10322d0b4..0ad1fbeed 100644 --- a/packages/web/src/formview/FormView.js +++ b/packages/web/src/formview/FormView.js @@ -92,7 +92,7 @@ function isDataCell(cell) { } export default function FormView(props) { - const { toolbarPortalRef, tabVisible, config, setConfig, onNavigate, former } = props; + const { toolbarPortalRef, tabVisible, config, setConfig, onNavigate, former, onSave } = props; /** @type {import('dbgate-datalib').FormViewDisplay} */ const formDisplay = props.formDisplay; const theme = useTheme(); @@ -188,6 +188,15 @@ export default function FormView(props) { } }; + function handleSave() { + if (inplaceEditorState.cell) { + // @ts-ignore + dispatchInsplaceEditor({ type: 'shouldSave' }); + return; + } + if (onSave) onSave(); + } + const scrollIntoView = (cell) => { const element = cellRefs.current[`${cell[0]},${cell[1]}`]; if (element) element.scrollIntoView(); @@ -217,6 +226,12 @@ export default function FormView(props) { event.preventDefault(); return; } + if (event.keyCode == keycodes.s && event.ctrlKey) { + event.preventDefault(); + handleSave(); + // this.saveAndFocus(); + } + if ( !event.ctrlKey && !event.altKey && diff --git a/packages/web/src/formview/SqlFormView.js b/packages/web/src/formview/SqlFormView.js index c5f5b218c..326a23851 100644 --- a/packages/web/src/formview/SqlFormView.js +++ b/packages/web/src/formview/SqlFormView.js @@ -1,4 +1,4 @@ -import { TableFormViewDisplay } from 'dbgate-datalib'; +import { changeSetToSql, createChangeSet, TableFormViewDisplay } from 'dbgate-datalib'; import { findEngineDriver } from 'dbgate-tools'; import React from 'react'; import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders'; @@ -6,6 +6,11 @@ import useExtensions from '../utility/useExtensions'; import FormView from './FormView'; import axios from '../utility/axios'; import ChangeSetFormer from './ChangeSetFormer'; +import ConfirmSqlModal from '../modals/ConfirmSqlModal'; +import ErrorMessageModal from '../modals/ErrorMessageModal'; +import { scriptToSql } from 'dbgate-sqltree'; +import useModalState from '../modals/useModalState'; +import useShowModal from '../modals/showModal'; async function loadRow(props, sql) { const { conid, database } = props; @@ -27,8 +32,17 @@ async function loadRow(props, sql) { } export default function SqlFormView(props) { - const { formDisplay, changeSetState, dispatchChangeSet } = props; + const { formDisplay, changeSetState, dispatchChangeSet, conid, database } = props; const [rowData, setRowData] = React.useState(null); + const [reloadToken, setReloadToken] = React.useState(0); + + const confirmSqlModalState = useModalState(); + const [confirmSql, setConfirmSql] = React.useState(''); + const showModal = useShowModal(); + + const changeSet = changeSetState && changeSetState.value; + const changeSetRef = React.useRef(changeSet); + changeSetRef.current = changeSet; const handleLoadCurrentRow = async () => { const row = await loadRow(props, formDisplay.getCurrentRowQuery()); @@ -43,6 +57,10 @@ export default function SqlFormView(props) { } }; + React.useEffect(() => { + if (formDisplay) handleLoadCurrentRow(); + }, [reloadToken]); + React.useEffect(() => { if (formDisplay && !formDisplay.isLoadedCurrentRow(rowData)) { handleLoadCurrentRow(); @@ -56,6 +74,35 @@ export default function SqlFormView(props) { formDisplay, ]); + function handleSave() { + const script = changeSetToSql(changeSetRef.current, formDisplay.dbinfo); + const sql = scriptToSql(formDisplay.driver, script); + setConfirmSql(sql); + confirmSqlModalState.open(); + } + + async function handleConfirmSql() { + const resp = await axios.request({ + url: 'database-connections/query-data', + method: 'post', + params: { + conid, + database, + }, + data: { sql: confirmSql }, + }); + const { errorMessage } = resp.data || {}; + if (errorMessage) { + showModal((modalState) => ( + + )); + } else { + dispatchChangeSet({ type: 'reset', value: createChangeSet() }); + setConfirmSql(null); + setReloadToken((x) => x + 1); + } + } + // const { config, setConfig, cache, setCache, schemaName, pureName, conid, database } = props; // const { formViewKey } = config; @@ -84,5 +131,15 @@ export default function SqlFormView(props) { // setDisplay(newDisplay); // }, [config, cache, conid, database, schemaName, pureName, dbinfo, extensions]); - return ; + return ( + <> + + + + ); }