basic updates again working

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;

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) => (
-    //     <ErrorMessageModal modalState={modalState} message={errorMessage} title="Error when saving" />
-    //   ));
-    // } 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}
       />
-      <ConfirmSqlModal
-        modalState={confirmSqlModalState}
-        sql={confirmSql}
-        engine={display.engine}
-        onConfirm={handleConfirmSql}
-      />
       {allRowCount && <RowCountLabel>{rowCountInfo}</RowCountLabel>}
       {props.toolbarPortalRef &&
         tabVisible &&

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 &&

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) => (
+        <ErrorMessageModal modalState={modalState} message={errorMessage} title="Error when saving" />
+      ));
+    } else {
+      dispatchChangeSet({ type: 'reset', value: createChangeSet() });
+      setConfirmSql(null);
+      display.reload();
+    }
+  }
+
   // const grider = React.useMemo(()=>new ChangeSetGrider())
 
   return (
-    <LoadingDataGridCore
-      {...props}
-      exportGrid={exportGrid}
-      openQuery={openQuery}
-      loadDataPage={loadDataPage}
-      dataPageAvailable={dataPageAvailable}
-      loadRowCount={loadRowCount}
-      griderFactory={ChangeSetGrider.factory}
-      griderFactoryDeps={ChangeSetGrider.factoryDeps}
-    />
+    <>
+      <LoadingDataGridCore
+        {...props}
+        exportGrid={exportGrid}
+        openQuery={openQuery}
+        loadDataPage={loadDataPage}
+        dataPageAvailable={dataPageAvailable}
+        loadRowCount={loadRowCount}
+        griderFactory={ChangeSetGrider.factory}
+        griderFactoryDeps={ChangeSetGrider.factoryDeps}
+        changeSet={changeSetState && changeSetState.value}
+        onSave={handleSave}
+      />
+      <ConfirmSqlModal
+        modalState={confirmSqlModalState}
+        sql={confirmSql}
+        engine={display.engine}
+        onConfirm={handleConfirmSql}
+      />
+    </>
   );
 }