form view - find by ID

packages/datalib/src/FormViewDisplay.ts

@@ -73,4 +73,44 @@ export class FormViewDisplay {
       refreshTime: new Date().getTime(),
     }));
   }
+
+  getKeyValue(columnName) {
+    const { formViewKey, formViewKeyRequested } = this.config;
+    if (formViewKeyRequested && formViewKeyRequested[columnName]) return formViewKeyRequested[columnName];
+    if (formViewKey && formViewKey[columnName]) return formViewKey[columnName];
+    return null;
+  }
+
+  requestKeyValue(columnName, value) {
+    if (this.getKeyValue(columnName) == value) return;
+
+    this.setConfig((cfg) => ({
+      ...cfg,
+      formViewKeyRequested: {
+        ...cfg.formViewKey,
+        ...cfg.formViewKeyRequested,
+        [columnName]: value,
+      },
+    }));
+    this.reload();
+  }
+
+  extractKey(row) {
+    if (!row || !this.baseTable || !this.baseTable.primaryKey) {
+      return null;
+    }
+    const formViewKey = _.pick(
+      row,
+      this.baseTable.primaryKey.columns.map((x) => x.columnName)
+    );
+    return formViewKey;
+  }
+
+  cancelRequestKey(rowData) {
+    this.setConfig((cfg) => ({
+      ...cfg,
+      formViewKeyRequested: null,
+      formViewKey: rowData ? this.extractKey(rowData) : cfg.formViewKey,
+    }));
+  }
 }

packages/datalib/src/TableFormViewDisplay.ts

@@ -39,7 +39,7 @@ export class TableFormViewDisplay extends FormViewDisplay {
   }
 
   getPrimaryKeyEqualCondition(row = null): Condition {
-    if (!row) row = this.config.formViewKey;
+    if (!row) row = this.config.formViewKeyRequested || this.config.formViewKey;
     if (!row) return null;
     const { primaryKey } = this.gridDisplay.baseTable;
     if (!primaryKey) return null;
@@ -57,7 +57,7 @@ export class TableFormViewDisplay extends FormViewDisplay {
         },
         right: {
           exprType: 'value',
-          value: this.config.formViewKey[columnName],
+          value: row[columnName],
         },
       })),
     };
@@ -166,17 +166,6 @@ export class TableFormViewDisplay extends FormViewDisplay {
     return sql;
   }
 
-  extractKey(row) {
-    if (!row || !this.gridDisplay.baseTable || !this.gridDisplay.baseTable.primaryKey) {
-      return null;
-    }
-    const formViewKey = _.pick(
-      row,
-      this.gridDisplay.baseTable.primaryKey.columns.map((x) => x.columnName)
-    );
-    return formViewKey;
-  }
-
   navigate(row) {
     const formViewKey = this.extractKey(row);
     this.setConfig((cfg) => ({

packages/web/src/formview/FormViewFilters.js

@@ -8,6 +8,7 @@ import { getFilterType } from 'dbgate-filterparser';
 import DataFilterControl from '../datagrid/DataFilterControl';
 import InlineButton from '../widgets/InlineButton';
 import { FontIcon } from '../icons';
+import keycodes from '../utility/keycodes';
 
 const ColumnWrapper = styled.div`
   margin: 5px;
@@ -24,29 +25,69 @@ const StyledTextField = styled(TextField)`
   flex: 1;
 `;
 
+function PrimaryKeyFilterEditor({ column, baseTable, formDisplay }) {
+  const value = formDisplay.getKeyValue(column.columnName);
+  const editorRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.value = value;
+    }
+  }, [value, editorRef.current]);
+
+  const applyFilter = () => {
+    formDisplay.requestKeyValue(column.columnName, editorRef.current.value);
+  };
+
+  const cancelFilter = () => {
+    formDisplay.cancelRequestKey();
+    formDisplay.reload();
+  };
+
+  const handleKeyDown = (ev) => {
+    if (ev.keyCode == keycodes.enter) {
+      applyFilter();
+    }
+    if (ev.keyCode == keycodes.escape) {
+      cancelFilter();
+    }
+  };
+
+  return (
+    <ColumnWrapper>
+      <ColumnNameWrapper>
+        <div>
+          <FontIcon icon="img primary-key" />
+          <ColumnLabel {...baseTable.columns.find((x) => x.columnName == column.columnName)} />
+        </div>
+        {formDisplay.config.formViewKeyRequested && (
+          <InlineButton
+            square
+            onClick={cancelFilter}
+          >
+            <FontIcon icon="icon delete" />
+          </InlineButton>
+        )}
+      </ColumnNameWrapper>
+      <TextFieldWrapper>
+        <StyledTextField editorRef={editorRef} onBlur={applyFilter} onKeyDown={handleKeyDown} />
+      </TextFieldWrapper>
+    </ColumnWrapper>
+  );
+}
+
 export default function FormViewFilters(props) {
   const { formDisplay } = props;
   if (!formDisplay || !formDisplay.baseTable || !formDisplay.baseTable.primaryKey) return null;
   const { baseTable } = formDisplay;
-  const { formViewKey, formFilterColumns, filters } = formDisplay.config || {};
+  const { formFilterColumns, filters } = formDisplay.config || {};
 
   const allFilterNames = _.union(_.keys(filters || {}), formFilterColumns || []);
-  console.log('filters', filters);
 
   return (
     <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
       {baseTable.primaryKey.columns.map((col) => (
-        <ColumnWrapper key={col.columnName}>
+        <PrimaryKeyFilterEditor key={col.columnName} baseTable={baseTable} column={col} formDisplay={formDisplay} />
-          <ColumnNameWrapper>
-            <div>
-              <FontIcon icon="img primary-key" />
-              <ColumnLabel {...baseTable.columns.find((x) => x.columnName == col.columnName)} />
-            </div>
-          </ColumnNameWrapper>
-          <TextFieldWrapper>
-            <StyledTextField value={formViewKey && formViewKey[col.columnName]} />
-          </TextFieldWrapper>
-        </ColumnWrapper>
       ))}
       {allFilterNames.map((columnName) => {
         const column = baseTable.columns.find((x) => x.columnName == columnName);

packages/web/src/formview/SqlFormView.js

@@ -82,8 +82,8 @@ export default function SqlFormView(props) {
 
   const handleLoadCurrentRow = async () => {
     if (isLoadingData) return;
-    let isLoadedRow = false;
+    let newLoadedRow = false;
-    if (formDisplay.config.formViewKey) {
+    if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {
       setLoadProps((oldLoadProps) => ({
         ...oldLoadProps,
         isLoadingData: true,
@@ -96,9 +96,12 @@ export default function SqlFormView(props) {
         rowData: row,
         loadedTime: new Date().getTime(),
       }));
-      isLoadedRow = !!row;
+      newLoadedRow = row;
     }
-    if (!isLoadedRow) {
+    if (formDisplay.config.formViewKeyRequested && newLoadedRow) {
+      formDisplay.cancelRequestKey(newLoadedRow);
+    }
+    if (!newLoadedRow && !formDisplay.config.formViewKeyRequested) {
       await handleNavigate('first');
     }
   };