expandable FK columns

packages/datalib/src/GridConfig.ts

@@ -1,3 +1,23 @@
+import { DisplayColumn } from './GridDisplay';
+
 export interface GridConfig {
   hiddenColumns: string[];
+  expandedColumns: string[];
+}
+
+export interface GridCache {
+  subcolumns: { [column: string]: DisplayColumn[] };
+}
+
+export function createGridConfig(): GridConfig {
+  return {
+    hiddenColumns: [],
+    expandedColumns: [],
+  };
+}
+
+export function createGridCache(): GridCache {
+  return {
+    subcolumns: {},
+  };
 }

packages/datalib/src/GridDisplay.ts

@@ -1,8 +1,11 @@
 import _ from 'lodash';
-import { GridConfig } from './GridConfig';
-import { ForeignKeyInfo } from '@dbgate/types';
+import { GridConfig, GridCache } from './GridConfig';
+import { ForeignKeyInfo, TableInfo } from '@dbgate/types';
+import { filterName } from './filterName';
 
 export interface DisplayColumn {
+  schemaName: string;
+  pureName: string;
   columnName: string;
   headerText: string;
   uniqueName: string;
@@ -15,7 +18,13 @@ export interface DisplayColumn {
 }
 
 export abstract class GridDisplay {
-  constructor(public config: GridConfig, protected setConfig: (config: GridConfig) => void) {}
+  constructor(
+    public config: GridConfig,
+    protected setConfig: (config: GridConfig) => void,
+    protected cache: GridCache,
+    protected setCache: (config: GridCache) => void,
+    protected getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>
+  ) {}
   abstract getPageQuery(offset: number, count: number): string;
   columns: DisplayColumn[];
   setColumnVisibility(uniqueName, isVisible) {
@@ -49,4 +58,71 @@ export abstract class GridDisplay {
   get hiddenColumnIndexes() {
     return (this.config.hiddenColumns || []).map(x => _.findIndex(this.columns, y => y.uniqueName == x));
   }
+
+  enrichExpandedColumns(list: DisplayColumn[]): DisplayColumn[] {
+    const res = [];
+    for (const item of list) {
+      res.push(item);
+      if (this.isExpandedColumn(item.uniqueName)) res.push(...this.getExpandedColumns(item, item.uniqueName));
+    }
+    return res;
+  }
+
+  getExpandedColumns(column: DisplayColumn, uniqueName: string) {
+    const list = this.cache.subcolumns[uniqueName];
+    if (list) {
+      return this.enrichExpandedColumns(list);
+    } else {
+      // load expanded columns
+      const { foreignKey } = column;
+      this.getTableInfo({ schemaName: foreignKey.refSchemaName, pureName: foreignKey.refTableName }).then(table => {
+        this.setCache({
+          ...this.cache,
+          subcolumns: {
+            ...this.cache.subcolumns,
+            [uniqueName]: this.getDisplayColumns(table, column.uniquePath),
+          },
+        });
+      });
+    }
+    return [];
+  }
+
+  getDisplayColumns(table: TableInfo, parentPath: string[]) {
+    return table.columns.map(col => ({
+      ...col,
+      pureName: table.pureName,
+      schemaName: table.schemaName,
+      headerText: col.columnName,
+      uniqueName: [...parentPath, col.columnName].join(','),
+      uniquePath: [...parentPath, col.columnName],
+      isPrimaryKey: table.primaryKey && !!table.primaryKey.columns.find(x => x.columnName == col.columnName),
+      foreignKey:
+        table.foreignKeys &&
+        table.foreignKeys.find(fk => fk.columns.length == 1 && fk.columns[0].columnName == col.columnName),
+      isChecked: !(this.config.hiddenColumns && this.config.hiddenColumns.includes(col.columnName)),
+    }));
+  }
+
+  getColumns(columnFilter) {
+    return this.enrichExpandedColumns(this.columns.filter(col => filterName(columnFilter, col.columnName)));
+  }
+
+  isExpandedColumn(uniqueName: string) {
+    return this.config.expandedColumns.includes(uniqueName);
+  }
+
+  toggleExpandedColumn(uniqueName: string) {
+    if (this.isExpandedColumn(uniqueName)) {
+      this.setConfig({
+        ...this.config,
+        expandedColumns: (this.config.expandedColumns || []).filter(x => x != uniqueName),
+      });
+    } else {
+      this.setConfig({
+        ...this.config,
+        expandedColumns: [...this.config.expandedColumns, uniqueName],
+      });
+    }
+  }
 }

packages/datalib/src/TableGridDisplay.ts

@@ -1,26 +1,20 @@
 import { GridDisplay } from './GridDisplay';
 import { Select, treeToSql, dumpSqlSelect } from '@dbgate/sqltree';
 import { TableInfo, EngineDriver } from '@dbgate/types';
-import { GridConfig } from './GridConfig';
+import { GridConfig, GridCache } from './GridConfig';
 
 export class TableGridDisplay extends GridDisplay {
   constructor(
     public table: TableInfo,
     public driver: EngineDriver,
     config: GridConfig,
-    setConfig: (config: GridConfig) => void
+    setConfig: (config: GridConfig) => void,
+    cache: GridCache,
+    setCache: (config: GridCache) => void,
+    getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>
   ) {
-    super(config, setConfig);
-    this.columns = table.columns.map(col => ({
-      ...col,
-      headerText: col.columnName,
-      uniqueName: col.columnName,
-      uniquePath: [col.columnName],
-      isPrimaryKey: table.primaryKey && !!table.primaryKey.columns.find(x => x.columnName == col.columnName),
-      foreignKey:
-        table.foreignKeys && table.foreignKeys.find(fk => fk.columns.find(x => x.columnName == col.columnName)),
-      isChecked: !(config.hiddenColumns && config.hiddenColumns.includes(col.columnName)),
-    }));
+    super(config, setConfig, cache, setCache, getTableInfo);
+    this.columns = this.getDisplayColumns(table, []);
   }
 
   createSelect() {

packages/datalib/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./GridDisplay";
+export * from "./GridConfig";
 export * from "./TableGridDisplay";
 export * from "./filterName";