insert rows

packages/web/src/datagrid/DataGridCore.js

@@ -26,7 +26,13 @@ import DataGridRow from './DataGridRow';
 import { countColumnSizes, countVisibleRealColumns } from './gridutil';
 import useModalState from '../modals/useModalState';
 import ConfirmSqlModal from '../modals/ConfirmSqlModal';
-import { changeSetToSql, createChangeSet, revertChangeSetRowChanges } from '@dbgate/datalib';
+import {
+  changeSetToSql,
+  createChangeSet,
+  revertChangeSetRowChanges,
+  getChangeSetInsertedRows,
+  changeSetInsertNewRow,
+} from '@dbgate/datalib';
 import { scriptToSql } from '@dbgate/sqltree';
 import { sleep } from '../utility/common';
 
@@ -232,7 +238,11 @@ export default function DataGridCore(props) {
   };
 
   React.useEffect(() => {
-    if (!isLoadedAll && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= loadedRows.length) {
+    if (
+      !isLoadedAll &&
+      firstVisibleRowScrollIndex + visibleRowCountUpperBound >= loadedRows.length &&
+      insertedRows.length == 0
+    ) {
       const sql = display.getPageQuery(0, 1);
       // try to get SQL, if success, load page. If not, callbacks to load missing metadata are dispatched
       if (sql) loadNextData();
@@ -284,7 +294,8 @@ export default function DataGridCore(props) {
   );
 
   if (!loadedRows || !columns) return null;
-  const rowCountNewIncluded = loadedRows.length;
+  const insertedRows = getChangeSetInsertedRows(changeSet, display.baseTable);
+  const rowCountNewIncluded = loadedRows.length + insertedRows.length;
 
   const handleRowScroll = value => {
     setFirstVisibleRowScrollIndex(value);
@@ -401,6 +412,18 @@ export default function DataGridCore(props) {
       // this.saveAndFocus();
     }
 
+    if (event.keyCode == keycodes.insert) {
+      event.preventDefault();
+      if (display.baseTable) {
+        setChangeSet(changeSetInsertNewRow(changeSet, display.baseTable));
+        const cell = [rowCountNewIncluded, (currentCell && currentCell[1]) || 0];
+        // @ts-ignore
+        setCurrentCell(cell);
+        scrollIntoView(cell);
+      }
+      // this.saveAndFocus();
+    }
+
     if (inplaceEditorState.cell) return;
 
     if (
@@ -574,6 +597,8 @@ export default function DataGridCore(props) {
   //   columnSizes.getVisibleScrollSizeSum()
   // );
 
+  const loadedAndInsertedRows = [...loadedRows, ...insertedRows];
+
   return (
     <GridContainer ref={containerRef}>
       <Table
@@ -629,7 +654,7 @@ export default function DataGridCore(props) {
           </TableHeaderRow>
         </TableHead>
         <TableBody ref={tableBodyRef}>
-          {loadedRows
+          {loadedAndInsertedRows
             .slice(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound)
             .map((row, index) => (
               <DataGridRow
@@ -640,6 +665,11 @@ export default function DataGridCore(props) {
                 inplaceEditorState={inplaceEditorState}
                 dispatchInsplaceEditor={dispatchInsplaceEditor}
                 cellIsSelected={cellIsSelected}
+                insertedRowIndex={
+                  firstVisibleRowScrollIndex + index >= loadedRows.length
+                    ? firstVisibleRowScrollIndex + index - loadedRows.length
+                    : null
+                }
                 changeSet={changeSet}
                 setChangeSet={setChangeSet}
                 display={display}

packages/web/src/datagrid/DataGridRow.js

@@ -31,15 +31,24 @@ const TableBodyCell = styled.td`
     color: white;`}
   ${props =>
     props.isModifiedRow &&
+    !props.isInsertedRow &&
     !props.isSelected &&
     !props.isModifiedCell &&
     `
     background-color: #FFFFDB;`}
     ${props =>
       !props.isSelected &&
+      !props.isInsertedRow &&
       props.isModifiedCell &&
       `
         background-color: bisque;`}
+
+    ${props =>
+      !props.isSelected &&
+      props.isInsertedRow &&
+      `
+        background-color: #DBFFDB;`}
+    
     `;
 const HintSpan = styled.span`
   color: gray;
@@ -86,6 +95,7 @@ export default function DataGridRow({
   display,
   changeSet,
   setChangeSet,
+  insertedRowIndex,
 }) {
   // console.log('RENDER ROW', rowIndex);
   const rowDefinition = display.getChangeSetRow(row);
@@ -110,8 +120,11 @@ export default function DataGridRow({
           isSelected={cellIsSelected(rowIndex, col.colIndex)}
           isModifiedRow={!!matchedChangeSetItem}
           isModifiedCell={matchedChangeSetItem && col.uniqueName in matchedChangeSetItem.fields}
+          isInsertedRow={insertedRowIndex != null}
         >
-          {inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1] ? (
+          {inplaceEditorState.cell &&
+          rowIndex == inplaceEditorState.cell[0] &&
+          col.colIndex == inplaceEditorState.cell[1] ? (
             <InplaceEditor
               widthPx={col.widthPx}
               inplaceEditorState={inplaceEditorState}
@@ -119,8 +132,9 @@ export default function DataGridRow({
               cellValue={rowUpdated[col.uniqueName]}
               changeSet={changeSet}
               setChangeSet={setChangeSet}
-              definition={display.getChangeSetField(row, col.uniqueName)}
-          />
+              insertedRowIndex={insertedRowIndex}
+              definition={display.getChangeSetField(row, col.uniqueName, insertedRowIndex)}
+            />
           ) : (
             <>
               <CellFormattedValue value={rowUpdated[col.uniqueName]} />

packages/web/src/datagrid/InplaceEditor.js

@@ -22,6 +22,7 @@ export default function InplaceEditor({
   cellValue,
   inplaceEditorState,
   dispatchInsplaceEditor,
+  isInsertedRow,
 }) {
   const editorRef = React.useRef();
   const isChangedRef = React.useRef(!!inplaceEditorState.text);