Add ability to open database in full-screen modal

src/app/components/components.module.ts

@@ -38,6 +38,7 @@ import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-
 import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component';
 import {AngularResizedEventModule} from 'angular-resize-event';
 import {DateTimeFilterComponent} from './editor/database/filters/date-time.filter';
+import {DatabasePageComponent} from './editor/database/database-page.component';
 
 @NgModule({
   declarations: [
@@ -70,6 +71,7 @@ import {DateTimeFilterComponent} from './editor/database/filters/date-time.filte
     WysiwygEditorComponent,
     WysiwygModalComponent,
     DateTimeFilterComponent,
+    DatabasePageComponent,
   ],
   imports: [
       CommonModule,
@@ -114,6 +116,7 @@ import {DateTimeFilterComponent} from './editor/database/filters/date-time.filte
     WysiwygEditorComponent,
     WysiwygModalComponent,
     DateTimeFilterComponent,
+    DatabasePageComponent,
   ],
   exports: [
     NodePickerComponent,
@@ -145,6 +148,7 @@ import {DateTimeFilterComponent} from './editor/database/filters/date-time.filte
     WysiwygEditorComponent,
     WysiwygModalComponent,
     DateTimeFilterComponent,
+    DatabasePageComponent,
   ]
 })
 export class ComponentsModule {}

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

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {EditorService} from '../../../service/editor.service';
+
+@Component({
+    selector: 'noded-database-page',
+    template: `
+        <div class="container" *ngIf="ready">
+            <editor-database [nodeId]="nodeId" [editorUUID]="this.editorService.instanceUUID" [fullPage]="true"></editor-database>
+        </div>
+    `,
+    styles: [
+        `
+            .container {
+                height: 100%;
+            }
+
+            editor-database {
+                height: 100%;
+                display: flex;
+            }
+        `,
+    ],
+})
+export class DatabasePageComponent implements OnInit {
+    @Input() nodeId: string;
+    @Input() pageId: string;
+
+    public ready = false;
+
+    constructor(
+        public editorService: EditorService,
+    ) {
+        this.editorService = editorService.getEditor();
+    }
+
+    ngOnInit() {
+        this.editorService.startEditing(this.pageId).then(() => {
+            this.ready = true;
+        });
+    }
+}

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

@@ -1,20 +1,39 @@
-<div class="database-wrapper" *ngIf="!notAvailableOffline" (resized)="onResized()">
+<div [ngClass]="fullPage ? 'database-wrapper full-page' : 'database-wrapper'" *ngIf="!notAvailableOffline" (resized)="onResized()">
   <ion-toolbar>
+    <div style="display: flex; flex-direction: row">
       <ion-input
               [readonly]="readonly"
               [(ngModel)]="dbName"
               (ionChange)="onCellValueChanged()"
-            style="font-size: 15pt;"
+              style="flex: 1; font-size: 15pt;"
       ></ion-input>
+      <button
+        style="padding: 0 20px; color: white;"
+        *ngIf="fullPage && (editorService.isSaving || editorService.willSave)"
+        title="Saving..."
+      >
+        <i class="fa fa-spin fa-circle-notch"></i>
+      </button>
+      <button
+        style="padding: 0 20px; color: white;"
+        *ngIf="fullPage && !(editorService.isSaving || editorService.willSave)"
+        title="Changes saved."
+        (click)="editorService.triggerSave()"
+      >
+        <i class="fa fa-check-circle"></i>
+      </button>
+      <button style="padding: 0 20px; color: white;" *ngIf="fullPage" (click)="dismiss()"><i class="fa fa-times"></i></button>
+    </div>
     <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>
+      <ion-button (click)="openDatabase()" *ngIf="!fullPage"><i class="fa fa-external-link-alt" style="padding-right: 10px;"></i> Open</ion-button>
     </ion-buttons>
   </ion-toolbar>
   <div class="grid-wrapper">
     <ag-grid-angular
-      style="width: 100%; height: 500px;"
+      [style]="fullPage ? 'width: 100%; height: 100%;' : 'width: 100%; height: 500px;'"
       [ngClass]="isDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
       [rowData]="rowData"
       [columnDefs]="columnDefs"

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

@@ -9,3 +9,13 @@ div.database-wrapper {
     color: #494949;
   }
 }
+
+.full-page {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .grid-wrapper {
+    flex: 1;
+  }
+}

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

@@ -17,6 +17,7 @@ import {EditorService} from '../../../service/editor.service';
 import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
 import {debounce, debug} from '../../../utility';
 import {DateTimeFilterComponent} from './filters/date-time.filter';
+import {DatabasePageComponent} from './database-page.component';
 
 @Component({
   selector: 'editor-database',
@@ -26,6 +27,7 @@ import {DateTimeFilterComponent} from './filters/date-time.filter';
 export class DatabaseComponent extends EditorNodeContract implements OnInit {
   @Input() nodeId: string;
   @Input() editorUUID?: string;
+  @Input() fullPage = false;
   @ViewChild('agGridElement') agGridElement: AgGridAngular;
 
   frameworkComponents = {
@@ -182,7 +184,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   setColumns(data, triggerSave = true) {
-    this.columnDefs = data.map(x => {
+    this.columnDefs = [{
+      width: 20,
+    }, ...data.map(x => {
       x.editable = !this.readonly;
       x.minWidth = 150;
       x.resizable = true;
@@ -264,7 +268,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
       }
 
       return x;
-    });
+    })];
 
     this.agGridElement.api.setColumnDefs([]);
     this.agGridElement.api.setColumnDefs(this.columnDefs);
@@ -325,7 +329,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   public getSaveColumns() {
-    return this.columnDefs.map(x => {
+    return this.columnDefs.slice(1).map(x => {
       if ( !x.additionalData ) {
         x.additionalData = {};
       }
@@ -394,4 +398,25 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
     this.dirty = false;
   }
+
+  async openDatabase() {
+    const modal = await this.modals.create({
+      component: DatabasePageComponent,
+      componentProps: {
+        nodeId: this.nodeId,
+        pageId: this.editorService.currentPageId,
+      },
+      cssClass: 'modal-big',
+    });
+
+    modal.onDidDismiss().then(() => {
+      this.editorService.reload();
+    });
+
+    await modal.present();
+  }
+
+  dismiss() {
+    this.modals.dismiss();
+  }
 }

src/app/service/editor.service.ts

@@ -56,6 +56,10 @@ export class EditorService {
         this.privTriggerSave();
     }
 
+    public get currentPageId() {
+        return this.currentPage?.UUID;
+    }
+
     public get isSaving() {
         return this.saving;
     }
@@ -111,6 +115,10 @@ export class EditorService {
         return inst;
     }
 
+    async reload() {
+        await this.startEditing(this.currentPageId);
+    }
+
     async startEditing(pageId: string, version?: number) {
         if ( this.currentPage ) {
             await this.stopEditing();