diff --git a/packages/datalib/src/FormViewDisplay.ts b/packages/datalib/src/FormViewDisplay.ts deleted file mode 100644 index 4bba3c55c..000000000 --- a/packages/datalib/src/FormViewDisplay.ts +++ /dev/null @@ -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, - })); - } -} diff --git a/packages/datalib/src/GridConfig.ts b/packages/datalib/src/GridConfig.ts index c6c7fd5eb..44f38179c 100644 --- a/packages/datalib/src/GridConfig.ts +++ b/packages/datalib/src/GridConfig.ts @@ -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; } diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts index 7ac527d68..678dc6d5c 100644 --- a/packages/datalib/src/GridDisplay.ts +++ b/packages/datalib/src/GridDisplay.ts @@ -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 { diff --git a/packages/datalib/src/JslGridDisplay.ts b/packages/datalib/src/JslGridDisplay.ts index 698520b93..34b77f37d 100644 --- a/packages/datalib/src/JslGridDisplay.ts +++ b/packages/datalib/src/JslGridDisplay.ts @@ -48,5 +48,7 @@ export class JslGridDisplay extends GridDisplay { } if (!this.columns) this.columns = []; + + this.formColumns = this.columns; } } diff --git a/packages/datalib/src/TableFormViewDisplay.ts b/packages/datalib/src/TableFormViewDisplay.ts deleted file mode 100644 index 9502b85b0..000000000 --- a/packages/datalib/src/TableFormViewDisplay.ts +++ /dev/null @@ -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; - } -} diff --git a/packages/datalib/src/TableGridDisplay.ts b/packages/datalib/src/TableGridDisplay.ts index 9896380e0..7c77aabbf 100644 --- a/packages/datalib/src/TableGridDisplay.ts +++ b/packages/datalib/src/TableGridDisplay.ts @@ -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 }) { diff --git a/packages/datalib/src/ViewGridDisplay.ts b/packages/datalib/src/ViewGridDisplay.ts index 40515db02..da1ca6aba 100644 --- a/packages/datalib/src/ViewGridDisplay.ts +++ b/packages/datalib/src/ViewGridDisplay.ts @@ -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; diff --git a/packages/datalib/src/index.ts b/packages/datalib/src/index.ts index 4225d648d..db07707c5 100644 --- a/packages/datalib/src/index.ts +++ b/packages/datalib/src/index.ts @@ -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'; diff --git a/packages/web/src/datagrid/DataGrid.svelte b/packages/web/src/datagrid/DataGrid.svelte index b6160e150..6a1d851ad 100644 --- a/packages/web/src/datagrid/DataGrid.svelte +++ b/packages/web/src/datagrid/DataGrid.svelte @@ -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 @@ - + 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 diff --git a/packages/web/src/datagrid/TableDataGrid.svelte b/packages/web/src/datagrid/TableDataGrid.svelte index 7db002ff7..55503efd8 100644 --- a/packages/web/src/datagrid/TableDataGrid.svelte +++ b/packages/web/src/datagrid/TableDataGrid.svelte @@ -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} diff --git a/packages/web/src/formview/ChangeSetFormer.ts b/packages/web/src/formview/ChangeSetFormer.ts deleted file mode 100644 index d107c70ec..000000000 --- a/packages/web/src/formview/ChangeSetFormer.ts +++ /dev/null @@ -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); - } -} diff --git a/packages/web/src/formview/FormView.svelte b/packages/web/src/formview/FormView.svelte index a47f6e092..4397d1671 100644 --- a/packages/web/src/formview/FormView.svelte +++ b/packages/web/src/formview/FormView.svelte @@ -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 @@ @@ -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}`]} >
{#if col.foreignKey} { 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} diff --git a/packages/web/src/formview/FormViewFilterColumn.svelte b/packages/web/src/formview/FormViewFilterColumn.svelte index a92c753ab..3e3808c51 100644 --- a/packages/web/src/formview/FormViewFilterColumn.svelte +++ b/packages/web/src/formview/FormViewFilterColumn.svelte @@ -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); }} > @@ -35,7 +35,7 @@ formDisplay.setFilter(column.uniqueName, value)} + setFilter={value => display.setFilter(column.uniqueName, value)} {driver} {conid} {database} diff --git a/packages/web/src/formview/FormViewFilters.svelte b/packages/web/src/formview/FormViewFilters.svelte index d443d95de..609247d72 100644 --- a/packages/web/src/formview/FormViewFilters.svelte +++ b/packages/web/src/formview/FormViewFilters.svelte @@ -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 || []); @@ -28,7 +28,7 @@
{ if (e.keyCode == keycodes.escape) { setConfig(x => ({ @@ -47,23 +47,17 @@
-{#if baseTable?.primaryKey} - - {#each baseTable.primaryKey.columns as col} - - {/each} - - {#each allFilterNames as uniqueName} - x.uniqueName == uniqueName)} - {formDisplay} - {filters} - {driver} - {conid} - {database} - {schemaName} - {pureName} - /> - {/each} - -{/if} + + {#each allFilterNames as uniqueName} + x.uniqueName == uniqueName)} + {display} + {filters} + {driver} + {conid} + {database} + {schemaName} + {pureName} + /> + {/each} + diff --git a/packages/web/src/formview/Former.ts b/packages/web/src/formview/Former.ts deleted file mode 100644 index cbd1508d2..000000000 --- a/packages/web/src/formview/Former.ts +++ /dev/null @@ -1,53 +0,0 @@ -// export interface GriderRowStatus { -// status: 'regular' | 'updated' | 'deleted' | 'inserted'; -// modifiedFields?: Set; -// insertedFields?: Set; -// deletedFields?: Set; -// } - -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]); - } - } -} diff --git a/packages/web/src/formview/JslFormView.svelte b/packages/web/src/formview/JslFormView.svelte new file mode 100644 index 000000000..19a1aac5e --- /dev/null +++ b/packages/web/src/formview/JslFormView.svelte @@ -0,0 +1,34 @@ + + + + + diff --git a/packages/web/src/formview/LoadingFormView.svelte b/packages/web/src/formview/LoadingFormView.svelte new file mode 100644 index 000000000..5473137b8 --- /dev/null +++ b/packages/web/src/formview/LoadingFormView.svelte @@ -0,0 +1,85 @@ + + + diff --git a/packages/web/src/formview/PrimaryKeyFilterEditor.svelte b/packages/web/src/formview/PrimaryKeyFilterEditor.svelte deleted file mode 100644 index b59f9d677..000000000 --- a/packages/web/src/formview/PrimaryKeyFilterEditor.svelte +++ /dev/null @@ -1,51 +0,0 @@ - - -
-
-
- - x.columnName == column.columnName)} /> -
- {#if formDisplay.config.formViewKeyRequested} - - - - {/if} -
-
- -
-
diff --git a/packages/web/src/formview/SqlFormView.svelte b/packages/web/src/formview/SqlFormView.svelte index af0e3761e..0c7af9fec 100644 --- a/packages/web/src/formview/SqlFormView.svelte +++ b/packages/web/src/formview/SqlFormView.svelte @@ -16,108 +16,20 @@ - + diff --git a/packages/web/src/formview/openReferenceForm.ts b/packages/web/src/formview/openReferenceForm.ts index fe6a7e878..0ed33b876 100644 --- a/packages/web/src/formview/openReferenceForm.ts +++ b/packages/web/src/formview/openReferenceForm.ts @@ -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, }, }, diff --git a/packages/web/src/tabs/ViewDataTab.svelte b/packages/web/src/tabs/ViewDataTab.svelte index 43eab9ace..9938128d7 100644 --- a/packages/web/src/tabs/ViewDataTab.svelte +++ b/packages/web/src/tabs/ViewDataTab.svelte @@ -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} />