generate update script

packages/web/src/appobj/columnAppObject.js

@@ -1,11 +1,4 @@
-import React from 'react';
 import { ColumnIcon, SequenceIcon } from '../icons';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import showModal from '../modals/showModal';
-import ConnectionModal from '../modals/ConnectionModal';
-import axios from '../utility/axios';
-import { openNewTab } from '../utility/common';
-import { useSetOpenedTabs } from '../utility/globalState';
 
 /** @param columnProps {import('@dbgate/types').ColumnInfo} */
 function getColumnIcon(columnProps) {

packages/web/src/appobj/constraintAppObject.js

@@ -1,11 +1,4 @@
-import React from 'react';
 import { PrimaryKeyIcon, ForeignKeyIcon } from '../icons';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import showModal from '../modals/showModal';
-import ConnectionModal from '../modals/ConnectionModal';
-import axios from '../utility/axios';
-import { openNewTab } from '../utility/common';
-import { useSetOpenedTabs } from '../utility/globalState';
 
 /** @param props {import('@dbgate/types').ConstraintInfo} */
 function getConstraintIcon(props) {

packages/web/src/appobj/tableAppObject.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import { TableIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import showModal from '../modals/showModal';
-import ConnectionModal from '../modals/ConnectionModal';
-import axios from '../utility/axios';
 import { openNewTab } from '../utility/common';
-import { useSetOpenedTabs } from '../utility/globalState';
 import getConnectionInfo from '../utility/getConnectionInfo';
 import fullDisplayName from '../utility/fullDisplayName';
 

packages/web/src/datagrid/DataGridCore.js

@@ -24,6 +24,10 @@ import keycodes from '../utility/keycodes';
 import InplaceEditor from './InplaceEditor';
 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 { scriptToSql } from '@dbgate/sqltree';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -162,6 +166,8 @@ export default function DataGridCore(props) {
   const [tableBodyRef] = useDimensions();
   const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
   const [tableRef, { height: tableHeight, width: tableWidth }, tableElement] = useDimensions();
+  const confirmSqlModalState = useModalState();
+  const [confirmSql, setConfirmSql] = React.useState('');
 
   const columnSizes = React.useMemo(() => countColumnSizes(loadedRows, columns, containerWidth, display), [
     loadedRows,
@@ -221,18 +227,20 @@ export default function DataGridCore(props) {
     [columnSizes, firstVisibleColumnScrollIndex, gridScrollAreaWidth, columns]
   );
 
-  const cellIsSelected = React.useCallback((row, col) => {
-    const [currentRow, currentCol] = currentCell;
-    if (row == currentRow && col == currentCol) return true;
-    for (const [selectedRow, selectedCol] of selectedCells) {
-      if (row == selectedRow && col == selectedCol) return true;
-      if (selectedRow == 'header' && col == selectedCol) return true;
-      if (row == selectedRow && selectedCol == 'header') return true;
-      if (selectedRow == 'header' && selectedCol == 'header') return true;
-    }
-    return false;
-  }, [currentCell, selectedCells]);
-
+  const cellIsSelected = React.useCallback(
+    (row, col) => {
+      const [currentRow, currentCol] = currentCell;
+      if (row == currentRow && col == currentCol) return true;
+      for (const [selectedRow, selectedCol] of selectedCells) {
+        if (row == selectedRow && col == selectedCol) return true;
+        if (selectedRow == 'header' && col == selectedCol) return true;
+        if (row == selectedRow && selectedCol == 'header') return true;
+        if (selectedRow == 'header' && selectedCol == 'header') return true;
+      }
+      return false;
+    },
+    [currentCell, selectedCells]
+  );
 
   if (!loadedRows || !columns) return null;
   const rowCountNewIncluded = loadedRows.length;
@@ -297,6 +305,13 @@ export default function DataGridCore(props) {
     setvScrollValueToSetDate(new Date());
   }
 
+  function handleSave() {
+    const script = changeSetToSql(changeSet);
+    const sql = scriptToSql(display.driver, script);
+    setConfirmSql(sql);
+    confirmSqlModalState.open();
+  }
+
   function handleGridKeyDown(event) {
     if (
       !event.ctrlKey &&
@@ -310,6 +325,12 @@ export default function DataGridCore(props) {
       // console.log('event', event.nativeEvent);
     }
 
+    if (event.keyCode == keycodes.s && event.ctrlKey) {
+      event.preventDefault();
+      handleSave();
+      // this.saveAndFocus();
+    }
+
     const moved = handleCursorMove(event);
 
     if (moved) {
@@ -555,6 +576,7 @@ export default function DataGridCore(props) {
         onScroll={handleRowScroll}
         viewportRatio={visibleRowCountUpperBound / rowCountNewIncluded}
       />
+      <ConfirmSqlModal modalState={confirmSqlModalState} sql={confirmSql} engine={display.engine} />
     </GridContainer>
   );
 }

packages/web/src/modals/ConfirmSqlModal.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import axios from '../utility/axios';
+import ModalBase from './ModalBase';
+import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import { TextField } from '../utility/inputs';
+import { Formik, Form } from 'formik';
+import SqlEditor from '../sqleditor/SqlEditor';
+// import FormikForm from '../utility/FormikForm';
+import styled from 'styled-components';
+
+const SqlWrapper = styled.div`
+  position: relative;
+  height: 30vh;
+  width: 40vw;
+`;
+
+export default function ConfirmSqlModal({ modalState, sql, engine }) {
+  return (
+    <ModalBase modalState={modalState}>
+      <h2>Save changes</h2>
+      <SqlWrapper>
+        <SqlEditor value={sql} engine={engine} />
+      </SqlWrapper>
+
+      <FormRow>
+        <input type="button" value="OK" onClick={modalState.close} />
+        <input type="button" value="Close" onClick={modalState.close} />
+      </FormRow>
+    </ModalBase>
+  );
+}