mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

form view - find by ID

Browse Source
This commit is contained in:
Jan Prochazka 2021-01-14 19:36:03 +01:00
parent ad4fa77e46
commit 4328107a1d
4 changed files with 103 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/datalib/src/FormViewDisplay.ts
View File

@ -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,
}));
}
}

15
packages/datalib/src/TableFormViewDisplay.ts
View File

@ -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) => ({

67
packages/web/src/formview/FormViewFilters.js
View File

@ -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);

11
packages/web/src/formview/SqlFormView.js
View File

@ -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');
}
};