Allow resizing and saving column widths

src/app/components/editor/database/database.component.html

@@ -23,6 +23,8 @@
       suppressMovableColumns="true"
       (rowClicked)="onRowClicked($event)"
       (cellValueChanged)="onCellValueChanged()"
+      (gridReady)="onGridReady($event)"
+      (columnResized)="onColumnResize($event)"
       #agGridElement
     ></ag-grid-angular>
   </div>

src/app/components/editor/database/database.component.ts

@@ -15,7 +15,7 @@ import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
 import {EditorNodeContract} from '../../nodes/EditorNode.contract';
 import {EditorService} from '../../../service/editor.service';
 import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
-import {debounce} from '../../../utility';
+import {debounce, debug} from '../../../utility';
 
 @Component({
   selector: 'editor-database',
@@ -86,6 +86,25 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     });
   }
 
+  onGridReady($event) {
+
+  }
+
+  onColumnResize($event) {
+    if ( $event.source === 'uiColumnDragged' && $event.finished ) {
+      debug('Column resized: ', $event);
+      const state = $event.columnApi.getColumnState().find(x => x.colId === $event.column.colId );
+      if ( state ) {
+        const colDef = this.columnDefs.find(x => x.field === $event.column.colId);
+        if ( colDef ) {
+          colDef.width = state.width;
+          this.dirty = true;
+          this.triggerSaveDebounce();
+        }
+      }
+    }
+  }
+
   onCellValueChanged() {
     if ( !this.isInitialLoad ) {
       this.dirty = true;
@@ -161,6 +180,11 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     this.columnDefs = data.map(x => {
       x.editable = !this.readonly;
       x.minWidth = 150;
+      x.resizable = true;
+
+      if ( x.additionalData?.width ) {
+        x.width = x.additionalData.width;
+      }
 
       // Set editors and renderers for different types
       if ( x.Type === 'text' ) {
@@ -186,7 +210,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
       } else if ( x.Type === 'index' ) {
         x.editable = false;
         x.suppressSizeToFit = true;
+        if ( !x.width ) {
           x.width = 80;
+        }
         x.minWidth = 80;
       } else if ( x.Type === 'wysiwyg' ) {
         x.cellEditorFramework = WysiwygEditorComponent;
@@ -253,9 +279,23 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     await this.api.deleteDatabase(this.page.UUID, this.node.UUID, this.node.Value.Value);
   }
 
+  public getSaveColumns() {
+    return this.columnDefs.map(x => {
+      if ( !x.additionalData ) {
+        x.additionalData = {};
+      }
+
+      if ( x.width ) {
+        x.additionalData.width = x.width;
+      }
+
+      return x;
+    });
+  }
+
   public async performSave(): Promise<void> {
     // Save the columns first
-    await this.api.saveDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value, this.columnDefs);
+    await this.api.saveDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value, this.getSaveColumns());
 
     // Save the data
     const rows = await this.api.saveDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value, this.rowData);