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 (
-
+ <>
+
+
+ >
);
}