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

Merge branch 'develop'

Browse Source
This commit is contained in:
Jan Prochazka
2023-01-22 19:27:57 +01:00
parent ba644a37b7 ef62948b5a
commit 8926e3bc84
22 changed files with 337 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,120 +0,0 @@
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;
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],
}));
}
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();
}
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(),
}));
}
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,
}));
}
}

3
packages/datalib/src/GridConfig.ts
View File

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

48
packages/datalib/src/GridDisplay.ts
View File

@@ -70,6 +70,7 @@ export abstract class GridDisplay {
} }
dialect: SqlDialect; dialect: SqlDialect;
columns: DisplayColumn[]; columns: DisplayColumn[];
formColumns: DisplayColumn[] = [];
baseTable?: TableInfo; baseTable?: TableInfo;
baseView?: ViewInfo; baseView?: ViewInfo;
baseCollection?: CollectionInfo; baseCollection?: CollectionInfo;
@@ -329,6 +330,7 @@ export abstract class GridDisplay {
...cfg.filters, ...cfg.filters,
[uniqueName]: value, [uniqueName]: value,
}, },
formViewRecordNumber: 0,
})); }));
this.reload(); this.reload();
} }
@@ -351,6 +353,7 @@ export abstract class GridDisplay {
this.setConfig(cfg => ({ this.setConfig(cfg => ({
...cfg, ...cfg,
filters: _.omit(cfg.filters, [uniqueName]), filters: _.omit(cfg.filters, [uniqueName]),
formFilterColumns: (cfg.formFilterColumns || []).filter(x => x != uniqueName),
})); }));
this.reload(); this.reload();
} }
@@ -718,22 +721,11 @@ export abstract class GridDisplay {
}; };
} }
switchToFormView(rowData) { switchToFormView(rowIndex) {
if (!this.baseTable) return;
const { primaryKey } = this.baseTable;
if (!primaryKey) return;
const { columns } = primaryKey;
this.setConfig(cfg => ({ this.setConfig(cfg => ({
...cfg, ...cfg,
isFormView: true, isFormView: true,
formViewKey: rowData formViewRecordNumber: rowIndex,
? _.pick(
rowData,
columns.map(x => x.columnName)
)
: null,
formViewKeyRequested: null,
})); }));
} }
@@ -743,6 +735,36 @@ export abstract class GridDisplay {
isJsonView: true, 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((cfg.formViewRecordNumber || 0) + 1, 0),
}));
break;
case 'end':
this.setConfig(cfg => ({
...cfg,
formViewRecordNumber: Math.max(allRowCount - 1, 0),
}));
break;
}
this.reload();
}
} }
export function reloadDataCacheFunc(cache: GridCache): GridCache { export function reloadDataCacheFunc(cache: GridCache): GridCache {

2
packages/datalib/src/JslGridDisplay.ts
View File

@@ -48,5 +48,7 @@ export class JslGridDisplay extends GridDisplay {
} }
if (!this.columns) this.columns = []; if (!this.columns) this.columns = [];
this.formColumns = this.columns;
} }
} }

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

@@ -1,272 +0,0 @@
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;
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;
}
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],
},
})),
};
}
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],
},
})),
],
});
}
if (conditions.length == 1) {
return conditions[0];
}
return {
conditionType: 'or',
conditions,
};
}
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;
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;
}
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;
}
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);
}
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,
}));
}
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;
}
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,
};
}
toggleExpandedColumn(uniqueName: string, value?: boolean) {
this.gridDisplay.toggleExpandedColumn(uniqueName, value);
this.gridDisplay.reload();
}
isExpandedColumn(uniqueName: string) {
return this.gridDisplay.isExpandedColumn(uniqueName);
}
get editable() {
return this.gridDisplay.editable;
}
}

19
packages/datalib/src/TableGridDisplay.ts
View File

@@ -51,6 +51,7 @@ export class TableGridDisplay extends GridDisplay {
} }
this.columns = this.getDisplayColumns(this.table, []); this.columns = this.getDisplayColumns(this.table, []);
this.addFormDisplayColumns(this.getDisplayColumns(this.table, []));
this.filterable = true; this.filterable = true;
this.sortable = true; this.sortable = true;
this.groupable = true; this.groupable = true;
@@ -62,6 +63,24 @@ export class TableGridDisplay extends GridDisplay {
? this.table.primaryKey.columns.map(x => x.columnName) ? this.table.primaryKey.columns.map(x => x.columnName)
: this.table.columns.map(x => x.columnName); : this.table.columns.map(x => x.columnName);
} }
if (this.config.isFormView) {
this.addAllExpandedColumnsToSelected = true;
this.hintBaseColumns = this.formColumns;
}
}
addFormDisplayColumns(columns) {
for (const col of columns) {
this.formColumns.push(col);
if (this.isExpandedColumn(col.uniqueName)) {
const table = this.getFkTarget(col);
if (table) {
const subcolumns = this.getDisplayColumns(table, col.uniquePath);
this.addFormDisplayColumns(subcolumns);
}
}
}
} }
findTable({ schemaName = undefined, pureName }) { findTable({ schemaName = undefined, pureName }) {

1
packages/datalib/src/ViewGridDisplay.ts
View File

@@ -15,6 +15,7 @@ export class ViewGridDisplay extends GridDisplay {
) { ) {
super(config, setConfig, cache, setCache, driver, serverVersion); super(config, setConfig, cache, setCache, driver, serverVersion);
this.columns = this.getDisplayColumns(view); this.columns = this.getDisplayColumns(view);
this.formColumns = this.columns;
this.filterable = true; this.filterable = true;
this.sortable = true; this.sortable = true;
this.groupable = false; this.groupable = false;

4
packages/datalib/src/index.ts
View File

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

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

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

4
packages/web/src/datagrid/JslDataGrid.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { createGridCache, createGridConfig, JslGridDisplay } from 'dbgate-datalib'; import { createGridCache, createGridConfig, JslGridDisplay } from 'dbgate-datalib';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import JslFormView from '../formview/JslFormView.svelte';
import { apiOff, apiOn, useApiCall } from '../utility/api'; import { apiOff, apiOn, useApiCall } from '../utility/api';
import useEffect from '../utility/useEffect'; import useEffect from '../utility/useEffect';
@@ -55,7 +56,10 @@
{...$$restProps} {...$$restProps}
{display} {display}
{jslid} {jslid}
config={$config}
setConfig={config.update}
gridCoreComponent={JslDataGridCore} gridCoreComponent={JslDataGridCore}
formViewComponent={JslFormView}
bind:loadedRows bind:loadedRows
isDynamicStructure={$info?.__isDynamicStructure} isDynamicStructure={$info?.__isDynamicStructure}
useEvalFilters useEvalFilters

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

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

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

@@ -1,96 +0,0 @@
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: {};
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));
}
}
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));
}
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);
}
}

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

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

6
packages/web/src/formview/FormViewFilterColumn.svelte
View File

@@ -8,7 +8,7 @@
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
export let column; export let column;
export let formDisplay; export let display;
export let filters; export let filters;
export let driver; export let driver;
@@ -26,7 +26,7 @@
square square
narrow narrow
on:click={() => { on:click={() => {
formDisplay.removeFilter(column.uniqueName); display.removeFilter(column.uniqueName);
}} }}
> >
<FontIcon icon="icon close" /> <FontIcon icon="icon close" />
@@ -35,7 +35,7 @@
<DataFilterControl <DataFilterControl
filterType={getFilterType(column.dataType)} filterType={getFilterType(column.dataType)}
filter={filters[column.uniqueName]} filter={filters[column.uniqueName]}
setFilter={value => formDisplay.setFilter(column.uniqueName, value)} setFilter={value => display.setFilter(column.uniqueName, value)}
{driver} {driver}
{conid} {conid}
{database} {database}

46
packages/web/src/formview/FormViewFilters.svelte
View File

@@ -4,10 +4,10 @@
import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte'; import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
import keycodes from '../utility/keycodes'; import keycodes from '../utility/keycodes';
import FormViewFilterColumn from './FormViewFilterColumn.svelte'; import FormViewFilterColumn from './FormViewFilterColumn.svelte';
import PrimaryKeyFilterEditor from './PrimaryKeyFilterEditor.svelte'; // import PrimaryKeyFilterEditor from './PrimaryKeyFilterEditor.svelte';
export let managerSize; export let managerSize;
export let formDisplay; export let display;
export let setConfig; export let setConfig;
export let driver; export let driver;
@@ -16,9 +16,9 @@
export let schemaName; export let schemaName;
export let pureName; export let pureName;
$: baseTable = formDisplay?.baseTable; $: baseTable = display?.baseTable;
$: formFilterColumns = formDisplay?.config?.formFilterColumns; $: formFilterColumns = display?.config?.formFilterColumns;
$: filters = formDisplay?.config?.filters; $: filters = display?.config?.filters;
$: allFilterNames = _.union(_.keys(filters || {}), formFilterColumns || []); $: allFilterNames = _.union(_.keys(filters || {}), formFilterColumns || []);
</script> </script>
@@ -28,7 +28,7 @@
<div class="flex"> <div class="flex">
<input <input
type="text" type="text"
value={formDisplay?.config?.formColumnFilterText || ''} value={display?.config?.formColumnFilterText || ''}
on:keydown={e => { on:keydown={e => {
if (e.keyCode == keycodes.escape) { if (e.keyCode == keycodes.escape) {
setConfig(x => ({ setConfig(x => ({
@@ -47,23 +47,17 @@
</div> </div>
</div> </div>
{#if baseTable?.primaryKey} <ManagerInnerContainer width={managerSize}>
<ManagerInnerContainer width={managerSize}> {#each allFilterNames as uniqueName}
{#each baseTable.primaryKey.columns as col} <FormViewFilterColumn
<PrimaryKeyFilterEditor {baseTable} column={col} {formDisplay} /> column={display.formColumns.find(x => x.uniqueName == uniqueName)}
{/each} {display}
{filters}
{#each allFilterNames as uniqueName} {driver}
<FormViewFilterColumn {conid}
column={formDisplay.columns.find(x => x.uniqueName == uniqueName)} {database}
{formDisplay} {schemaName}
{filters} {pureName}
{driver} />
{conid} {/each}
{database} </ManagerInnerContainer>
{schemaName}
{pureName}
/>
{/each}
</ManagerInnerContainer>
{/if}

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

@@ -1,53 +0,0 @@
// 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;
}
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]);
}
}
}

34
packages/web/src/formview/JslFormView.svelte Normal file
View File

@@ -0,0 +1,34 @@
<script lang="ts" context="module">
async function loadRow(props, index) {
const { jslid, formatterFunction, display } = props;
const response = await apiCall('jsldata/get-rows', {
jslid,
offset: index,
limit: 1,
formatterFunction,
filters: display ? display.compileFilters() : null,
});
if (response.errorMessage) return response;
return response[0];
}
</script>
<script lang="ts">
import { apiCall } from '../utility/api';
import _ from 'lodash';
import LoadingFormView from './LoadingFormView.svelte';
export let display;
async function handleLoadRow() {
return await loadRow($$props, display.config.formViewRecordNumber || 0);
}
async function handleLoadRowCount() {
return null;
}
</script>
<LoadingFormView {...$$props} loadRowFunc={handleLoadRow} loadRowCountFunc={handleLoadRowCount} rowCountNotAvailable />

85
packages/web/src/formview/LoadingFormView.svelte Normal file
View File

@@ -0,0 +1,85 @@
<script lang="ts">
import FormView from './FormView.svelte';
import { apiCall } from '../utility/api';
import ChangeSetGrider from '../datagrid/ChangeSetGrider';
import _ from 'lodash';
export let changeSetState;
export let dispatchChangeSet;
export let masterLoadedTime;
export let conid;
export let database;
export let onReferenceSourceChanged;
export let display;
export let loadRowFunc;
export let loadRowCountFunc;
let isLoadingData = false;
let isLoadedData = false;
let rowData = null;
let isLoadingCount = false;
let isLoadedCount = false;
let loadedTime = new Date().getTime();
let allRowCount = null;
let errorMessage = null;
const handleLoadCurrentRow = async () => {
if (isLoadingData) return;
let newLoadedRow = false;
isLoadingData = true;
const row = await loadRowFunc(display.config.formViewRecordNumber || 0);
isLoadingData = false;
isLoadedData = true;
rowData = row;
loadedTime = new Date().getTime();
newLoadedRow = row;
};
const handleLoadRowCount = async () => {
isLoadingCount = true;
allRowCount = await loadRowCountFunc();
isLoadedCount = true;
isLoadingCount = false;
};
const handleNavigate = async command => {
display.formViewNavigate(command, allRowCount);
};
export function reload() {
isLoadingData = false;
isLoadedData = false;
isLoadingCount = false;
isLoadedCount = false;
rowData = null;
loadedTime = new Date().getTime();
allRowCount = null;
errorMessage = null;
}
$: {
if (masterLoadedTime && masterLoadedTime > loadedTime) {
display.reload();
}
}
$: {
if (display?.cache?.refreshTime > loadedTime) {
reload();
}
}
$: {
if (display?.isLoadedCorrectly) {
if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
}
}
$: grider = new ChangeSetGrider(rowData ? [rowData] : [], changeSetState, dispatchChangeSet, display);
$: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
</script>
<FormView {...$$props} {grider} isLoading={isLoadingData} {allRowCount} onNavigate={handleNavigate} />

51
packages/web/src/formview/PrimaryKeyFilterEditor.svelte
View File

@@ -1,51 +0,0 @@
<script lang="ts">
import ColumnLabel from '../elements/ColumnLabel.svelte';
import InlineButton from '../buttons/InlineButton.svelte';
import FontIcon from '../icons/FontIcon.svelte';
import keycodes from '../utility/keycodes';
export let column;
export let baseTable;
export let formDisplay;
let domEditor;
$: value = formDisplay.getKeyValue(column.columnName);
const applyFilter = () => {
formDisplay.requestKeyValue(column.columnName, domEditor.value);
};
const cancelFilter = () => {
formDisplay.cancelRequestKey();
formDisplay.reload();
};
const handleKeyDown = ev => {
if (ev.keyCode == keycodes.enter) {
applyFilter();
}
if (ev.keyCode == keycodes.escape) {
cancelFilter();
}
};
$: if (domEditor) domEditor.value = value;
</script>
<div class="m-1">
<div class="space-between">
<div>
<FontIcon icon="img primary-key" />
<ColumnLabel {...baseTable.columns.find(x => x.columnName == column.columnName)} />
</div>
{#if formDisplay.config.formViewKeyRequested}
<InlineButton square on:click={cancelFilter}>
<FontIcon icon="icon delete" />
</InlineButton>
{/if}
</div>
<div class="flex">
<input bind:this={domEditor} type="text" on:blur={applyFilter} on:keydown={handleKeyDown} />
</div>
</div>

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

@@ -16,108 +16,20 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import ChangeSetFormer from './ChangeSetFormer';
import FormView from './FormView.svelte';
import { apiCall } from '../utility/api'; import { apiCall } from '../utility/api';
import _ from 'lodash';
import LoadingFormView from './LoadingFormView.svelte';
export let formDisplay; export let display;
export let changeSetState;
export let dispatchChangeSet;
export let masterLoadedTime;
export let conid;
export let database;
export let onReferenceSourceChanged;
let isLoadingData = false; async function handleLoadRow() {
let isLoadedData = false; return await loadRow($$props, display.getPageQuery(display.config.formViewRecordNumber || 0, 1));
let rowData = null;
let isLoadingCount = false;
let isLoadedCount = false;
let loadedTime = new Date().getTime();
let allRowCount = null;
let rowCountBefore = null;
let errorMessage = null;
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');
}
};
const handleLoadRowCount = async () => {
isLoadingCount = true;
const countRow = await loadRow($$props, formDisplay.getCountQuery());
const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());
isLoadedCount = true;
isLoadingCount = false;
allRowCount = countRow ? parseInt(countRow.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();
};
export function reload() {
isLoadingData = false;
isLoadedData = false;
isLoadingCount = false;
isLoadedCount = false;
rowData = null;
loadedTime = new Date().getTime();
allRowCount = null;
rowCountBefore = null;
errorMessage = null;
} }
$: { async function handleLoadRowCount() {
if (masterLoadedTime && masterLoadedTime > loadedTime) { const countRow = await loadRow($$props, display.getCountQuery());
formDisplay.reload(); return countRow ? parseInt(countRow.count) : null;
}
} }
$: {
if (formDisplay.cache.refreshTime > loadedTime) {
reload();
}
}
$: {
if (formDisplay.isLoadedCorrectly) {
if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
}
}
$: former = new ChangeSetFormer(rowData, changeSetState, dispatchChangeSet, formDisplay);
$: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
</script> </script>
<FormView {...$$props} {former} isLoading={isLoadingData} {allRowCount} {rowCountBefore} onNavigate={handleNavigate} /> <LoadingFormView {...$$props} loadRowFunc={handleLoadRow} loadRowCountFunc={handleLoadRowCount} />

18
packages/web/src/formview/openReferenceForm.ts
View File

@@ -1,10 +1,8 @@
import { getFilterValueExpression } from 'dbgate-filterparser';
import _ from 'lodash'; import _ from 'lodash';
import openNewTab from '../utility/openNewTab'; import openNewTab from '../utility/openNewTab';
export default function openReferenceForm(rowData, column, conid, database) { export default function openReferenceForm(rowData, column, conid, database) {
const formViewKey = _.fromPairs(
column.foreignKey.columns.map(({ refColumnName, columnName }) => [refColumnName, rowData[columnName]])
);
openNewTab( openNewTab(
{ {
title: column.foreignKey.refTableName, title: column.foreignKey.refTableName,
@@ -21,7 +19,12 @@ export default function openReferenceForm(rowData, column, conid, database) {
{ {
grid: { grid: {
isFormView: true, isFormView: true,
formViewKey, filters: {
[column.foreignKey.columns[0].refColumnName]: getFilterValueExpression(
rowData[column.foreignKey.columns[0].columnName],
'string'
),
},
}, },
}, },
{ {
@@ -50,6 +53,13 @@ export function openPrimaryKeyForm(rowData, baseTable, conid, database) {
{ {
grid: { grid: {
isFormView: true, isFormView: true,
filters: {
[baseTable.primaryKey.columns[0].columnName]: getFilterValueExpression(
rowData[baseTable.primaryKey.columns[0].columnName],
'string'
),
},
formViewKey, formViewKey,
}, },
}, },

2
packages/web/src/tabs/ViewDataTab.svelte
View File

@@ -14,6 +14,7 @@ import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/T
import DataGrid from '../datagrid/DataGrid.svelte'; import DataGrid from '../datagrid/DataGrid.svelte';
import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte'; import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
import SqlFormView from '../formview/SqlFormView.svelte';
import { getBoolSettingsValue } from '../settings/settingsTools'; import { getBoolSettingsValue } from '../settings/settingsTools';
import { extensions } from '../stores'; import { extensions } from '../stores';
import { useConnectionInfo, useDatabaseServerVersion, useViewInfo } from '../utility/metadataLoaders'; import { useConnectionInfo, useDatabaseServerVersion, useViewInfo } from '../utility/metadataLoaders';
@@ -66,6 +67,7 @@ import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/T
setCache={cache.update} setCache={cache.update}
focusOnVisible focusOnVisible
gridCoreComponent={SqlDataGridCore} gridCoreComponent={SqlDataGridCore}
formViewComponent={SqlFormView}
/> />
<svelte:fragment slot="toolstrip"> <svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="dataGrid.refresh" /> <ToolStripCommandButton command="dataGrid.refresh" />