show added columns

packages/datalib/src/GridConfig.ts

@@ -1,4 +1,5 @@
 import { DisplayColumn } from './GridDisplay';
+import { TableInfo } from '@dbgate/types';
 
 export interface GridConfig {
   hiddenColumns: string[];
@@ -7,7 +8,8 @@ export interface GridConfig {
 }
 
 export interface GridCache {
-  subcolumns: { [column: string]: DisplayColumn[] };
+  tables: { [uniqueName: string]: TableInfo };
+  refreshTime: number;
 }
 
 export function createGridConfig(): GridConfig {
@@ -20,6 +22,7 @@ export function createGridConfig(): GridConfig {
 
 export function createGridCache(): GridCache {
   return {
-    subcolumns: {},
+    tables: {},
+    refreshTime: new Date().getTime(),
   };
 }

packages/datalib/src/GridDisplay.ts

@@ -22,7 +22,7 @@ export abstract class GridDisplay {
   constructor(
     public config: GridConfig,
     protected setConfig: (config: GridConfig) => void,
-    protected cache: GridCache,
+    public cache: GridCache,
     protected setCache: (config: GridCache) => void,
     protected getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>
   ) {}
@@ -34,9 +34,17 @@ export abstract class GridDisplay {
       this.includeInColumnSet('hiddenColumns', uniqueName, !isVisible);
     } else {
       this.includeInColumnSet('addedColumns', uniqueName, isVisible);
+      this.reload();
     }
   }
 
+  reload() {
+    this.setCache({
+      ...this.cache,
+      refreshTime: new Date().getTime(),
+    });
+  }
+
   includeInColumnSet(field: keyof GridConfig, uniqueName: string, isIncluded: boolean) {
     if (isIncluded) {
       this.setConfig({
@@ -79,18 +87,18 @@ export abstract class GridDisplay {
   }
 
   getExpandedColumns(column: DisplayColumn, uniqueName: string) {
-    const list = this.cache.subcolumns[uniqueName];
-    if (list) {
-      return this.enrichExpandedColumns(list).map(col => ({ ...col, isChecked: this.isColumnChecked(col) }));
+    const table = this.cache.tables[uniqueName];
+    if (table) {
+      return this.enrichExpandedColumns(this.getDisplayColumns(table, column.uniquePath));
     } 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),
+          tables: {
+            ...this.cache.tables,
+            [uniqueName]: table,
           },
         });
       });
@@ -122,12 +130,65 @@ export abstract class GridDisplay {
     };
   }
 
-  addAddedColumnsToSelect(select: Select, columns: DisplayColumn[]) {
-    for(const column of columns) {
-      if (this.isExpandedColumn(column.uniqueName)) {
-        
+  addAddedColumnsToSelect(select: Select, columns: DisplayColumn[], parentAlias: string) {
+    let res = false;
+    for (const column of columns) {
+      if (this.config.addedColumns.includes(column.uniqueName)) {
+        select.columns.push({
+          exprType: 'column',
+          columnName: column.columnName,
+          source: { name: column, alias: parentAlias },
+        });
+        res = true;
       }
     }
+    return res;
+  }
+
+  addJoinsFromExpandedColumns(select: Select, columns: DisplayColumn[], parentAlias: string) {
+    let res = false;
+    for (const column of columns) {
+      if (this.isExpandedColumn(column.uniqueName)) {
+        const table = this.cache.tables[column.uniqueName];
+        if (table) {
+          const childAlias = `${column.uniqueName}_ref`;
+          const subcolumns = this.getDisplayColumns(table, column.uniquePath);
+          const usedTable =
+            this.addJoinsFromExpandedColumns(select, subcolumns, childAlias) ||
+            this.addAddedColumnsToSelect(select, subcolumns, childAlias);
+
+          if (usedTable) {
+            select.from.relations = [
+              ...(select.from.relations || []),
+              {
+                joinType: 'LEFT JOIN',
+                name: table,
+                alias: childAlias,
+                conditions: [
+                  {
+                    conditionType: 'binary',
+                    operator: '=',
+                    left: {
+                      exprType: 'column',
+                      columnName: column.columnName,
+                      source: { name: column, alias: parentAlias },
+                    },
+                    right: {
+                      exprType: 'column',
+                      columnName: table.primaryKey.columns[0].columnName,
+                      source: { name: table, alias: childAlias },
+                    },
+                  },
+                ],
+              },
+            ];
+
+            res = true;
+          }
+        }
+      }
+    }
+    return res;
     // const addedColumns = this.getGridColumns().filter(x=>x.)
   }
 

packages/datalib/src/TableGridDisplay.ts

@@ -21,8 +21,13 @@ export class TableGridDisplay extends GridDisplay {
     const orderColumnName = this.table.columns[0].columnName;
     const select: Select = {
       commandType: 'select',
-      from: { name: this.table },
-      columns: this.table.columns.map(col => ({ exprType: 'column', alias: col.columnName, ...col })),
+      from: { name: this.table, alias: 'basetbl' },
+      columns: this.table.columns.map(col => ({
+        exprType: 'column',
+        alias: col.columnName,
+        source: { alias: 'basetbl' },
+        ...col,
+      })),
       orderBy: [
         {
           exprType: 'column',
@@ -31,6 +36,7 @@ export class TableGridDisplay extends GridDisplay {
         },
       ],
     };
+    this.addJoinsFromExpandedColumns(select, this.columns, 'basetbl');
     return select;
   }
 

packages/sqltree/src/dumpSqlSource.ts

@@ -24,7 +24,7 @@ export function dumpSqlSourceDef(dmp: SqlDumper, source: Source) {
     dmp.put(')');
   }
   if (source.alias) {
-    dmp.put(' %i', this.alias);
+    dmp.put(' %i', source.alias);
   }
 }
 

packages/web/src/datagrid/DataGridCore.js

@@ -152,10 +152,22 @@ export default function DataGridCore(props) {
   //   const visibleRowCountUpperBound = 20;
   //   const visibleRowCountLowerBound = 20;
 
+  const reload = () => {
+    setLoadProps({
+      isLoading: false,
+      loadedRows: [],
+      isLoadedAll: false,
+      loadedTime: new Date().getTime(),
+    });
+  };
+
   React.useEffect(() => {
     if (!isLoadedAll && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= loadedRows.length) {
       loadNextData();
     }
+    if (display.cache.refreshTime > loadedTime) {
+      reload();
+    }
   });
 
   if (!loadedRows || !columns) return null;