form view refactor - basically works

This commit is contained in:
Jan Prochazka
2023-01-22 16:26:48 +01:00
parent ba644a37b7
commit 6dd3945724
11 changed files with 636 additions and 600 deletions

View File

@@ -1,120 +1,120 @@
import _ from 'lodash';
import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc } from './GridConfig';
import type { TableInfo, EngineDriver, DatabaseInfo, SqlDialect } from 'dbgate-types';
import { getFilterValueExpression } from 'dbgate-filterparser';
import { ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay';
// import _ from 'lodash';
// import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc } from './GridConfig';
// import type { TableInfo, EngineDriver, DatabaseInfo, SqlDialect } from 'dbgate-types';
// import { getFilterValueExpression } from 'dbgate-filterparser';
// import { ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay';
export class FormViewDisplay {
isLoadedCorrectly = true;
columns: DisplayColumn[];
public baseTable: TableInfo;
dialect: SqlDialect;
// export class FormViewDisplay {
// isLoadedCorrectly = true;
// columns: DisplayColumn[];
// public baseTable: TableInfo;
// dialect: SqlDialect;
constructor(
public config: GridConfig,
protected setConfig: ChangeConfigFunc,
public cache: GridCache,
protected setCache: ChangeCacheFunc,
public driver?: EngineDriver,
public dbinfo: DatabaseInfo = null,
public serverVersion = null
) {
this.dialect = (driver?.dialectByVersion && driver?.dialectByVersion(serverVersion)) || driver?.dialect;
}
// constructor(
// public config: GridConfig,
// protected setConfig: ChangeConfigFunc,
// public cache: GridCache,
// protected setCache: ChangeCacheFunc,
// public driver?: EngineDriver,
// public dbinfo: DatabaseInfo = null,
// public serverVersion = null
// ) {
// this.dialect = (driver?.dialectByVersion && driver?.dialectByVersion(serverVersion)) || driver?.dialect;
// }
addFilterColumn(column) {
if (!column) return;
this.setConfig(cfg => ({
...cfg,
formFilterColumns: [...(cfg.formFilterColumns || []), column.uniqueName],
}));
}
// addFilterColumn(column) {
// if (!column) return;
// this.setConfig(cfg => ({
// ...cfg,
// formFilterColumns: [...(cfg.formFilterColumns || []), column.uniqueName],
// }));
// }
filterCellValue(column, rowData) {
if (!column || !rowData) return;
const value = rowData[column.uniqueName];
const expr = getFilterValueExpression(value, column.dataType);
if (expr) {
this.setConfig(cfg => ({
...cfg,
filters: {
...cfg.filters,
[column.uniqueName]: expr,
},
addedColumns: cfg.addedColumns.includes(column.uniqueName)
? cfg.addedColumns
: [...cfg.addedColumns, column.uniqueName],
}));
this.reload();
}
}
// filterCellValue(column, rowData) {
// if (!column || !rowData) return;
// const value = rowData[column.uniqueName];
// const expr = getFilterValueExpression(value, column.dataType);
// if (expr) {
// this.setConfig(cfg => ({
// ...cfg,
// filters: {
// ...cfg.filters,
// [column.uniqueName]: expr,
// },
// addedColumns: cfg.addedColumns.includes(column.uniqueName)
// ? cfg.addedColumns
// : [...cfg.addedColumns, column.uniqueName],
// }));
// this.reload();
// }
// }
setFilter(uniqueName, value) {
this.setConfig(cfg => ({
...cfg,
filters: {
...cfg.filters,
[uniqueName]: value,
},
}));
this.reload();
}
// setFilter(uniqueName, value) {
// this.setConfig(cfg => ({
// ...cfg,
// filters: {
// ...cfg.filters,
// [uniqueName]: value,
// },
// }));
// this.reload();
// }
removeFilter(uniqueName) {
const reloadRequired = !!this.config.filters[uniqueName];
this.setConfig(cfg => ({
...cfg,
formFilterColumns: (cfg.formFilterColumns || []).filter(x => x != uniqueName),
filters: _.omit(cfg.filters || [], uniqueName),
}));
if (reloadRequired) this.reload();
}
// removeFilter(uniqueName) {
// const reloadRequired = !!this.config.filters[uniqueName];
// this.setConfig(cfg => ({
// ...cfg,
// formFilterColumns: (cfg.formFilterColumns || []).filter(x => x != uniqueName),
// filters: _.omit(cfg.filters || [], uniqueName),
// }));
// if (reloadRequired) this.reload();
// }
reload() {
this.setCache(cache => ({
// ...cache,
...createGridCache(),
refreshTime: new Date().getTime(),
}));
}
// reload() {
// this.setCache(cache => ({
// // ...cache,
// ...createGridCache(),
// 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;
}
// 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;
// requestKeyValue(columnName, value) {
// if (this.getKeyValue(columnName) == value) return;
this.setConfig(cfg => ({
...cfg,
formViewKeyRequested: {
...cfg.formViewKey,
...cfg.formViewKeyRequested,
[columnName]: value,
},
}));
this.reload();
}
// 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;
}
// 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,
}));
}
}
// cancelRequestKey(rowData) {
// this.setConfig(cfg => ({
// ...cfg,
// formViewKeyRequested: null,
// formViewKey: rowData ? this.extractKey(rowData) : cfg.formViewKey,
// }));
// }
// }

View File

@@ -27,8 +27,9 @@ export interface GridConfig extends GridConfigColumns {
childConfig?: GridConfig;
reference?: GridReferenceDefinition;
isFormView?: boolean;
formViewKey?: { [uniqueName: string]: string };
formViewKeyRequested?: { [uniqueName: string]: string };
formViewRecordNumber?: number;
// formViewKey?: { [uniqueName: string]: string };
// formViewKeyRequested?: { [uniqueName: string]: string };
formFilterColumns: string[];
formColumnFilterText?: string;
}

View File

@@ -743,6 +743,36 @@ export abstract class GridDisplay {
isJsonView: true,
}));
}
formViewNavigate(command, allRowCount) {
switch (command) {
case 'begin':
this.setConfig(cfg => ({
...cfg,
formViewRecordNumber: 0,
}));
break;
case 'previous':
this.setConfig(cfg => ({
...cfg,
formViewRecordNumber: Math.max((cfg.formViewRecordNumber || 0) - 1, 0),
}));
break;
case 'next':
this.setConfig(cfg => ({
...cfg,
formViewRecordNumber: Math.max(Math.min((cfg.formViewRecordNumber || 0) + 1, allRowCount - 1), 0),
}));
break;
case 'end':
this.setConfig(cfg => ({
...cfg,
formViewRecordNumber: Math.max(allRowCount - 1, 0),
}));
break;
}
this.reload();
}
}
export function reloadDataCacheFunc(cache: GridCache): GridCache {

View File

@@ -1,272 +1,272 @@
import { FormViewDisplay } from './FormViewDisplay';
import _ from 'lodash';
import { ChangeCacheFunc, DisplayColumn, ChangeConfigFunc } from './GridDisplay';
import type { EngineDriver, NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
import { GridConfig, GridCache } from './GridConfig';
import { mergeConditions, Condition, OrderByExpression } from 'dbgate-sqltree';
import { TableGridDisplay } from './TableGridDisplay';
import stableStringify from 'json-stable-stringify';
import { ChangeSetFieldDefinition, ChangeSetRowDefinition } from './ChangeSet';
import { DictionaryDescriptionFunc } from '.';
// import { FormViewDisplay } from './FormViewDisplay';
// import _ from 'lodash';
// import { ChangeCacheFunc, DisplayColumn, ChangeConfigFunc } from './GridDisplay';
// import type { EngineDriver, NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
// import { GridConfig, GridCache } from './GridConfig';
// import { mergeConditions, Condition, OrderByExpression } from 'dbgate-sqltree';
// import { TableGridDisplay } from './TableGridDisplay';
// import stableStringify from 'json-stable-stringify';
// import { ChangeSetFieldDefinition, ChangeSetRowDefinition } from './ChangeSet';
// import { DictionaryDescriptionFunc } from '.';
export class TableFormViewDisplay extends FormViewDisplay {
// use utility functions from GridDisplay and publish result in FromViewDisplay interface
private gridDisplay: TableGridDisplay;
// export class TableFormViewDisplay extends FormViewDisplay {
// // use utility functions from GridDisplay and publish result in FromViewDisplay interface
// private gridDisplay: TableGridDisplay;
constructor(
public tableName: NamedObjectInfo,
driver: EngineDriver,
config: GridConfig,
setConfig: ChangeConfigFunc,
cache: GridCache,
setCache: ChangeCacheFunc,
dbinfo: DatabaseInfo,
displayOptions,
serverVersion,
getDictionaryDescription: DictionaryDescriptionFunc = null,
isReadOnly = false
) {
super(config, setConfig, cache, setCache, driver, dbinfo, serverVersion);
this.gridDisplay = new TableGridDisplay(
tableName,
driver,
config,
setConfig,
cache,
setCache,
dbinfo,
displayOptions,
serverVersion,
getDictionaryDescription,
isReadOnly
);
this.gridDisplay.addAllExpandedColumnsToSelected = true;
// constructor(
// public tableName: NamedObjectInfo,
// driver: EngineDriver,
// config: GridConfig,
// setConfig: ChangeConfigFunc,
// cache: GridCache,
// setCache: ChangeCacheFunc,
// dbinfo: DatabaseInfo,
// displayOptions,
// serverVersion,
// getDictionaryDescription: DictionaryDescriptionFunc = null,
// isReadOnly = false
// ) {
// super(config, setConfig, cache, setCache, driver, dbinfo, serverVersion);
// this.gridDisplay = new TableGridDisplay(
// tableName,
// driver,
// config,
// setConfig,
// cache,
// setCache,
// dbinfo,
// displayOptions,
// serverVersion,
// getDictionaryDescription,
// isReadOnly
// );
// this.gridDisplay.addAllExpandedColumnsToSelected = true;
this.isLoadedCorrectly = this.gridDisplay.isLoadedCorrectly && !!this.driver;
this.columns = [];
this.addDisplayColumns(this.gridDisplay.columns);
this.baseTable = this.gridDisplay.baseTable;
this.gridDisplay.hintBaseColumns = this.columns;
}
// this.isLoadedCorrectly = this.gridDisplay.isLoadedCorrectly && !!this.driver;
// this.columns = [];
// this.addDisplayColumns(this.gridDisplay.columns);
// this.baseTable = this.gridDisplay.baseTable;
// this.gridDisplay.hintBaseColumns = this.columns;
// }
addDisplayColumns(columns: DisplayColumn[]) {
for (const col of columns) {
this.columns.push(col);
if (this.gridDisplay.isExpandedColumn(col.uniqueName)) {
const table = this.gridDisplay.getFkTarget(col);
if (table) {
const subcolumns = this.gridDisplay.getDisplayColumns(table, col.uniquePath);
this.addDisplayColumns(subcolumns);
}
}
}
}
// addDisplayColumns(columns: DisplayColumn[]) {
// for (const col of columns) {
// this.columns.push(col);
// if (this.gridDisplay.isExpandedColumn(col.uniqueName)) {
// const table = this.gridDisplay.getFkTarget(col);
// if (table) {
// const subcolumns = this.gridDisplay.getDisplayColumns(table, col.uniquePath);
// this.addDisplayColumns(subcolumns);
// }
// }
// }
// }
getPrimaryKeyEqualCondition(row = null): Condition {
if (!row) row = this.config.formViewKeyRequested || this.config.formViewKey;
if (!row) return null;
const { primaryKey } = this.gridDisplay.baseTable;
if (!primaryKey) return null;
return {
conditionType: 'and',
conditions: primaryKey.columns.map(({ columnName }) => ({
conditionType: 'binary',
operator: '=',
left: {
exprType: 'column',
columnName,
source: {
alias: 'basetbl',
},
},
right: {
exprType: 'value',
value: row[columnName],
},
})),
};
}
// getPrimaryKeyEqualCondition(row = null): Condition {
// if (!row) row = this.config.formViewKeyRequested || this.config.formViewKey;
// if (!row) return null;
// const { primaryKey } = this.gridDisplay.baseTable;
// if (!primaryKey) return null;
// return {
// conditionType: 'and',
// conditions: primaryKey.columns.map(({ columnName }) => ({
// conditionType: 'binary',
// operator: '=',
// left: {
// exprType: 'column',
// columnName,
// source: {
// alias: 'basetbl',
// },
// },
// right: {
// exprType: 'value',
// value: row[columnName],
// },
// })),
// };
// }
getPrimaryKeyOperatorCondition(operator): Condition {
if (!this.config.formViewKey) return null;
const conditions = [];
// getPrimaryKeyOperatorCondition(operator): Condition {
// if (!this.config.formViewKey) return null;
// const conditions = [];
const { primaryKey } = this.gridDisplay.baseTable;
if (!primaryKey) return null;
for (let index = 0; index < primaryKey.columns.length; index++) {
conditions.push({
conditionType: 'and',
conditions: [
...primaryKey.columns.slice(0, index).map(({ columnName }) => ({
conditionType: 'binary',
operator: '=',
left: {
exprType: 'column',
columnName,
source: {
alias: 'basetbl',
},
},
right: {
exprType: 'value',
value: this.config.formViewKey[columnName],
},
})),
...primaryKey.columns.slice(index).map(({ columnName }) => ({
conditionType: 'binary',
operator: operator,
left: {
exprType: 'column',
columnName,
source: {
alias: 'basetbl',
},
},
right: {
exprType: 'value',
value: this.config.formViewKey[columnName],
},
})),
],
});
}
// const { primaryKey } = this.gridDisplay.baseTable;
// if (!primaryKey) return null;
// for (let index = 0; index < primaryKey.columns.length; index++) {
// conditions.push({
// conditionType: 'and',
// conditions: [
// ...primaryKey.columns.slice(0, index).map(({ columnName }) => ({
// conditionType: 'binary',
// operator: '=',
// left: {
// exprType: 'column',
// columnName,
// source: {
// alias: 'basetbl',
// },
// },
// right: {
// exprType: 'value',
// value: this.config.formViewKey[columnName],
// },
// })),
// ...primaryKey.columns.slice(index).map(({ columnName }) => ({
// conditionType: 'binary',
// operator: operator,
// left: {
// exprType: 'column',
// columnName,
// source: {
// alias: 'basetbl',
// },
// },
// right: {
// exprType: 'value',
// value: this.config.formViewKey[columnName],
// },
// })),
// ],
// });
// }
if (conditions.length == 1) {
return conditions[0];
}
// if (conditions.length == 1) {
// return conditions[0];
// }
return {
conditionType: 'or',
conditions,
};
}
// return {
// conditionType: 'or',
// conditions,
// };
// }
getSelect() {
if (!this.driver) return null;
const select = this.gridDisplay.createSelect();
if (!select) return null;
select.topRecords = 1;
return select;
}
// getSelect() {
// if (!this.driver) return null;
// const select = this.gridDisplay.createSelect();
// if (!select) return null;
// select.topRecords = 1;
// return select;
// }
getCurrentRowQuery() {
const select = this.getSelect();
if (!select) return null;
// getCurrentRowQuery() {
// const select = this.getSelect();
// if (!select) return null;
select.where = mergeConditions(select.where, this.getPrimaryKeyEqualCondition());
return select;
}
// select.where = mergeConditions(select.where, this.getPrimaryKeyEqualCondition());
// return select;
// }
getCountSelect() {
const select = this.getSelect();
if (!select) return null;
select.orderBy = null;
select.columns = [
{
exprType: 'raw',
sql: 'COUNT(*)',
alias: 'count',
},
];
select.topRecords = null;
return select;
}
// getCountSelect() {
// const select = this.getSelect();
// if (!select) return null;
// select.orderBy = null;
// select.columns = [
// {
// exprType: 'raw',
// sql: 'COUNT(*)',
// alias: 'count',
// },
// ];
// select.topRecords = null;
// return select;
// }
getCountQuery() {
if (!this.driver) return null;
const select = this.getCountSelect();
if (!select) return null;
return select;
}
// getCountQuery() {
// if (!this.driver) return null;
// const select = this.getCountSelect();
// if (!select) return null;
// return select;
// }
getBeforeCountQuery() {
if (!this.driver) return null;
const select = this.getCountSelect();
if (!select) return null;
select.where = mergeConditions(select.where, this.getPrimaryKeyOperatorCondition('<'));
return select;
}
// getBeforeCountQuery() {
// if (!this.driver) return null;
// const select = this.getCountSelect();
// if (!select) return null;
// select.where = mergeConditions(select.where, this.getPrimaryKeyOperatorCondition('<'));
// return select;
// }
navigate(row) {
const formViewKey = this.extractKey(row);
this.setConfig(cfg => ({
...cfg,
formViewKey,
}));
}
// navigate(row) {
// const formViewKey = this.extractKey(row);
// this.setConfig(cfg => ({
// ...cfg,
// formViewKey,
// }));
// }
isLoadedCurrentRow(row) {
if (!row) return false;
const formViewKey = this.extractKey(row);
return stableStringify(formViewKey) == stableStringify(this.config.formViewKey);
}
// isLoadedCurrentRow(row) {
// if (!row) return false;
// const formViewKey = this.extractKey(row);
// return stableStringify(formViewKey) == stableStringify(this.config.formViewKey);
// }
navigateRowQuery(commmand: 'begin' | 'previous' | 'next' | 'end') {
if (!this.driver) return null;
const select = this.gridDisplay.createSelect();
if (!select) return null;
const { primaryKey } = this.gridDisplay.baseTable;
// navigateRowQuery(commmand: 'begin' | 'previous' | 'next' | 'end') {
// if (!this.driver) return null;
// const select = this.gridDisplay.createSelect();
// if (!select) return null;
// const { primaryKey } = this.gridDisplay.baseTable;
function getOrderBy(direction): OrderByExpression[] {
return primaryKey.columns.map(({ columnName }) => ({
exprType: 'column',
columnName,
direction,
}));
}
// function getOrderBy(direction): OrderByExpression[] {
// return primaryKey.columns.map(({ columnName }) => ({
// exprType: 'column',
// columnName,
// direction,
// }));
// }
select.topRecords = 1;
switch (commmand) {
case 'begin':
select.orderBy = getOrderBy('ASC');
break;
case 'end':
select.orderBy = getOrderBy('DESC');
break;
case 'previous':
select.orderBy = getOrderBy('DESC');
select.where = mergeConditions(select.where, this.getPrimaryKeyOperatorCondition('<'));
break;
case 'next':
select.orderBy = getOrderBy('ASC');
select.where = mergeConditions(select.where, this.getPrimaryKeyOperatorCondition('>'));
break;
}
// select.topRecords = 1;
// switch (commmand) {
// case 'begin':
// select.orderBy = getOrderBy('ASC');
// break;
// case 'end':
// select.orderBy = getOrderBy('DESC');
// break;
// case 'previous':
// select.orderBy = getOrderBy('DESC');
// select.where = mergeConditions(select.where, this.getPrimaryKeyOperatorCondition('<'));
// break;
// case 'next':
// select.orderBy = getOrderBy('ASC');
// select.where = mergeConditions(select.where, this.getPrimaryKeyOperatorCondition('>'));
// break;
// }
return select;
}
// return select;
// }
getChangeSetRow(row): ChangeSetRowDefinition {
if (!this.baseTable) return null;
return {
pureName: this.baseTable.pureName,
schemaName: this.baseTable.schemaName,
condition: this.extractKey(row),
};
}
// getChangeSetRow(row): ChangeSetRowDefinition {
// if (!this.baseTable) return null;
// return {
// pureName: this.baseTable.pureName,
// schemaName: this.baseTable.schemaName,
// condition: this.extractKey(row),
// };
// }
getChangeSetField(row, uniqueName): ChangeSetFieldDefinition {
const col = this.columns.find(x => x.uniqueName == uniqueName);
if (!col) return null;
if (!this.baseTable) return null;
if (this.baseTable.pureName != col.pureName || this.baseTable.schemaName != col.schemaName) return null;
return {
...this.getChangeSetRow(row),
uniqueName: uniqueName,
columnName: col.columnName,
};
}
// getChangeSetField(row, uniqueName): ChangeSetFieldDefinition {
// const col = this.columns.find(x => x.uniqueName == uniqueName);
// if (!col) return null;
// if (!this.baseTable) return null;
// if (this.baseTable.pureName != col.pureName || this.baseTable.schemaName != col.schemaName) return null;
// return {
// ...this.getChangeSetRow(row),
// uniqueName: uniqueName,
// columnName: col.columnName,
// };
// }
toggleExpandedColumn(uniqueName: string, value?: boolean) {
this.gridDisplay.toggleExpandedColumn(uniqueName, value);
this.gridDisplay.reload();
}
// toggleExpandedColumn(uniqueName: string, value?: boolean) {
// this.gridDisplay.toggleExpandedColumn(uniqueName, value);
// this.gridDisplay.reload();
// }
isExpandedColumn(uniqueName: string) {
return this.gridDisplay.isExpandedColumn(uniqueName);
}
// isExpandedColumn(uniqueName: string) {
// return this.gridDisplay.isExpandedColumn(uniqueName);
// }
get editable() {
return this.gridDisplay.editable;
}
}
// get editable() {
// return this.gridDisplay.editable;
// }
// }

View File

@@ -10,8 +10,8 @@ export * from './FreeTableGridDisplay';
export * from './FreeTableModel';
export * from './MacroDefinition';
export * from './runMacro';
export * from './FormViewDisplay';
export * from './TableFormViewDisplay';
// export * from './FormViewDisplay';
// export * from './TableFormViewDisplay';
export * from './CollectionGridDisplay';
export * from './deleteCascade';
export * from './PerspectiveDisplay';