dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-29 20:23:59 +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 _ from 'lodash';
import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc } from './GridConfig'; // import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc } from './GridConfig';
import type { TableInfo, EngineDriver, DatabaseInfo, SqlDialect } from 'dbgate-types'; // import type { TableInfo, EngineDriver, DatabaseInfo, SqlDialect } from 'dbgate-types';
import { getFilterValueExpression } from 'dbgate-filterparser'; // import { getFilterValueExpression } from 'dbgate-filterparser';
import { ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay'; // import { ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay';
export class FormViewDisplay { // export class FormViewDisplay {
isLoadedCorrectly = true; // isLoadedCorrectly = true;
columns: DisplayColumn[]; // columns: DisplayColumn[];
public baseTable: TableInfo; // public baseTable: TableInfo;
dialect: SqlDialect; // dialect: SqlDialect;
constructor( // constructor(
public config: GridConfig, // public config: GridConfig,
protected setConfig: ChangeConfigFunc, // protected setConfig: ChangeConfigFunc,
public cache: GridCache, // public cache: GridCache,
protected setCache: ChangeCacheFunc, // protected setCache: ChangeCacheFunc,
public driver?: EngineDriver, // public driver?: EngineDriver,
public dbinfo: DatabaseInfo = null, // public dbinfo: DatabaseInfo = null,
public serverVersion = null // public serverVersion = null
) { // ) {
this.dialect = (driver?.dialectByVersion && driver?.dialectByVersion(serverVersion)) || driver?.dialect; // this.dialect = (driver?.dialectByVersion && driver?.dialectByVersion(serverVersion)) || driver?.dialect;
} // }
addFilterColumn(column) { // addFilterColumn(column) {
if (!column) return; // if (!column) return;
this.setConfig(cfg => ({ // this.setConfig(cfg => ({
...cfg, // ...cfg,
formFilterColumns: [...(cfg.formFilterColumns || []), column.uniqueName], // formFilterColumns: [...(cfg.formFilterColumns || []), column.uniqueName],
})); // }));
} // }
filterCellValue(column, rowData) { // filterCellValue(column, rowData) {
if (!column || !rowData) return; // if (!column || !rowData) return;
const value = rowData[column.uniqueName]; // const value = rowData[column.uniqueName];
const expr = getFilterValueExpression(value, column.dataType); // const expr = getFilterValueExpression(value, column.dataType);
if (expr) { // if (expr) {
this.setConfig(cfg => ({ // this.setConfig(cfg => ({
...cfg, // ...cfg,
filters: { // filters: {
...cfg.filters, // ...cfg.filters,
[column.uniqueName]: expr, // [column.uniqueName]: expr,
}, // },
addedColumns: cfg.addedColumns.includes(column.uniqueName) // addedColumns: cfg.addedColumns.includes(column.uniqueName)
? cfg.addedColumns // ? cfg.addedColumns
: [...cfg.addedColumns, column.uniqueName], // : [...cfg.addedColumns, column.uniqueName],
})); // }));
this.reload(); // this.reload();
} // }
} // }
setFilter(uniqueName, value) { // setFilter(uniqueName, value) {
this.setConfig(cfg => ({ // this.setConfig(cfg => ({
...cfg, // ...cfg,
filters: { // filters: {
...cfg.filters, // ...cfg.filters,
[uniqueName]: value, // [uniqueName]: value,
}, // },
})); // }));
this.reload(); // this.reload();
} // }
removeFilter(uniqueName) { // removeFilter(uniqueName) {
const reloadRequired = !!this.config.filters[uniqueName]; // const reloadRequired = !!this.config.filters[uniqueName];
this.setConfig(cfg => ({ // this.setConfig(cfg => ({
...cfg, // ...cfg,
formFilterColumns: (cfg.formFilterColumns || []).filter(x => x != uniqueName), // formFilterColumns: (cfg.formFilterColumns || []).filter(x => x != uniqueName),
filters: _.omit(cfg.filters || [], uniqueName), // filters: _.omit(cfg.filters || [], uniqueName),
})); // }));
if (reloadRequired) this.reload(); // if (reloadRequired) this.reload();
} // }
reload() { // reload() {
this.setCache(cache => ({ // this.setCache(cache => ({
// ...cache, // // ...cache,
...createGridCache(), // ...createGridCache(),
refreshTime: new Date().getTime(), // refreshTime: new Date().getTime(),
})); // }));
} // }
getKeyValue(columnName) { // getKeyValue(columnName) {
const { formViewKey, formViewKeyRequested } = this.config; // const { formViewKey, formViewKeyRequested } = this.config;
if (formViewKeyRequested && formViewKeyRequested[columnName]) return formViewKeyRequested[columnName]; // if (formViewKeyRequested && formViewKeyRequested[columnName]) return formViewKeyRequested[columnName];
if (formViewKey && formViewKey[columnName]) return formViewKey[columnName]; // if (formViewKey && formViewKey[columnName]) return formViewKey[columnName];
return null; // return null;
} // }
requestKeyValue(columnName, value) { // requestKeyValue(columnName, value) {
if (this.getKeyValue(columnName) == value) return; // if (this.getKeyValue(columnName) == value) return;
this.setConfig(cfg => ({ // this.setConfig(cfg => ({
...cfg, // ...cfg,
formViewKeyRequested: { // formViewKeyRequested: {
...cfg.formViewKey, // ...cfg.formViewKey,
...cfg.formViewKeyRequested, // ...cfg.formViewKeyRequested,
[columnName]: value, // [columnName]: value,
}, // },
})); // }));
this.reload(); // this.reload();
} // }
extractKey(row) { // extractKey(row) {
if (!row || !this.baseTable || !this.baseTable.primaryKey) { // if (!row || !this.baseTable || !this.baseTable.primaryKey) {
return null; // return null;
} // }
const formViewKey = _.pick( // const formViewKey = _.pick(
row, // row,
this.baseTable.primaryKey.columns.map(x => x.columnName) // this.baseTable.primaryKey.columns.map(x => x.columnName)
); // );
return formViewKey; // return formViewKey;
} // }
cancelRequestKey(rowData) { // cancelRequestKey(rowData) {
this.setConfig(cfg => ({ // this.setConfig(cfg => ({
...cfg, // ...cfg,
formViewKeyRequested: null, // formViewKeyRequested: null,
formViewKey: rowData ? this.extractKey(rowData) : cfg.formViewKey, // 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; childConfig?: GridConfig;
reference?: GridReferenceDefinition; reference?: GridReferenceDefinition;
isFormView?: boolean; isFormView?: boolean;
formViewKey?: { [uniqueName: string]: string }; formViewRecordNumber?: number;
formViewKeyRequested?: { [uniqueName: string]: string }; // formViewKey?: { [uniqueName: string]: string };
// formViewKeyRequested?: { [uniqueName: string]: string };
formFilterColumns: string[]; formFilterColumns: string[];
formColumnFilterText?: string; formColumnFilterText?: string;
} }

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

@@ -743,6 +743,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(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 { export function reloadDataCacheFunc(cache: GridCache): GridCache {

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

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

10
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,7 +116,7 @@
}; };
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;
} }
@@ -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

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}

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

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

85
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({
@@ -194,8 +194,9 @@
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 formDisplay;
export let onNavigate; export let onNavigate;
let wrapperHeight = 1; let wrapperHeight = 1;
@@ -212,23 +213,25 @@
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?.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 (rowData == null) return 'No data';
if (allRowCount == null || rowCountBefore == null) return 'Loading row count...'; if (allRowCount == null || display == null) return 'Loading row count...';
return `Row: ${(rowCountBefore + 1).toLocaleString()} / ${allRowCount.toLocaleString()}`; 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 +266,19 @@
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); // display.filterCellValue(getCellColumn(currentCell), rowData);
} }
export function addToFilter() { export function addToFilter() {
formDisplay.addFilterColumn(getCellColumn(currentCell)); // display.addFilterColumn(getCellColumn(currentCell));
} }
export const activator = createActivator('FormView', false); export const activator = createActivator('FormView', false);
@@ -319,7 +322,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 +334,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 +421,14 @@
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);
} }
} }
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);
} }
} }
@@ -448,7 +451,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 +479,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.columns[columnIndex].columnName)
) { ) {
columnIndex = incrementFunc(columnIndex); columnIndex = incrementFunc(columnIndex);
} }
@@ -484,13 +487,13 @@
columnIndex = firstInRange; columnIndex = firstInRange;
while ( while (
isInRange(columnIndex) && isInRange(columnIndex) &&
!filterName(formDisplay.config.formColumnFilterText, formDisplay.columns[columnIndex].columnName) !filterName(display.config.formColumnFilterText, display.columns[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.columns.length, Math.floor(columnIndex / rowCount) * 2);
}; };
if (isCtrlOrCommandKey(event)) { if (isCtrlOrCommandKey(event)) {
@@ -507,23 +510,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.columns.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.columns.length,
0, 0,
formDisplay.columns.length - 1 display.columns.length - 1
); );
} }
@@ -547,10 +550,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 +569,18 @@
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);
}} }}
/> />
{:else} {:else}
@@ -614,7 +617,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}

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

@@ -1,53 +1,53 @@
// export interface GriderRowStatus { // // export interface GriderRowStatus {
// status: 'regular' | 'updated' | 'deleted' | 'inserted'; // // status: 'regular' | 'updated' | 'deleted' | 'inserted';
// modifiedFields?: Set<string>; // // modifiedFields?: Set<string>;
// insertedFields?: Set<string>; // // insertedFields?: Set<string>;
// deletedFields?: 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]);
// }
// }
// } // }
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]);
}
}
}

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

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