save changes to DB

packages/web/src/datagrid/DataGridCore.js

@@ -26,7 +26,7 @@ import DataGridRow from './DataGridRow';
 import { countColumnSizes, countVisibleRealColumns } from './gridutil';
 import useModalState from '../modals/useModalState';
 import ConfirmSqlModal from '../modals/ConfirmSqlModal';
-import { changeSetToSql } from '@dbgate/datalib';
+import { changeSetToSql, createChangeSet } from '@dbgate/datalib';
 import { scriptToSql } from '@dbgate/sqltree';
 
 const GridContainer = styled.div`
@@ -118,7 +118,7 @@ export default function DataGridCore(props) {
 
     const sql = display.getPageQuery(loadedRows.length, 100);
 
-    let response = await axios.request({
+    const response = await axios.request({
       url: 'database-connections/query-data',
       method: 'post',
       params: {
@@ -312,6 +312,22 @@ export default function DataGridCore(props) {
     confirmSqlModalState.open();
   }
 
+  async function handleConfirmSql() {
+    const response = await axios.request({
+      url: 'database-connections/query-data',
+      method: 'post',
+      params: {
+        conid,
+        database,
+      },
+      data: { sql: confirmSql },
+    });
+
+    setChangeSet(createChangeSet());
+    setConfirmSql(null);
+    display.reload();
+  }
+
   function handleGridKeyDown(event) {
     if (
       !event.ctrlKey &&
@@ -576,7 +592,7 @@ export default function DataGridCore(props) {
         onScroll={handleRowScroll}
         viewportRatio={visibleRowCountUpperBound / rowCountNewIncluded}
       />
-      <ConfirmSqlModal modalState={confirmSqlModalState} sql={confirmSql} engine={display.engine} />
+      <ConfirmSqlModal modalState={confirmSqlModalState} sql={confirmSql} engine={display.engine} onConfirm={handleConfirmSql} />
     </GridContainer>
   );
 }

packages/web/src/modals/ConfirmSqlModal.js

@@ -14,7 +14,7 @@ const SqlWrapper = styled.div`
   width: 40vw;
 `;
 
-export default function ConfirmSqlModal({ modalState, sql, engine }) {
+export default function ConfirmSqlModal({ modalState, sql, engine, onConfirm }) {
   return (
     <ModalBase modalState={modalState}>
       <h2>Save changes</h2>
@@ -23,7 +23,14 @@ export default function ConfirmSqlModal({ modalState, sql, engine }) {
       </SqlWrapper>
 
       <FormRow>
-        <input type="button" value="OK" onClick={modalState.close} />
+        <input
+          type="button"
+          value="OK"
+          onClick={() => {
+            modalState.close();
+            onConfirm();
+          }}
+        />
         <input type="button" value="Close" onClick={modalState.close} />
       </FormRow>
     </ModalBase>