diff --git a/packages/web/src/datagrid/ChangeSetGrider.ts b/packages/web/src/datagrid/ChangeSetGrider.ts index 3ad7d895e..22116d2e6 100644 --- a/packages/web/src/datagrid/ChangeSetGrider.ts +++ b/packages/web/src/datagrid/ChangeSetGrider.ts @@ -56,7 +56,9 @@ export default class ChangeSetGrider extends Grider { if (insertedRowIndex != null) status = 'inserted'; const rowStatus = { status, - modifiedFields: new Set(matchedChangeSetItem ? Object.keys(matchedChangeSetItem.fields) : []), + modifiedFields: new Set( + matchedChangeSetItem && matchedChangeSetItem.fields ? Object.keys(matchedChangeSetItem.fields) : [] + ), }; this.rowDataCache[index] = rowUpdated; this.rowStatusCache[index] = rowStatus; diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index 96e742bee..b7f8cd752 100644 --- a/packages/web/src/datagrid/DataGridCore.js +++ b/packages/web/src/datagrid/DataGridCore.js @@ -142,6 +142,7 @@ export default function DataGridCore(props) { exportGrid, allRowCount, openQuery, + onSave, insertedRowCount, isLoading, grider, @@ -201,8 +202,6 @@ export default function DataGridCore(props) { const [tableBodyRef] = useDimensions(); const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions(); // const [tableRef, { height: tableHeight, width: tableWidth }] = useDimensions(); - const confirmSqlModalState = useModalState(); - const [confirmSql, setConfirmSql] = React.useState(''); const changeSet = changeSetState && changeSetState.value; const setChangeSet = React.useCallback((value) => dispatchChangeSet({ type: 'set', value }), [dispatchChangeSet]); @@ -660,8 +659,13 @@ export default function DataGridCore(props) { } function deleteSelectedRows() { - const updatedChangeSet = getSelectedRowDefinitions().reduce((chs, row) => deleteChangeSetRows(chs, row), changeSet); - setChangeSet(updatedChangeSet); + grider.beginUpdate(); + for (const index of getSelectedRowIndexes()) { + if (_.isNumber(index)) grider.deleteRow(index); + } + grider.endUpdate(); + // const updatedChangeSet = getSelectedRowDefinitions().reduce((chs, row) => deleteChangeSetRows(chs, row), changeSet); + // setChangeSet(updatedChangeSet); } function handleGridWheel(event) { @@ -698,33 +702,13 @@ export default function DataGridCore(props) { dispatchInsplaceEditor({ type: 'shouldSave' }); return; } + if (onSave) onSave(); // const script = changeSetToSql(changeSetRef.current, display.dbinfo); // const sql = scriptToSql(display.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); - // display.reload(); - // } - } const insertNewRow = () => { if (display.baseTable) { @@ -1110,12 +1094,6 @@ export default function DataGridCore(props) { onScroll={handleRowScroll} viewportRatio={visibleRowCountUpperBound / grider.rowCount} /> - {allRowCount && {rowCountInfo}} {props.toolbarPortalRef && tabVisible && diff --git a/packages/web/src/datagrid/DataGridRow.js b/packages/web/src/datagrid/DataGridRow.js index 5334d7558..bbda7ea0d 100644 --- a/packages/web/src/datagrid/DataGridRow.js +++ b/packages/web/src/datagrid/DataGridRow.js @@ -171,10 +171,10 @@ function DataGridRow(props) { inplaceEditorState, dispatchInsplaceEditor, // row, - display, + // display, // changeSet, // setChangeSet, - insertedRowIndex, + // insertedRowIndex, autofillMarkerCell, selectedCells, autofillSelectedCells, @@ -236,7 +236,7 @@ function DataGridRow(props) { isModifiedRow={rowStatus.status == 'updated'} isFocusedColumn={col.uniqueName == focusedColumn} isModifiedCell={rowStatus.status == 'updated' && rowStatus.modifiedFields.has(col.uniqueName)} - isInsertedRow={insertedRowIndex != null} + isInsertedRow={rowStatus.status == 'inserted'} isDeletedRow={rowStatus.status == 'deleted'} > {inplaceEditorState.cell && diff --git a/packages/web/src/datagrid/SqlDataGridCore.js b/packages/web/src/datagrid/SqlDataGridCore.js index f401d6432..8c22e93ca 100644 --- a/packages/web/src/datagrid/SqlDataGridCore.js +++ b/packages/web/src/datagrid/SqlDataGridCore.js @@ -5,10 +5,14 @@ import DataGridCore from './DataGridCore'; import useSocket from '../utility/SocketProvider'; import useShowModal from '../modals/showModal'; import ImportExportModal from '../modals/ImportExportModal'; -import { getChangeSetInsertedRows } from '@dbgate/datalib'; +import { changeSetToSql, createChangeSet, getChangeSetInsertedRows } from '@dbgate/datalib'; import { openNewTab } from '../utility/common'; import LoadingDataGridCore from './LoadingDataGridCore'; import ChangeSetGrider from './ChangeSetGrider'; +import { scriptToSql } from '@dbgate/sqltree'; +import useModalState from '../modals/useModalState'; +import ConfirmSqlModal from '../modals/ConfirmSqlModal'; +import ErrorMessageModal from '../modals/ErrorMessageModal'; /** @param props {import('./types').DataGridProps} */ async function loadDataPage(props, offset, limit) { @@ -60,6 +64,13 @@ export default function SqlDataGridCore(props) { const showModal = useShowModal(); const setOpenedTabs = useSetOpenedTabs(); + const confirmSqlModalState = useModalState(); + const [confirmSql, setConfirmSql] = React.useState(''); + + const changeSet = changeSetState && changeSetState.value; + const changeSetRef = React.useRef(changeSet); + changeSetRef.current = changeSet; + function exportGrid() { const initialValues = {}; initialValues.sourceStorageType = 'query'; @@ -84,18 +95,57 @@ export default function SqlDataGridCore(props) { }); } + function handleSave() { + const script = changeSetToSql(changeSetRef.current, display.dbinfo); + const sql = scriptToSql(display.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); + display.reload(); + } + } + // const grider = React.useMemo(()=>new ChangeSetGrider()) return ( - + <> + + + ); }