inline editing

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]} />
-                    {col.hintColumnName && <HintSpan>{row[col.hintColumnName]}</HintSpan>}
+                    {inplaceEditorCell &&
+                    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}
     />
   );
 }