Database - dynamic col size & mobile style fixes

package-lock.json

@@ -3112,6 +3112,22 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "angular-resize-event": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/angular-resize-event/-/angular-resize-event-2.0.1.tgz",
+      "integrity": "sha512-MSSsPb35nIBqPnLwslA3SC0ojTc4nBIaT4y0Plri+fCDUKCunPf7MpJrF/cTI/9wCpvVvEIcuzHfTrA6kp03mA==",
+      "requires": {
+        "css-element-queries": "^1.2.3",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -4911,6 +4927,11 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-element-queries": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
+      "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
+    },
     "css-loader": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "@ng-stack/contenteditable": "^1.1.0",
     "ag-grid-angular": "^22.1.1",
     "ag-grid-community": "^22.1.1",
+    "angular-resize-event": "^2.0.1",
     "core-js": "^2.5.4",
     "dexie": "^3.0.2",
     "moment": "^2.24.0",

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { MarkdownModule } from 'ngx-markdown';
 import {ConnectionServiceModule} from 'ng-connection-service';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { AngularResizedEventModule } from 'angular-resize-event';
 
 /**
  * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@@ -49,6 +50,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     MarkdownModule.forRoot(),
     ConnectionServiceModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    AngularResizedEventModule,
   ],
   providers: [
     StatusBar,

src/app/components/components.module.ts

@@ -36,6 +36,7 @@ import {EditorPage} from '../pages/editor/editor.page';
 import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
 import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component';
 import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component';
+import {AngularResizedEventModule} from 'angular-resize-event';
 
 @NgModule({
   declarations: [
@@ -79,6 +80,7 @@ import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-m
       DirectivesModule,
       MarkdownModule,
       EditorPageRoutingModule,
+      AngularResizedEventModule,
   ],
   entryComponents: [
     NodePickerComponent,

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

@@ -1,4 +1,4 @@
-<div class="database-wrapper" *ngIf="!notAvailableOffline">
+<div class="database-wrapper" *ngIf="!notAvailableOffline" (resized)="onResized()">
   <ion-toolbar>
     <ion-input
             [readonly]="readonly"
@@ -6,7 +6,7 @@
             (ionChange)="onCellValueChanged()"
             style="font-size: 15pt;"
     ></ion-input>
-    <ion-buttons *ngIf="!readonly">
+    <ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
       <ion-button (click)="onManageColumns()"><ion-icon name="build" color="primary"></ion-icon>&nbsp;Manage Columns</ion-button>
       <ion-button (click)="onInsertRow()"><ion-icon name="add-circle" color="success"></ion-icon>&nbsp;Insert Row</ion-button>
       <ion-button (click)="onRemoveRow()" [disabled]="lastClickRow < 0"><ion-icon name="remove-circle" color="danger"></ion-icon>&nbsp;Delete Row</ion-button>

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

@@ -149,6 +149,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   setColumns(data) {
     this.columnDefs = data.map(x => {
       x.editable = !this.readonly;
+      x.minWidth = 150;
 
       // Set editors and renderers for different types
       if ( x.Type === 'text' ) {
@@ -160,6 +161,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
       } else if ( x.Type === 'boolean' ) {
         x.cellRendererFramework = BooleanRendererComponent;
         x.cellEditorFramework = BooleanEditorComponent;
+        x.suppressSizeToFit = true;
       } else if ( x.Type === 'select' ) {
         x.cellEditorFramework = SelectEditorComponent;
       } else if ( x.Type === 'multiselect' ) {
@@ -172,6 +174,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
         x.cellRendererFramework = CurrencyRendererComponent;
       } else if ( x.Type === 'index' ) {
         x.editable = false;
+        x.suppressSizeToFit = true;
+        x.width = 80;
+        x.minWidth = 80;
       } else if ( x.Type === 'wysiwyg' ) {
         x.cellEditorFramework = WysiwygEditorComponent;
       }
@@ -181,10 +186,15 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
     this.agGridElement.api.setColumnDefs([]);
     this.agGridElement.api.setColumnDefs(this.columnDefs);
+    this.agGridElement.api.sizeColumnsToFit();
     this.dirty = true;
     this.editorService.triggerSave();
   }
 
+  public onResized() {
+    this.agGridElement.api.sizeColumnsToFit();
+  }
+
   public async performLoad(): Promise<void> {
     if ( !this.node.Value ) {
       this.node.Value = {};