formview - expand FK columns

packages/datalib/src/TableFormViewDisplay.ts

@@ -32,12 +32,27 @@ export class TableFormViewDisplay extends FormViewDisplay {
   ) {
     super(config, setConfig, cache, setCache, driver, dbinfo);
     this.gridDisplay = new TableGridDisplay(tableName, driver, config, setConfig, cache, setCache, dbinfo);
+    this.gridDisplay.addAllExpandedColumnsToSelected = true;
 
     this.isLoadedCorrectly = this.gridDisplay.isLoadedCorrectly && !!this.driver;
-    this.columns = this.gridDisplay.columns;
+    this.columns = [];
+    this.addDisplayColumns(this.gridDisplay.columns);
     this.baseTable = this.gridDisplay.baseTable;
   }
 
+  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;
@@ -236,4 +251,13 @@ export class TableFormViewDisplay extends FormViewDisplay {
       columnName: col.columnName,
     };
   }
+
+  toggleExpandedColumn(uniqueName: string) {
+    this.gridDisplay.toggleExpandedColumn(uniqueName);
+    this.gridDisplay.reload();
+  }
+
+  isExpandedColumn(uniqueName: string) {
+    return this.gridDisplay.isExpandedColumn(uniqueName);
+  }
 }

packages/datalib/src/TableGridDisplay.ts

@@ -7,6 +7,7 @@ import { filterName } from './filterName';
 
 export class TableGridDisplay extends GridDisplay {
   public table: TableInfo;
+  public addAllExpandedColumnsToSelected = false;
 
   constructor(
     public tableName: NamedObjectInfo,
@@ -205,7 +206,7 @@ export class TableGridDisplay extends GridDisplay {
     displayedColumnInfo: DisplayedColumnInfo
   ) {
     for (const column of columns) {
-      if (this.config.addedColumns.includes(column.uniqueName)) {
+      if (this.addAllExpandedColumnsToSelected || this.config.addedColumns.includes(column.uniqueName)) {
         select.columns.push({
           exprType: 'column',
           columnName: column.columnName,

packages/web/src/formview/FormView.js

@@ -16,7 +16,7 @@ import { CellFormattedValue, ShowFormButton } from '../datagrid/DataGridRow';
 import { cellFromEvent } from '../datagrid/selection';
 import InplaceEditor from '../datagrid/InplaceEditor';
 import { copyTextToClipboard } from '../utility/clipboard';
-import { FontIcon } from '../icons';
+import { ExpandIcon, FontIcon } from '../icons';
 import openReferenceForm from './openReferenceForm';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import LoadingInfo from '../widgets/LoadingInfo';
@@ -107,6 +107,10 @@ const HintSpan = styled.span`
   margin-right: 16px;
 `;
 
+const ColumnLabelMargin = styled(ColumnLabel)`
+  margin-right: 16px;
+`;
+
 function isDataCell(cell) {
   return cell[1] % 2 == 1;
 }
@@ -416,13 +420,18 @@ export default function FormView(props) {
 
   const [inplaceEditorState, dispatchInsplaceEditor] = React.useReducer((state, action) => {
     switch (action.type) {
-      case 'show':
+      case 'show': {
+        const column = getCellColumn(action.cell);
+        if (!column) return state;
+        if (column.uniquePath.length > 1) return state;
+
         // if (!grider.editable) return {};
         return {
           cell: action.cell,
           text: action.text,
           selectAll: action.selectAll,
         };
+      }
       case 'close': {
         const [row, col] = currentCell || [];
         if (focusFieldRef.current) focusFieldRef.current.focus();
@@ -472,7 +481,7 @@ export default function FormView(props) {
       {columnChunks.map((chunk, chunkIndex) => (
         <Table key={chunkIndex} onMouseDown={handleTableMouseDown}>
           {chunk.map((col, rowIndex) => (
-            <TableRow key={col.columnName} theme={theme} ref={headerRowRef} style={{ height: `${rowHeight}px` }}>
+            <TableRow key={col.uniqueName} theme={theme} ref={headerRowRef} style={{ height: `${rowHeight}px` }}>
               <TableHeaderCell
                 theme={theme}
                 data-row={rowIndex}
@@ -481,7 +490,20 @@ export default function FormView(props) {
                 isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
                 ref={element => setCellRef(rowIndex, chunkIndex * 2, element)}
               >
-                <ColumnLabel {...col} />
+                <ColumnLabelMargin {...col} />
+
+                {col.foreignKey && (
+                  <ShowFormButton
+                    theme={theme}
+                    className="buttonLike"
+                    onClick={e => {
+                      e.stopPropagation();
+                      formDisplay.toggleExpandedColumn(col.uniqueName);
+                    }}
+                  >
+                    <ExpandIcon isExpanded={formDisplay.isExpandedColumn(col.uniqueName)} />
+                  </ShowFormButton>
+                )}
               </TableHeaderCell>
               <TableBodyCell
                 theme={theme}
@@ -510,7 +532,7 @@ export default function FormView(props) {
                 ) : (
                   <>
                     {rowData && (
-                      <CellFormattedValue value={rowData[col.columnName]} dataType={col.dataType} theme={theme} />
+                      <CellFormattedValue value={rowData[col.uniqueName]} dataType={col.dataType} theme={theme} />
                     )}
                     {!!col.hintColumnName &&
                       rowData &&