inline editing

packages/datalib/src/ChangeSet.ts

@@ -0,0 +1,99 @@
+import _ from 'lodash';
+
+export interface ChangeSetItem {
+  pureName: string;
+  schemaName: string;
+  insertedRowIndex?: number;
+  condition?: { [column: string]: string };
+  fields?: { [column: string]: string };
+}
+
+export interface ChangeSet {
+  inserts: ChangeSetItem[];
+  updates: ChangeSetItem[];
+  deletes: ChangeSetItem[];
+}
+
+export function createChangeSet(): ChangeSet {
+  return {
+    inserts: [],
+    updates: [],
+    deletes: [],
+  };
+}
+
+export interface ChangeSetFieldDefinition {
+  pureName: string;
+  schemaName: string;
+  uniqueName: string;
+  columnName: string;
+  insertedRowIndex?: number;
+  condition?: { [column: string]: string };
+}
+
+function findExistingChangeSetItem(
+  changeSet: ChangeSet,
+  definition: ChangeSetFieldDefinition
+): [keyof ChangeSet, ChangeSetItem] {
+  if (definition.insertedRowIndex != null) {
+    return [
+      'inserts',
+      changeSet.inserts.find(
+        x =>
+          x.pureName == definition.pureName &&
+          x.schemaName == definition.schemaName &&
+          x.insertedRowIndex == definition.insertedRowIndex
+      ),
+    ];
+  } else {
+    return [
+      'updates',
+      changeSet.updates.find(
+        x =>
+          x.pureName == definition.pureName &&
+          x.schemaName == definition.schemaName &&
+          _.isEqual(x.condition, definition.condition)
+      ),
+    ];
+  }
+}
+
+export function setChangeSetValue(
+  changeSet: ChangeSet,
+  definition: ChangeSetFieldDefinition,
+  value: string
+): ChangeSet {
+  const [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
+  if (existingItem) {
+    return {
+      ...changeSet,
+      [fieldName]: changeSet[fieldName].map(item =>
+        item == existingItem
+          ? {
+              ...item,
+              fields: {
+                ...item.fields,
+                [definition.uniqueName]: value,
+              },
+            }
+          : item
+      ),
+    };
+  }
+
+  return {
+    ...changeSet,
+    [fieldName]: [
+      ...changeSet[fieldName],
+      {
+        pureName: definition.pureName,
+        schemaName: definition.schemaName,
+        condition: definition.condition,
+        insertedRowIndex: definition.insertedRowIndex,
+        fields: {
+          [definition.uniqueName]: value,
+        },
+      },
+    ],
+  };
+}

packages/datalib/src/GridDisplay.ts

@@ -4,6 +4,7 @@ import { ForeignKeyInfo, TableInfo, ColumnInfo, DbType } from '@dbgate/types';
 import { parseFilter, getFilterType } from '@dbgate/filterparser';
 import { filterName } from './filterName';
 import { Select, Expression } from '@dbgate/sqltree';
+import { ChangeSetFieldDefinition } from './ChangeSet';
 
 export interface DisplayColumn {
   schemaName: string;
@@ -47,6 +48,8 @@ export abstract class GridDisplay {
   ) {}
   abstract getPageQuery(offset: number, count: number): string;
   columns: DisplayColumn[];
+  baseTable?: TableInfo;
+  changeSetKeyFields: string[] = null;
   setColumnVisibility(uniquePath: string[], isVisible: boolean) {
     const uniqueName = uniquePath.join('.');
     if (uniquePath.length == 1) {
@@ -350,4 +353,23 @@ export abstract class GridDisplay {
     });
     this.reload();
   }
+
+  getChangeSetCondition(row) {
+    if (!this.changeSetKeyFields) return null;
+    return _.pick(row, this.changeSetKeyFields);
+  }
+
+  getChangeSetField(row, uniqueName): ChangeSetFieldDefinition {
+    const col = this.columns.find(x => x.uniqueName == uniqueName);
+    if (!col) return null;
+    if (!this.baseTable) return null;
+    if (this.baseTable.pureName != col.pureName || this.baseTable.schemaName != col.schemaName) return null;
+    return {
+      pureName: col.pureName,
+      schemaName: col.schemaName,
+      uniqueName: uniqueName,
+      columnName: col.columnName,
+      condition: this.getChangeSetCondition(row),
+    };
+  }
 }

packages/datalib/src/TableGridDisplay.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import _ from 'lodash';
 import { GridDisplay, combineReferenceActions } from './GridDisplay';
 import { Select, treeToSql, dumpSqlSelect } from '@dbgate/sqltree';
 import { TableInfo, EngineDriver } from '@dbgate/types';
@@ -16,6 +16,10 @@ export class TableGridDisplay extends GridDisplay {
   ) {
     super(config, setConfig, cache, setCache, getTableInfo);
     this.columns = this.getDisplayColumns(table, []);
+    this.baseTable = table;
+    this.changeSetKeyFields = table.primaryKey
+      ? table.primaryKey.columns.map(x => x.columnName)
+      : table.columns.map(x => x.columnName);
   }
 
   createSelect() {

packages/datalib/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./GridDisplay";
 export * from "./GridConfig";
 export * from "./TableGridDisplay";
+export * from "./ChangeSet";
 export * from "./filterName";

packages/web/src/datagrid/ColumnManager.js

@@ -21,12 +21,15 @@ const SearchBoxWrapper = styled.div`
 `;
 
 const Button = styled.button`
-  width: 50px;
+// -webkit-appearance: none;
+// -moz-appearance: none;
+// appearance: none;
+  // width: 50px;
 `;
 
 const Input = styled.input`
   flex: 1;
-  width: 80px;
+  min-width: 90px;
 `;
 
 function ExpandIcon({ display, column, isHover, ...other }) {

packages/web/src/datagrid/DataFilterControl.js

@@ -34,7 +34,7 @@ const FilterDiv = styled.div`
 `;
 const FilterInput = styled.input`
   flex: 1;
-  width: 10px;
+  min-width: 10px;
   background-color: ${props => (props.state == 'ok' ? '#CCFFCC' : props.state == 'error' ? '#FFCCCC' : 'white')};
 `;
 const FilterButton = styled.button`

packages/web/src/datagrid/DataGridCore.js

@@ -21,6 +21,7 @@ import {
   emptyCellArray,
 } from './selection';
 import keycodes from '../utility/keycodes';
+import InplaceEditor from './InplaceEditor';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -101,7 +102,6 @@ const NullSpan = styled.span`
   color: gray;
   font-style: italic;
 `;
-
 const wheelRowCount = 5;
 
 function CellFormattedValue({ value }) {
@@ -112,7 +112,7 @@ function CellFormattedValue({ value }) {
 
 /** @param props {import('./types').DataGridProps} */
 export default function DataGridCore(props) {
-  const { conid, database, display, tabVisible } = props;
+  const { conid, database, display, changeSet, tabVisible } = props;
   const columns = display.getGridColumns();
 
   // console.log(`GRID, conid=${conid}, database=${database}, sql=${sql}`);
@@ -137,6 +137,8 @@ export default function DataGridCore(props) {
   const [dragStartCell, setDragStartCell] = React.useState(nullCell);
   const [shiftDragStartCell, setShiftDragStartCell] = React.useState(nullCell);
 
+  const [inplaceEditorCell, setInplaceEditorCell] = React.useState(nullCell);
+
   const loadNextData = async () => {
     if (isLoading) return;
     setLoadProps({
@@ -323,7 +325,12 @@ export default function DataGridCore(props) {
     setCurrentCell(cell);
     setSelectedCells(getCellRange(cell, cell));
     setDragStartCell(cell);
-    // console.log('START', cell);
+
+    if (isRegularCell(cell) && !_.isEqual(cell, inplaceEditorCell) && _.isEqual(cell, currentCell)) {
+      setInplaceEditorCell(cell);
+    } else if (!_.isEqual(cell, inplaceEditorCell)) {
+      setInplaceEditorCell(null);
+    }
   }
 
   function handleGridMouseMove(event) {
@@ -641,8 +648,22 @@ export default function DataGridCore(props) {
                     // @ts-ignore
                     isSelected={cellIsSelected(firstVisibleRowScrollIndex + index, col.colIndex)}
                   >
-                    <CellFormattedValue value={row[col.uniqueName]} />
+                    {inplaceEditorCell &&
-                    {col.hintColumnName && <HintSpan>{row[col.hintColumnName]}</HintSpan>}
+                    firstVisibleRowScrollIndex + index == inplaceEditorCell[0] &&
+                    col.colIndex == inplaceEditorCell[1] ? (
+                      <InplaceEditor
+                        widthPx={col.widthPx}
+                        value={row[col.uniqueName]}
+                        changeSet={changeSet}
+                        setChangeSet={props.setChangeSet}
+                        definition={display.getChangeSetField(row, col.uniqueName)}
+                      />
+                    ) : (
+                      <>
+                        <CellFormattedValue value={row[col.uniqueName]} />
+                        {col.hintColumnName && <HintSpan>{row[col.hintColumnName]}</HintSpan>}
+                      </>
+                    )}
                   </TableBodyCell>
                 ))}
               </TableBodyRow>

packages/web/src/datagrid/InplaceEditor.js

@@ -0,0 +1,39 @@
+import _ from 'lodash';
+import React from 'react';
+import styled from 'styled-components';
+import theme from '../theme';
+import keycodes from '../utility/keycodes';
+import { setChangeSetValue } from '@dbgate/datalib';
+
+const StyledInput = styled.input`
+  border: 0px solid;
+  outline: none;
+  margin: 0px;
+  padding: 0px;
+`;
+
+export default function InplaceEditor({ widthPx, value, definition, changeSet, setChangeSet }) {
+  const editorRef = React.useRef();
+  React.useEffect(() => {
+    const editor = editorRef.current;
+    editor.value = value;
+    editor.focus();
+    editor.select();
+  }, []);
+  function handleBlur() {
+    const editor = editorRef.current;
+    setChangeSet(setChangeSetValue(changeSet, definition, editor.value));
+  }
+  return (
+    <StyledInput
+      onBlur={handleBlur}
+      ref={editorRef}
+      type="text"
+      style={{
+        width: widthPx,
+        minWidth: widthPx,
+        maxWidth: widthPx,
+      }}
+    />
+  );
+}

packages/web/src/datagrid/selection.ts

@@ -67,3 +67,4 @@ export function cellFromEvent(event): CellAddress {
   const row = cell.getAttribute('data-row');
   return convertCellAddress(row, col);
 }
+

packages/web/src/datagrid/types.ts

@@ -1,8 +1,10 @@
-import { GridDisplay } from '@dbgate/datalib';
+import { GridDisplay, ChangeSet } from '@dbgate/datalib';
 
 export interface DataGridProps {
   conid: number;
   database: string;
   display: GridDisplay;
   tabVisible?: boolean;
+  changeSet?: ChangeSet;
+  setChangeSet?: Function;
 }

packages/web/src/tabs/TableDataTab.js

@@ -3,7 +3,7 @@ import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
 import theme from '../theme';
 import DataGrid from '../datagrid/DataGrid';
-import { TableGridDisplay, createGridConfig, createGridCache } from '@dbgate/datalib';
+import { TableGridDisplay, createGridConfig, createGridCache, createChangeSet } from '@dbgate/datalib';
 import useTableInfo from '../utility/useTableInfo';
 import useConnectionInfo from '../utility/useConnectionInfo';
 import engines from '@dbgate/engines';
@@ -13,6 +13,10 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
   const [config, setConfig] = React.useState(createGridConfig());
   const [cache, setCache] = React.useState(createGridCache());
+  const [changeSet, setChangeSet] = React.useState(createChangeSet());
+
+  console.log('changeSet', changeSet);
+
   const connection = useConnectionInfo(conid);
   if (!tableInfo || !connection) return null;
   const display = new TableGridDisplay(tableInfo, engines(connection), config, setConfig, cache, setCache, name =>
@@ -25,6 +29,8 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
       database={database}
       display={display}
       tabVisible={tabVisible}
+      changeSet={changeSet}
+      setChangeSet={setChangeSet}
     />
   );
 }