#75 - support searching file box files in global search, open to correct subdir

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

@@ -5,7 +5,7 @@ import {EditorService} from '../../../service/editor.service';
     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>
+            <editor-file-box [nodeId]="nodeId" [editorUUID]="this.editorService.instanceUUID" [fullPage]="true" [boxId]="boxId"></editor-file-box>
         </div>
     `,
     styles: [
@@ -24,6 +24,7 @@ import {EditorService} from '../../../service/editor.service';
 export class FileBoxPageComponent implements OnInit {
     @Input() nodeId: string;
     @Input() pageId: string;
+    @Input() boxId?: string;
 
     public ready = false;
 

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

@@ -40,6 +40,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
     @Input() nodeId: string;
     @Input() editorUUID: string;
     @Input() fullPage = false;
+    @Input() boxId?: string;
     @ViewChild('fileInput') fileInput: ElementRef;
 
     categoryIcons = {
@@ -126,6 +127,17 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
 
         this.fileBoxName = this.record.name;
 
+        if ( this.boxId ) {
+            const targetBox = await this.api.getFileBox(this.page.UUID, this.node.UUID, this.boxId);
+            if ( targetBox ) {
+                const history = await this.api.getFileBoxHistory(this.page.UUID, this.node.UUID, this.boxId);
+                if ( targetBox && Array.isArray(history) ) {
+                    this.history = history;
+                    this.record = targetBox;
+                }
+            }
+        }
+
         await this.loadBox();
 
         if ( this.dirty ) {

src/app/components/search/Search.component.scss

@@ -37,7 +37,7 @@
     }
   }
 
-  &.files {
+  &.files, &.file_box {
     .search-icon {
       color: var(--noded-background-files);
     }
@@ -48,6 +48,60 @@
       color: var(--noded-background-markdown);
     }
   }
+
+  &.file_box-document {
+    .search-icon {
+      color: #4269a5;
+    }
+  }
+
+  &.file_box-spreadsheet {
+    .search-icon {
+      color: #39825a;
+    }
+  }
+
+  &.file_box-presentation {
+    .search-icon {
+      color: #dc6141;
+    }
+  }
+
+  &.file_box-image {
+    .search-icon {
+      color: #cf9f20;
+    }
+  }
+
+  &.file_box-pdf {
+    .search-icon {
+      color: #d32f2f;
+    }
+  }
+
+  &.file_box-video {
+    .search-icon {
+      color: #8049c0;
+    }
+  }
+
+  &.file_box-code {
+    .search-icon {
+      color: #ff4500;
+    }
+  }
+
+  &.file_box-text {
+    .search-icon {
+      color: #444444;
+    }
+  }
+
+  &.file_box-folder {
+    .search-icon {
+      color: #ac9379;
+    }
+  }
 }
 
 .search-assoc {

src/app/components/search/Search.component.ts

@@ -4,13 +4,16 @@ import {ApiService} from '../../service/api.service';
 import {BehaviorSubject} from 'rxjs';
 import {Router} from '@angular/router';
 import {NodeTypeIcons} from '../../structures/node-types';
-import {debounce} from "../../utility";
+import {debounce} from '../../utility';
+import {DatabasePageComponent} from '../editor/database/database-page.component';
+import {FileBoxPageComponent} from '../nodes/file-box/file-box-page.component';
 
 export interface SearchResult {
     title: string;
     short_title: string;
-    type: 'page' | 'node' | 'code';
+    type: string;
     id: string;
+    boxId?: string;
     associated?: {
         title: string,
         type: 'page',
@@ -38,13 +41,13 @@ export class SearchComponent implements OnInit {
     }, 1000);
 
     constructor(
-        protected modal: ModalController,
+        protected ionModalController: ModalController,
         protected api: ApiService,
         protected router: Router,
     ) { }
 
     async dismiss() {
-        await this.modal.dismiss();
+        await this.ionModalController.dismiss();
     }
 
     ngOnInit() {
@@ -68,7 +71,7 @@ export class SearchComponent implements OnInit {
 
     async openResult(result: SearchResult) {
         const nodeTypes = [
-            'node', 'code', 'db', 'files', 'markdown',
+            'node', 'code', 'files', 'markdown',
         ];
 
         if ( result.type === 'page' ) {
@@ -77,6 +80,10 @@ export class SearchComponent implements OnInit {
         } else if ( nodeTypes.includes(result.type) ) {
             await this.router.navigate(['/editor', { id: result.associated.id, node_id: result.id }]);
             await this.dismiss();
+        } else if ( result.type === 'db' ) {
+            await this.openDatabase(result.associated.id, result.id);
+        } else if ( result.type.startsWith('file_box') ) {
+            await this.openFileBox(result.associated.id, result.id, result.boxId);
         }
     }
 
@@ -91,4 +98,45 @@ export class SearchComponent implements OnInit {
             }
         }
     }
+
+    async openDatabase(pageId: string, nodeId: string) {
+        const modal = await this.ionModalController.create({
+            component: DatabasePageComponent,
+            componentProps: {
+                nodeId,
+                pageId,
+            },
+            cssClass: 'modal-big',
+        });
+
+        const modalState = {
+            modal : true,
+            desc : 'Open Database'
+        };
+
+        history.pushState(modalState, null);
+
+        await modal.present();
+    }
+
+    async openFileBox(pageId: string, nodeId: string, boxId?: string) {
+        const modal = await this.ionModalController.create({
+            component: FileBoxPageComponent,
+            componentProps: {
+                nodeId,
+                pageId,
+                boxId,
+            },
+            cssClass: 'modal-big',
+        });
+
+        const modalState = {
+            modal : true,
+            desc : 'Open File Box'
+        };
+
+        history.pushState(modalState, null);
+
+        await modal.present();
+    }
 }

src/app/service/api.service.ts

@@ -1257,6 +1257,21 @@ export class ApiService {
     });
   }
 
+  public getFileBoxHistory(PageId: string, NodeId: string, FileBoxId: string): Promise<any> {
+    return new Promise(async (res, rej) => {
+      if ( this.isOffline ) {
+        return rej(new ResourceNotAvailableOfflineError());
+      }
+
+      this.get(`/file-box/${PageId}/${NodeId}/${FileBoxId}/history`).subscribe({
+        next: async result => {
+          res(result.data);
+        },
+        error: rej,
+      });
+    });
+  }
+
   public getFileBoxFiles(PageId: string, NodeId: string, FileBoxId: string): Promise<any> {
     return new Promise(async (res, rej) => {
       if ( this.isOffline ) {

src/app/structures/node-types.ts

@@ -20,4 +20,15 @@ export const NodeTypeIcons = {
     form_input_multiselect: 'fa fa-check-double noded-form',
     form_input_textarea: 'fa fa-paragraph noded-form',
     form_input_wysiwyg: 'fa fa-quote-right noded-form',
+
+    // Icons specific to uploaded file types
+    'file_box-document': 'fa fa-file-word',
+    'file_box-spreadsheet': 'fa fa-file-excel',
+    'file_box-presentation': 'fa fa-file-powerpoint',
+    'file_box-image': 'fa fa-file-image',
+    'file_box-pdf': 'fa fa-file-pdf',
+    'file_box-video': 'fa fa-file-video',
+    'file_box-code': 'fa fa-file-script',
+    'file_box-text': 'fa fa-file-alt',
+    'file_box-other': 'fa fa-file',
 };