form view - find by ID

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}>
-          <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>
+        <PrimaryKeyFilterEditor key={col.columnName} baseTable={baseTable} column={col} formDisplay={formDisplay} />
       ))}
       {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;
-    if (formDisplay.config.formViewKey) {
+    let newLoadedRow = false;
+    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');
     }
   };