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

Merge branch 'develop'

Browse Source
This commit is contained in:
Jan Prochazka 2023-01-22 19:27:57 +01:00
commit 8926e3bc84
22 changed files with 337 additions and 805 deletions
Show Stats 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;
reference?: GridReferenceDefinition;
isFormView?: boolean;
formViewKey?: { [uniqueName: string]: string };
formViewKeyRequested?: { [uniqueName: string]: string };
formViewRecordNumber?: number;
formFilterColumns: string[];
formColumnFilterText?: string;
}

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

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

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

@ -48,5 +48,7 @@ export class JslGridDisplay extends GridDisplay {
}
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.addFormDisplayColumns(this.getDisplayColumns(this.table, []));
this.filterable = true;
this.sortable = true;
this.groupable = true;
@ -62,6 +63,24 @@ export class TableGridDisplay extends GridDisplay {
? this.table.primaryKey.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 }) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 lang="ts">
import ChangeSetFormer from './ChangeSetFormer';
import FormView from './FormView.svelte';
import { apiCall } from '../utility/api';
import _ from 'lodash';
import LoadingFormView from './LoadingFormView.svelte';
export let formDisplay;
export let changeSetState;
export let dispatchChangeSet;
export let masterLoadedTime;
export let conid;
export let database;
export let onReferenceSourceChanged;
export let display;
let isLoadingData = false;
let isLoadedData = false;
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 handleLoadRow() {
return await loadRow($$props, display.getPageQuery(display.config.formViewRecordNumber || 0, 1));
}
$: {
if (masterLoadedTime && masterLoadedTime > loadedTime) {
formDisplay.reload();
}
async function handleLoadRowCount() {
const countRow = await loadRow($$props, display.getCountQuery());
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>
<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 openNewTab from '../utility/openNewTab';
export default function openReferenceForm(rowData, column, conid, database) {
const formViewKey = _.fromPairs(
column.foreignKey.columns.map(({ refColumnName, columnName }) => [refColumnName, rowData[columnName]])
);
openNewTab(
{
title: column.foreignKey.refTableName,
@ -21,7 +19,12 @@ export default function openReferenceForm(rowData, column, conid, database) {
{
grid: {
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: {
isFormView: true,
filters: {
[baseTable.primaryKey.columns[0].columnName]: getFilterValueExpression(
rowData[baseTable.primaryKey.columns[0].columnName],
'string'
),
},
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 SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
import SqlFormView from '../formview/SqlFormView.svelte';
import { getBoolSettingsValue } from '../settings/settingsTools';
import { extensions } from '../stores';
import { useConnectionInfo, useDatabaseServerVersion, useViewInfo } from '../utility/metadataLoaders';
@ -66,6 +67,7 @@ import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/T
setCache={cache.update}
focusOnVisible
gridCoreComponent={SqlDataGridCore}
formViewComponent={SqlFormView}
/>
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="dataGrid.refresh" />