diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts index f42bdeea8..e305febfe 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; 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/web/src/formview/FormView.svelte b/packages/web/src/formview/FormView.svelte index 5fda814cd..642a4e543 100644 --- a/packages/web/src/formview/FormView.svelte +++ b/packages/web/src/formview/FormView.svelte @@ -218,7 +218,7 @@ $: rowCount = Math.floor((wrapperHeight - 22) / (rowHeight + 2)); - $: columnChunks = _.chunk(display?.columns || [], rowCount) as any[][]; + $: columnChunks = _.chunk(display?.formColumns || [], rowCount) as any[][]; $: rowCountInfo = getRowCountInfo(allRowCount); @@ -422,6 +422,7 @@ const col = getCellColumn(currentCell); if (col.foreignKey) { display.toggleExpandedColumn(col.uniqueName, true); + display.reload(); } } @@ -429,6 +430,7 @@ const col = getCellColumn(currentCell); if (col.foreignKey) { display.toggleExpandedColumn(col.uniqueName, false); + display.reload(); } } @@ -479,7 +481,7 @@ columnIndex = incrementFunc(columnIndex); while ( isInRange(columnIndex) && - !filterName(display.config.formColumnFilterText, display.columns[columnIndex].columnName) + !filterName(display.config.formColumnFilterText, display.formColumns[columnIndex].columnName) ) { columnIndex = incrementFunc(columnIndex); } @@ -487,13 +489,13 @@ columnIndex = firstInRange; while ( isInRange(columnIndex) && - !filterName(display.config.formColumnFilterText, display.columns[columnIndex].columnName) + !filterName(display.config.formColumnFilterText, display.formColumns[columnIndex].columnName) ) { columnIndex = incrementFunc(columnIndex); } } if (!isInRange(columnIndex)) columnIndex = lastInRange; - return moveCurrentCell(columnIndex % display.columns.length, Math.floor(columnIndex / rowCount) * 2); + return moveCurrentCell(columnIndex % display.formColumns.length, Math.floor(columnIndex / rowCount) * 2); }; if (isCtrlOrCommandKey(event)) { @@ -514,7 +516,7 @@ return findFilteredColumn( x => x - 1, x => x >= 0, - display.columns.length - 1, + display.formColumns.length - 1, 0 ); } @@ -524,9 +526,9 @@ if (currentCell[1] % 2 == 0 && display.config.formColumnFilterText) { return findFilteredColumn( x => x + 1, - x => x < display.columns.length, + x => x < display.formColumns.length, 0, - display.columns.length - 1 + display.formColumns.length - 1 ); } @@ -581,6 +583,7 @@ on:click={e => { e.stopPropagation(); display.toggleExpandedColumn(col.uniqueName); + display.reload(); }} /> {:else}