columns resize

packages/datalib/src/GridConfig.ts

@@ -19,6 +19,7 @@ export interface GridReferenceDefinition {
 export interface GridConfig extends GridConfigColumns {
   filters: { [uniqueName: string]: string };
   focusedColumn?: string;
+  columnWidths: { [uniqueName: string]: number };
   sort: {
     uniqueName: string;
     order: 'ASC' | 'DESC';
@@ -37,6 +38,7 @@ export function createGridConfig(): GridConfig {
     expandedColumns: [],
     addedColumns: [],
     filters: {},
+    columnWidths: {},
     sort: [],
     focusedColumn: null,
   };

packages/datalib/src/GridDisplay.ts

@@ -38,12 +38,13 @@ export function combineReferenceActions(a: ReferenceActionResult, b: ReferenceAc
   return 'noAction';
 }
 
-export type ChangeCacheFunc = (changeFunc: (config: GridCache) => GridCache) => void;
+export type ChangeCacheFunc = (changeFunc: (cache: GridCache) => GridCache) => void;
+export type ChangeConfigFunc = (changeFunc: (config: GridConfig) => GridConfig) => void;
 
 export abstract class GridDisplay {
   constructor(
     public config: GridConfig,
-    protected setConfig: (config: GridConfig) => void,
+    protected setConfig: ChangeConfigFunc,
     public cache: GridCache,
     protected setCache: ChangeCacheFunc,
     public driver?: EngineDriver
@@ -67,10 +68,10 @@ export abstract class GridDisplay {
   }
 
   focusColumn(uniqueName: string) {
-    this.setConfig({
-      ...this.config,
+    this.setConfig((cfg) => ({
+      ...cfg,
       focusedColumn: uniqueName,
-    });
+    }));
   }
 
   get focusedColumn() {
@@ -96,30 +97,30 @@ export abstract class GridDisplay {
   includeInColumnSet(field: keyof GridConfigColumns, uniqueName: string, isIncluded: boolean) {
     // console.log('includeInColumnSet', field, uniqueName, isIncluded);
     if (isIncluded) {
-      this.setConfig({
-        ...this.config,
-        [field]: [...(this.config[field] || []), uniqueName],
-      });
+      this.setConfig((cfg) => ({
+        ...cfg,
+        [field]: [...(cfg[field] || []), uniqueName],
+      }));
     } else {
-      this.setConfig({
-        ...this.config,
-        [field]: (this.config[field] || []).filter((x) => x != uniqueName),
-      });
+      this.setConfig((cfg) => ({
+        ...cfg,
+        [field]: (cfg[field] || []).filter((x) => x != uniqueName),
+      }));
     }
   }
 
   showAllColumns() {
-    this.setConfig({
-      ...this.config,
+    this.setConfig((cfg) => ({
+      ...cfg,
       hiddenColumns: [],
-    });
+    }));
   }
 
   hideAllColumns() {
-    this.setConfig({
-      ...this.config,
+    this.setConfig((cfg) => ({
+      ...cfg,
       hiddenColumns: this.columns.map((x) => x.uniqueName),
-    });
+    }));
   }
 
   get hiddenColumnIndexes() {
@@ -203,21 +204,21 @@ export abstract class GridDisplay {
   }
 
   setFilter(uniqueName, value) {
-    this.setConfig({
-      ...this.config,
+    this.setConfig((cfg) => ({
+      ...cfg,
       filters: {
-        ...this.config.filters,
+        ...cfg.filters,
         [uniqueName]: value,
       },
-    });
+    }));
     this.reload();
   }
 
   setSort(uniqueName, order) {
-    this.setConfig({
-      ...this.config,
+    this.setConfig((cfg) => ({
+      ...cfg,
       sort: [{ uniqueName, order }],
-    });
+    }));
     this.reload();
   }
 
@@ -230,10 +231,10 @@ export abstract class GridDisplay {
   }
 
   clearFilters() {
-    this.setConfig({
-      ...this.config,
+    this.setConfig((cfg) => ({
+      ...cfg,
       filters: {},
-    });
+    }));
     this.reload();
   }
 
@@ -314,6 +315,23 @@ export abstract class GridDisplay {
     return sql;
   }
 
+  resizeColumn(uniqueName: string, computedSize: number, diff: number) {
+    this.setConfig((cfg) => {
+      const columnWidths = {
+        ...cfg.columnWidths,
+      };
+      if (columnWidths[uniqueName]) {
+        columnWidths[uniqueName] += diff;
+      } else {
+        columnWidths[uniqueName] = computedSize + diff;
+      }
+      return {
+        ...cfg,
+        columnWidths,
+      };
+    });
+  }
+
   getCountQuery() {
     const select = this.createSelect();
     select.columns = [

packages/datalib/src/JslGridDisplay.ts

@@ -1,4 +1,4 @@
-import { GridDisplay, ChangeCacheFunc } from './GridDisplay';
+import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc } from './GridDisplay';
 import { QueryResultColumn } from '@dbgate/types';
 import { GridConfig, GridCache } from './GridConfig';
 
@@ -7,7 +7,7 @@ export class JslGridDisplay extends GridDisplay {
     jslid,
     columns: QueryResultColumn[],
     config: GridConfig,
-    setConfig: (config: GridConfig) => void,
+    setConfig: ChangeConfigFunc,
     cache: GridCache,
     setCache: ChangeCacheFunc
   ) {

packages/datalib/src/TableGridDisplay.ts

@@ -6,6 +6,7 @@ import {
   DisplayColumn,
   ReferenceActionResult,
   DisplayedColumnInfo,
+  ChangeConfigFunc,
 } from './GridDisplay';
 import { TableInfo, EngineDriver, ViewInfo, ColumnInfo, NamedObjectInfo } from '@dbgate/types';
 import { GridConfig, GridCache, createGridCache } from './GridConfig';
@@ -19,7 +20,7 @@ export class TableGridDisplay extends GridDisplay {
     public tableName: NamedObjectInfo,
     driver: EngineDriver,
     config: GridConfig,
-    setConfig: (config: GridConfig) => void,
+    setConfig: ChangeConfigFunc,
     cache: GridCache,
     setCache: ChangeCacheFunc,
     protected getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>

packages/datalib/src/ViewGridDisplay.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { GridDisplay, ChangeCacheFunc } from './GridDisplay';
+import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc } from './GridDisplay';
 import { EngineDriver, ViewInfo, ColumnInfo } from '@dbgate/types';
 import { GridConfig, GridCache } from './GridConfig';
 
@@ -8,7 +8,7 @@ export class ViewGridDisplay extends GridDisplay {
     public view: ViewInfo,
     driver: EngineDriver,
     config: GridConfig,
-    setConfig: (config: GridConfig) => void,
+    setConfig: ChangeConfigFunc,
     cache: GridCache,
     setCache: ChangeCacheFunc
   ) {