#77 - support opening file box in full screen mode

src/app/components/components.module.ts

@@ -47,6 +47,7 @@ import {FormInputComponent} from './nodes/form-input/form-input.component';
 import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-options.component';
 import {DatabaseLinkComponent} from './editor/forms/database-link.component';
 import {FileBoxComponent} from './nodes/file-box/file-box.component';
+import {FileBoxPageComponent} from './nodes/file-box/file-box-page.component';
 
 @NgModule({
   declarations: [
@@ -87,6 +88,7 @@ import {FileBoxComponent} from './nodes/file-box/file-box.component';
     FormInputOptionsComponent,
     DatabaseLinkComponent,
     FileBoxComponent,
+    FileBoxPageComponent,
   ],
   imports: [
     CommonModule,
@@ -140,6 +142,7 @@ import {FileBoxComponent} from './nodes/file-box/file-box.component';
     FormInputOptionsComponent,
     DatabaseLinkComponent,
     FileBoxComponent,
+    FileBoxPageComponent,
   ],
   exports: [
     NodePickerComponent,
@@ -179,6 +182,7 @@ import {FileBoxComponent} from './nodes/file-box/file-box.component';
     FormInputOptionsComponent,
     DatabaseLinkComponent,
     FileBoxComponent,
+    FileBoxPageComponent,
   ]
 })
 export class ComponentsModule {}

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

@@ -487,6 +487,13 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
       this.editorService.reload();
     });
 
+    const modalState = {
+      modal : true,
+      desc : 'Open Database'
+    };
+
+    history.pushState(modalState, null);
+
     await modal.present();
   }
 

src/app/components/nodes/file-box/file-box-page.component.ts

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {EditorService} from '../../../service/editor.service';
+
+@Component({
+    selector: 'noded-file-box-page',
+    template: `
+        <div class="container" *ngIf="ready">
+            <editor-file-box [nodeId]="nodeId" [editorUUID]="this.editorService.instanceUUID" [fullPage]="true"></editor-file-box>
+        </div>
+    `,
+    styles: [
+        `
+            .container {
+                height: 100%;
+            }
+
+            editor-database {
+                height: 100%;
+                display: flex;
+            }
+        `,
+    ],
+})
+export class FileBoxPageComponent 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/nodes/file-box/file-box.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="'file-box-wrapper ' + (isDark() ? 'dark' : '')" *ngIf="!notAvailableOffline">
+<div [ngClass]="'file-box-wrapper' + (isDark() ? ' dark' : '') + (fullPage ? ' full-page' : '')" *ngIf="!notAvailableOffline">
     <ion-toolbar>
         <div style="display: flex; flex-direction: row">
             <button
@@ -15,10 +15,17 @@
                 (change)="onRecordNameChange($event)"
                 style="flex: 1; font-size: 15pt;"
             ></ion-input>
+            <button
+                class="close"
+                *ngIf="fullPage"
+                title="Close"
+                (click)="dismiss()"
+            ><i class="fa fa-times"></i></button>
         </div>
         <ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
             <ion-button (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button>
             <ion-button (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button>
+            <ion-button (click)="openFileBox()" *ngIf="!fullPage"><i class="fa fa-external-link-alt"></i>&nbsp;&nbsp;Open</ion-button>
 
             <div class="buffer"></div>
 

src/app/components/nodes/file-box/file-box.component.scss

@@ -102,14 +102,23 @@ div.file-box-wrapper {
 }
 
 .file-box-wrapper.dark {
+  color: white;
+  display: flex;
+  flex-direction: column;
+
   .content-wrapper {
     background: #222;
+    flex: 1;
 
     .empty-text {
       color: #ccc;
     }
   }
 
+  .close {
+    padding: 0 20px;
+  }
+
   .item {
     background: #393939;
 
@@ -132,3 +141,8 @@ div.file-box-wrapper {
     }
   }
 }
+
+.file-box-wrapper.full-page {
+  margin: 0;
+  height: 100%;
+}

src/app/components/nodes/file-box/file-box.component.ts

@@ -1,12 +1,13 @@
 import {Component, ElementRef, Inject, Input, OnInit, ViewChild} from '@angular/core';
-import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api.service';
+import {ApiService} from '../../../service/api.service';
-import { APP_BASE_HREF } from '@angular/common';
+import {APP_BASE_HREF} from '@angular/common';
 import {EditorService} from '../../../service/editor.service';
 import {EditorNodeContract} from '../EditorNode.contract';
 import {HttpClient} from '@angular/common/http';
-import {AlertController, LoadingController, PopoverController} from '@ionic/angular';
+import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular';
 import {OptionMenuComponent} from '../../option-menu/option-menu.component';
-import {NavigationService} from "../../../service/navigation.service";
+import {NavigationService} from '../../../service/navigation.service';
+import {FileBoxPageComponent} from './file-box-page.component';
 
 export interface FileBoxFile {
     type: 'file';
@@ -38,6 +39,7 @@ export type FileBoxItem = FileBoxFile | FileBoxRecord;
 export class FileBoxComponent extends EditorNodeContract implements OnInit {
     @Input() nodeId: string;
     @Input() editorUUID: string;
+    @Input() fullPage = false;
     @ViewChild('fileInput') fileInput: ElementRef;
 
     categoryIcons = {
@@ -57,12 +59,10 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
     public notAvailableOffline = false;
     public fileBoxName = 'New File Box';
     public record?: FileBoxRecord;
-
+    private deferredUIActivation = false;
     public quickFilterValue?: string;
     public visibleFilterItems?: FileBoxItem[];
-
     public history: FileBoxRecord[] = [];
-
     public items: FileBoxItem[] = [];
 
     public get readonly() {
@@ -77,6 +77,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
         protected popover: PopoverController,
         protected alerts: AlertController,
         protected navService: NavigationService,
+        protected modals: ModalController,
         @Inject(APP_BASE_HREF) private baseHref: string
     ) { super(); }
 
@@ -135,6 +136,10 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
         }
 
         this.pendingSetup = false;
+
+        if ( this.deferredUIActivation ) {
+            await this.performUIActivation();
+        }
     }
 
     public async loadBox(): Promise<void> {
@@ -479,4 +484,48 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
             this.visibleFilterItems = undefined;
         }
     }
+
+    async openFileBox() {
+        const modal = await this.modals.create({
+            component: FileBoxPageComponent,
+            componentProps: {
+                nodeId: this.nodeId,
+                pageId: this.editorService.currentPageId,
+            },
+            cssClass: 'modal-big',
+        });
+
+        modal.onDidDismiss().then(() => {
+            this.record = this.history.length > 0 ? this.history[0] : this.record;
+            this.history = [];
+            this.loadBox();
+        });
+
+        const modalState = {
+            modal : true,
+            desc : 'Open File Box'
+        };
+
+        history.pushState(modalState, null);
+
+        await modal.present();
+    }
+
+    async dismiss() {
+        if ( this.fullPage ) {
+            await this.modals.dismiss();
+        }
+    }
+
+    performUIActivation() {
+        if ( this.deferredUIActivation ) {
+            this.deferredUIActivation = false;
+        }
+
+        if ( !this.pendingSetup ) {
+            return this.openFileBox();
+        } else {
+            this.deferredUIActivation = true;
+        }
+    }
 }