Database - dynamic col size & mobile style fixes

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 = {};