diff --git a/packages/datalib/src/FormViewDisplay.ts b/packages/datalib/src/FormViewDisplay.ts index 84a229129..c8d68523c 100644 --- a/packages/datalib/src/FormViewDisplay.ts +++ b/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, + })); + } } diff --git a/packages/datalib/src/TableFormViewDisplay.ts b/packages/datalib/src/TableFormViewDisplay.ts index 8041973d2..99f8289d4 100644 --- a/packages/datalib/src/TableFormViewDisplay.ts +++ b/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) => ({ diff --git a/packages/web/src/formview/FormViewFilters.js b/packages/web/src/formview/FormViewFilters.js index 377eedd85..7ad5f429d 100644 --- a/packages/web/src/formview/FormViewFilters.js +++ b/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 ( + + +
+ + x.columnName == column.columnName)} /> +
+ {formDisplay.config.formViewKeyRequested && ( + + + + )} +
+ + + +
+ ); +} + 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 ( {baseTable.primaryKey.columns.map((col) => ( - - -
- - x.columnName == col.columnName)} /> -
-
- - - -
+ ))} {allFilterNames.map((columnName) => { const column = baseTable.columns.find((x) => x.columnName == columnName); diff --git a/packages/web/src/formview/SqlFormView.js b/packages/web/src/formview/SqlFormView.js index 19fdb7560..c9e2ea311 100644 --- a/packages/web/src/formview/SqlFormView.js +++ b/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'); } };