dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-28 00:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

form view refactor - basically works

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

216
packages/datalib/src/FormViewDisplay.ts
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,
// }));
// }
// }

5
packages/datalib/src/GridConfig.ts
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;
}

30
packages/datalib/src/GridDisplay.ts
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 {

492
packages/datalib/src/TableFormViewDisplay.ts
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;
// }
// }

4
packages/datalib/src/index.ts
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';

10
packages/web/src/datagrid/DataGrid.svelte
View File

@@ -76,7 +76,7 @@
export let gridCoreComponent;
export let formViewComponent = null;
export let jsonViewComponent = null;
export let formDisplay;
// export let formDisplay;
export let display;
export let changeSetState;
export let dispatchChangeSet;
@@ -107,7 +107,7 @@
const collapsedLeftColumnStore =
getContext('collapsedLeftColumnStore') || writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
$: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
$: isFormView = !!config?.isFormView;
$: isJsonView = !!config?.isJsonView;
const handleExecuteMacro = () => {
@@ -116,7 +116,7 @@
};
export function switchViewEnabled(view) {
if (view == 'form') return !!formViewComponent && !!formDisplay && !isFormView && display?.baseTable?.primaryKey;
if (view == 'form') return !!formViewComponent && !isFormView;
if (view == 'table') return !!(isFormView || isJsonView);
if (view == 'json') return !!jsonViewComponent && !isJsonView;
}
@@ -205,7 +205,7 @@
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Filters" name="filters" height="30%" show={isFormView}>
<FormViewFilters {...$$props} {managerSize} driver={formDisplay?.driver} />
<FormViewFilters {...$$props} {managerSize} driver={display?.driver} />
</WidgetColumnBarItem>
<WidgetColumnBarItem
@@ -235,7 +235,7 @@
this={gridCoreComponent}
{...$$props}
{collapsedLeftColumnStore}
formViewAvailable={!!formViewComponent && !!formDisplay}
formViewAvailable={!!formViewComponent}
macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
macroPreview={$selectedMacro}
bind:loadedRows

35
packages/web/src/datagrid/TableDataGrid.svelte
View File

@@ -3,7 +3,7 @@
createGridCache,
createGridConfig,
runMacroOnChangeSet,
TableFormViewDisplay,
// TableFormViewDisplay,
TableGridDisplay,
} from 'dbgate-datalib';
import { getFilterValueExpression } from 'dbgate-filterparser';
@@ -75,22 +75,22 @@
)
: null;
$: formDisplay =
connection && $serverVersion
? new TableFormViewDisplay(
{ schemaName, pureName },
findEngineDriver($connection, $extensions),
config,
setConfig,
cache,
setCache,
extendedDbInfo,
{ showHintColumns: getBoolSettingsValue('dataGrid.showHintColumns', true) },
$serverVersion,
table => getDictionaryDescription(table, conid, database, $apps, $connections),
$connection?.isReadOnly
)
: null;
// $: formDisplay =
// connection && $serverVersion
// ? new TableFormViewDisplay(
// { schemaName, pureName },
// findEngineDriver($connection, $extensions),
// config,
// setConfig,
// cache,
// setCache,
// extendedDbInfo,
// { showHintColumns: getBoolSettingsValue('dataGrid.showHintColumns', true) },
// $serverVersion,
// table => getDictionaryDescription(table, conid, database, $apps, $connections),
// $connection?.isReadOnly
// )
// : null;
const setChildConfig = (value, reference = undefined) => {
if (_.isFunction(value)) {
@@ -157,7 +157,6 @@
gridCoreComponent={SqlDataGridCore}
formViewComponent={SqlFormView}
{display}
{formDisplay}
showReferences
showMacros
onRunMacro={handleRunMacro}

178
packages/web/src/formview/ChangeSetFormer.ts
View File

@@ -1,96 +1,96 @@
import type { ChangeSet, ChangeSetRowDefinition } from 'dbgate-datalib';
import {
changeSetContainsChanges,
changeSetInsertNewRow,
createChangeSet,
deleteChangeSetRows,
findExistingChangeSetItem,
getChangeSetInsertedRows,
TableFormViewDisplay,
revertChangeSetRowChanges,
setChangeSetValue,
} from 'dbgate-datalib';
import Former from './Former';
// import type { ChangeSet, ChangeSetRowDefinition } from 'dbgate-datalib';
// import {
// changeSetContainsChanges,
// changeSetInsertNewRow,
// createChangeSet,
// deleteChangeSetRows,
// findExistingChangeSetItem,
// getChangeSetInsertedRows,
// TableFormViewDisplay,
// revertChangeSetRowChanges,
// setChangeSetValue,
// } from 'dbgate-datalib';
// import Former from './Former';
export default class ChangeSetFormer extends Former {
public changeSet: ChangeSet;
public setChangeSet: Function;
private batchChangeSet: ChangeSet;
public rowDefinition: ChangeSetRowDefinition;
public rowStatus;
public rowData: {};
// export default class ChangeSetFormer extends Former {
// public changeSet: ChangeSet;
// public setChangeSet: Function;
// private batchChangeSet: ChangeSet;
// public rowDefinition: ChangeSetRowDefinition;
// public rowStatus;
// public rowData: {};
constructor(
public sourceRow: any,
public changeSetState,
public dispatchChangeSet,
public display: TableFormViewDisplay
) {
super();
this.changeSet = changeSetState && changeSetState.value;
this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
this.batchChangeSet = null;
this.rowDefinition = display.getChangeSetRow(sourceRow);
const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition);
this.rowData = matchedChangeSetItem ? { ...sourceRow, ...matchedChangeSetItem.fields } : sourceRow;
let status = 'regular';
if (matchedChangeSetItem && matchedField == 'updates') status = 'updated';
if (matchedField == 'deletes') status = 'deleted';
this.rowStatus = {
status,
modifiedFields:
matchedChangeSetItem && matchedChangeSetItem.fields ? new Set(Object.keys(matchedChangeSetItem.fields)) : null,
};
}
// constructor(
// public sourceRow: any,
// public changeSetState,
// public dispatchChangeSet,
// public display: TableFormViewDisplay
// ) {
// super();
// this.changeSet = changeSetState && changeSetState.value;
// this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
// this.batchChangeSet = null;
// this.rowDefinition = display.getChangeSetRow(sourceRow);
// const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition);
// this.rowData = matchedChangeSetItem ? { ...sourceRow, ...matchedChangeSetItem.fields } : sourceRow;
// let status = 'regular';
// if (matchedChangeSetItem && matchedField == 'updates') status = 'updated';
// if (matchedField == 'deletes') status = 'deleted';
// this.rowStatus = {
// status,
// modifiedFields:
// matchedChangeSetItem && matchedChangeSetItem.fields ? new Set(Object.keys(matchedChangeSetItem.fields)) : null,
// };
// }
applyModification(changeSetReducer) {
if (this.batchChangeSet) {
this.batchChangeSet = changeSetReducer(this.batchChangeSet);
} else {
this.setChangeSet(changeSetReducer(this.changeSet));
}
}
// applyModification(changeSetReducer) {
// if (this.batchChangeSet) {
// this.batchChangeSet = changeSetReducer(this.batchChangeSet);
// } else {
// this.setChangeSet(changeSetReducer(this.changeSet));
// }
// }
setCellValue(uniqueName: string, value: any) {
const row = this.sourceRow;
const definition = this.display.getChangeSetField(row, uniqueName);
this.applyModification(chs => setChangeSetValue(chs, definition, value));
}
// setCellValue(uniqueName: string, value: any) {
// const row = this.sourceRow;
// const definition = this.display.getChangeSetField(row, uniqueName);
// this.applyModification(chs => setChangeSetValue(chs, definition, value));
// }
deleteRow(index: number) {
this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinition));
}
// deleteRow(index: number) {
// this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinition));
// }
beginUpdate() {
this.batchChangeSet = this.changeSet;
}
endUpdate() {
this.setChangeSet(this.batchChangeSet);
this.batchChangeSet = null;
}
// beginUpdate() {
// this.batchChangeSet = this.changeSet;
// }
// endUpdate() {
// this.setChangeSet(this.batchChangeSet);
// this.batchChangeSet = null;
// }
revertRowChanges() {
this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinition));
}
revertAllChanges() {
this.applyModification(chs => createChangeSet());
}
undo() {
this.dispatchChangeSet({ type: 'undo' });
}
redo() {
this.dispatchChangeSet({ type: 'redo' });
}
get editable() {
return this.display.editable;
}
get canUndo() {
return this.changeSetState.canUndo;
}
get canRedo() {
return this.changeSetState.canRedo;
}
get containsChanges() {
return changeSetContainsChanges(this.changeSet);
}
}
// revertRowChanges() {
// this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinition));
// }
// revertAllChanges() {
// this.applyModification(chs => createChangeSet());
// }
// undo() {
// this.dispatchChangeSet({ type: 'undo' });
// }
// redo() {
// this.dispatchChangeSet({ type: 'redo' });
// }
// get editable() {
// return this.display.editable;
// }
// get canUndo() {
// return this.changeSetState.canUndo;
// }
// get canRedo() {
// return this.changeSetState.canRedo;
// }
// get containsChanges() {
// return changeSetContainsChanges(this.changeSet);
// }
// }

85
packages/web/src/formview/FormView.svelte
View File

@@ -39,8 +39,8 @@
category: 'Data form',
name: 'Revert row changes',
keyText: 'CtrlOrCommand+U',
testEnabled: () => getCurrentDataForm()?.getFormer()?.containsChanges,
onClick: () => getCurrentDataForm().getFormer().revertRowChanges(),
testEnabled: () => getCurrentDataForm()?.getGrider()?.containsChanges,
onClick: () => getCurrentDataForm().getGrider().revertRowChanges(0),
});
registerCommand({
@@ -60,8 +60,8 @@
icon: 'icon undo',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentDataForm()?.getFormer()?.canUndo,
onClick: () => getCurrentDataForm().getFormer().undo(),
testEnabled: () => getCurrentDataForm()?.getGrider()?.canUndo,
onClick: () => getCurrentDataForm().getGrider().undo(),
});
registerCommand({
@@ -72,8 +72,8 @@
icon: 'icon redo',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentDataForm()?.getFormer()?.canRedo,
onClick: () => getCurrentDataForm().getFormer().redo(),
testEnabled: () => getCurrentDataForm()?.getGrider()?.canRedo,
onClick: () => getCurrentDataForm().getGrider().redo(),
});
registerCommand({
@@ -194,8 +194,9 @@
export let allRowCount;
export let rowCountBefore;
export let isLoading;
export let former;
export let formDisplay;
export let grider;
export let display;
// export let formDisplay;
export let onNavigate;
let wrapperHeight = 1;
@@ -212,23 +213,25 @@
domFocusField.focus();
}
$: rowData = former?.rowData;
$: rowStatus = former?.rowStatus;
$: rowData = grider?.getRowData(0);
$: rowStatus = grider?.getRowStatus(0);
$: rowCount = Math.floor((wrapperHeight - 22) / (rowHeight + 2));
$: columnChunks = _.chunk(formDisplay.columns, rowCount) as any[][];
$: columnChunks = _.chunk(display?.columns || [], rowCount) as any[][];
$: rowCountInfo = getRowCountInfo(rowCountBefore, allRowCount);
$: rowCountInfo = getRowCountInfo(allRowCount);
function getRowCountInfo(rowCountBefore, allRowCount) {
function getRowCountInfo(allRowCount) {
if (rowData == null) return 'No data';
if (allRowCount == null || rowCountBefore == null) return 'Loading row count...';
return `Row: ${(rowCountBefore + 1).toLocaleString()} / ${allRowCount.toLocaleString()}`;
if (allRowCount == null || display == null) return 'Loading row count...';
return `Row: ${(
(display.config.formViewRecordNumber || 0) + 1
).toLocaleString()} / ${allRowCount.toLocaleString()}`;
}
export function getFormer() {
return former;
export function getGrider() {
return grider;
}
// export function getFormDisplay() {
@@ -263,19 +266,19 @@
export async function reconnect() {
await apiCall('database-connections/refresh', { conid, database });
formDisplay.reload();
display.reload();
}
export async function refresh() {
formDisplay.reload();
display.reload();
}
export function filterSelectedValue() {
formDisplay.filterCellValue(getCellColumn(currentCell), rowData);
// display.filterCellValue(getCellColumn(currentCell), rowData);
}
export function addToFilter() {
formDisplay.addFilterColumn(getCellColumn(currentCell));
// display.addFilterColumn(getCellColumn(currentCell));
}
export const activator = createActivator('FormView', false);
@@ -319,7 +322,7 @@
function setCellValue(cell, value) {
const column = getCellColumn(cell);
if (!column) return;
former.setCellValue(column.uniqueName, value);
grider.setCellValue(0, column.uniqueName, value);
}
const getCellWidth = (row, col) => {
@@ -331,7 +334,7 @@
const [inplaceEditorState, dispatchInsplaceEditor] = createReducer((state, action) => {
switch (action.type) {
case 'show': {
if (!former.editable) return {};
if (!grider.editable) return {};
const column = getCellColumn(action.cell);
if (!column) return state;
if (column.uniquePath.length > 1) return state;
@@ -418,14 +421,14 @@
if (event.keyCode == keycodes.numPadAdd) {
const col = getCellColumn(currentCell);
if (col.foreignKey) {
formDisplay.toggleExpandedColumn(col.uniqueName, true);
display.toggleExpandedColumn(col.uniqueName, true);
}
}
if (event.keyCode == keycodes.numPadSub) {
const col = getCellColumn(currentCell);
if (col.foreignKey) {
formDisplay.toggleExpandedColumn(col.uniqueName, false);
display.toggleExpandedColumn(col.uniqueName, false);
}
}
@@ -448,7 +451,7 @@
if (shouldOpenMultilineDialog(cellData)) {
showModal(EditCellDataModal, {
value: cellData,
onSave: value => former.setCellValue(column.uniqueName, value),
onSave: value => grider.setCellValue(0, column.uniqueName, value),
});
return true;
}
@@ -476,7 +479,7 @@
columnIndex = incrementFunc(columnIndex);
while (
isInRange(columnIndex) &&
!filterName(formDisplay.config.formColumnFilterText, formDisplay.columns[columnIndex].columnName)
!filterName(display.config.formColumnFilterText, display.columns[columnIndex].columnName)
) {
columnIndex = incrementFunc(columnIndex);
}
@@ -484,13 +487,13 @@
columnIndex = firstInRange;
while (
isInRange(columnIndex) &&
!filterName(formDisplay.config.formColumnFilterText, formDisplay.columns[columnIndex].columnName)
!filterName(display.config.formColumnFilterText, display.columns[columnIndex].columnName)
) {
columnIndex = incrementFunc(columnIndex);
}
}
if (!isInRange(columnIndex)) columnIndex = lastInRange;
return moveCurrentCell(columnIndex % formDisplay.columns.length, Math.floor(columnIndex / rowCount) * 2);
return moveCurrentCell(columnIndex % display.columns.length, Math.floor(columnIndex / rowCount) * 2);
};
if (isCtrlOrCommandKey(event)) {
@@ -507,23 +510,23 @@
case keycodes.rightArrow:
return moveCurrentCell(currentCell[0], currentCell[1] + 1);
case keycodes.upArrow:
if (currentCell[1] % 2 == 0 && formDisplay.config.formColumnFilterText) {
if (currentCell[1] % 2 == 0 && display.config.formColumnFilterText) {
return findFilteredColumn(
x => x - 1,
x => x >= 0,
formDisplay.columns.length - 1,
display.columns.length - 1,
0
);
}
return moveCurrentCell(currentCell[0] - 1, currentCell[1]);
case keycodes.downArrow:
if (currentCell[1] % 2 == 0 && formDisplay.config.formColumnFilterText) {
if (currentCell[1] % 2 == 0 && display.config.formColumnFilterText) {
return findFilteredColumn(
x => x + 1,
x => x < formDisplay.columns.length,
x => x < display.columns.length,
0,
formDisplay.columns.length - 1
display.columns.length - 1
);
}
@@ -547,10 +550,10 @@
showModal(DictionaryLookupModal, {
conid,
database,
driver: formDisplay?.driver,
driver: display?.driver,
pureName: col.foreignKey.refTableName,
schemaName: col.foreignKey.refSchemaName,
onConfirm: value => former.setCellValue(col.uniqueName, value),
onConfirm: value => grider.setCellValue(0, col.uniqueName, value),
});
}
</script>
@@ -566,18 +569,18 @@
data-row={rowIndex}
data-col={chunkIndex * 2}
style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
class:columnFiltered={formDisplay.config.formColumnFilterText &&
filterName(formDisplay.config.formColumnFilterText, col.columnName)}
class:columnFiltered={display.config.formColumnFilterText &&
filterName(display.config.formColumnFilterText, col.columnName)}
class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
>
<div class="header-cell-inner">
{#if col.foreignKey}
<FontIcon
icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
icon={plusExpandIcon(display.isExpandedColumn(col.uniqueName))}
on:click={e => {
e.stopPropagation();
formDisplay.toggleExpandedColumn(col.uniqueName);
display.toggleExpandedColumn(col.uniqueName);
}}
/>
{:else}
@@ -614,7 +617,7 @@
{dispatchInsplaceEditor}
cellValue={rowData[col.uniqueName]}
onSetValue={value => {
former.setCellValue(col.uniqueName, value);
grider.setCellValue(0, col.uniqueName, value);
}}
/>
{/if}

104
packages/web/src/formview/Former.ts
View File

@@ -1,53 +1,53 @@
// export interface GriderRowStatus {
// status: 'regular' | 'updated' | 'deleted' | 'inserted';
// modifiedFields?: Set<string>;
// insertedFields?: Set<string>;
// deletedFields?: Set<string>;
// // export interface GriderRowStatus {
// // status: 'regular' | 'updated' | 'deleted' | 'inserted';
// // modifiedFields?: Set<string>;
// // insertedFields?: Set<string>;
// // deletedFields?: Set<string>;
// // }
// export default abstract class Former {
// public rowData: any;
// // getRowStatus(index): GriderRowStatus {
// // const res: GriderRowStatus = {
// // status: 'regular',
// // };
// // return res;
// // }
// beginUpdate() {}
// endUpdate() {}
// setCellValue(uniqueName: string, value: any) {}
// revertRowChanges() {}
// revertAllChanges() {}
// undo() {}
// redo() {}
// get editable() {
// return false;
// }
export default abstract class Former {
public rowData: any;
// getRowStatus(index): GriderRowStatus {
// const res: GriderRowStatus = {
// status: 'regular',
// };
// return res;
// }
beginUpdate() {}
endUpdate() {}
setCellValue(uniqueName: string, value: any) {}
revertRowChanges() {}
revertAllChanges() {}
undo() {}
redo() {}
get editable() {
return false;
}
get canInsert() {
return false;
}
get allowSave() {
return this.containsChanges;
}
get canUndo() {
return false;
}
get canRedo() {
return false;
}
get containsChanges() {
return false;
}
get disableLoadNextPage() {
return false;
}
get errors() {
return null;
}
updateRow(changeObject) {
for (const key of Object.keys(changeObject)) {
this.setCellValue(key, changeObject[key]);
}
}
}
// get canInsert() {
// return false;
// }
// get allowSave() {
// return this.containsChanges;
// }
// get canUndo() {
// return false;
// }
// get canRedo() {
// return false;
// }
// get containsChanges() {
// return false;
// }
// get disableLoadNextPage() {
// return false;
// }
// get errors() {
// return null;
// }
// updateRow(changeObject) {
// for (const key of Object.keys(changeObject)) {
// this.setCellValue(key, changeObject[key]);
// }
// }
// }

77
packages/web/src/formview/SqlFormView.svelte
View File

@@ -16,17 +16,18 @@
</script>
<script lang="ts">
import ChangeSetFormer from './ChangeSetFormer';
import FormView from './FormView.svelte';
import { apiCall } from '../utility/api';
import ChangeSetGrider from '../datagrid/ChangeSetGrider';
import _ from 'lodash';
export let formDisplay;
export let changeSetState;
export let dispatchChangeSet;
export let masterLoadedTime;
export let conid;
export let database;
export let onReferenceSourceChanged;
export let display;
let isLoadingData = false;
let isLoadedData = false;
@@ -41,47 +42,49 @@
const handleLoadCurrentRow = async () => {
if (isLoadingData) return;
let newLoadedRow = false;
if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {
isLoadingData = true;
const row = await loadRow($$props, formDisplay.getCurrentRowQuery());
isLoadingData = false;
isLoadedData = true;
rowData = row;
loadedTime = new Date().getTime();
newLoadedRow = row;
}
if (formDisplay.config.formViewKeyRequested && newLoadedRow) {
formDisplay.cancelRequestKey(newLoadedRow);
}
if (!newLoadedRow && !formDisplay.config.formViewKeyRequested) {
await handleNavigate('first');
}
// if (_.isNumber(display.config.formViewRecordNumber)) {
isLoadingData = true;
const row = await loadRow($$props, display.getPageQuery(display.config.formViewRecordNumber || 0, 1));
isLoadingData = false;
isLoadedData = true;
rowData = row;
loadedTime = new Date().getTime();
newLoadedRow = row;
// }
// if (formDisplay.config.formViewKeyRequested && newLoadedRow) {
// formDisplay.cancelRequestKey(newLoadedRow);
// }
// if (!newLoadedRow && !formDisplay.config.formViewKeyRequested) {
// await handleNavigate('first');
// }
};
const handleLoadRowCount = async () => {
isLoadingCount = true;
const countRow = await loadRow($$props, formDisplay.getCountQuery());
const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());
const countRow = await loadRow($$props, display.getCountQuery());
// const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());
isLoadedCount = true;
isLoadingCount = false;
allRowCount = countRow ? parseInt(countRow.count) : null;
rowCountBefore = countBeforeRow ? parseInt(countBeforeRow.count) : null;
// rowCountBefore = countBeforeRow ? parseInt(countBeforeRow.count) : null;
};
const handleNavigate = async command => {
isLoadingData = true;
const row = await loadRow($$props, formDisplay.navigateRowQuery(command));
if (row) {
formDisplay.navigate(row);
}
isLoadingData = false;
isLoadedData = true;
isLoadedCount = false;
allRowCount = null;
rowCountBefore = null;
rowData = row;
loadedTime = new Date().getTime();
display.formViewNavigate(command, allRowCount);
// isLoadingData = true;
// const row = await loadRow($$props, formDisplay.navigateRowQuery(command));
// if (row) {
// formDisplay.navigate(row);
// }
// isLoadingData = false;
// isLoadedData = true;
// isLoadedCount = false;
// allRowCount = null;
// rowCountBefore = null;
// rowData = row;
// loadedTime = new Date().getTime();
};
export function reload() {
@@ -98,26 +101,26 @@
$: {
if (masterLoadedTime && masterLoadedTime > loadedTime) {
formDisplay.reload();
display.reload();
}
}
$: {
if (formDisplay.cache.refreshTime > loadedTime) {
if (display?.cache?.refreshTime > loadedTime) {
reload();
}
}
$: {
if (formDisplay.isLoadedCorrectly) {
if (display?.isLoadedCorrectly) {
if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
}
}
$: former = new ChangeSetFormer(rowData, changeSetState, dispatchChangeSet, formDisplay);
$: grider = new ChangeSetGrider(rowData ? [rowData] : [], changeSetState, dispatchChangeSet, display);
$: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
</script>
<FormView {...$$props} {former} isLoading={isLoadingData} {allRowCount} {rowCountBefore} onNavigate={handleNavigate} />
<FormView {...$$props} {grider} isLoading={isLoadingData} {allRowCount} onNavigate={handleNavigate} />