Add file uploader support

src/app/app.component.html

@@ -10,8 +10,10 @@
       <ion-content>
         <ion-list>
           <ion-list-header>
-            Navigate
+            <ion-buttons class="ion-padding-start">
-            <ion-buttons class="ion-padding-end">
+              <ion-button fill="outline" [color]="refreshingMenu ? 'success' : 'light'" (click)="onMenuRefresh()">
+                <ion-icon color="tertiary" name="refresh"></ion-icon>
+              </ion-button>
               <ion-button fill="outline" color="light" (click)="onTopLevelCreate()">
                 <ion-icon color="primary" name="add-circle"></ion-icon>
               </ion-button>
@@ -50,4 +52,4 @@
       </ion-content>
     </div>
   </ion-split-pane>
-</ion-app>
+</ion-app>

src/app/app.component.ts

@@ -16,18 +16,17 @@ import { Observable } from 'rxjs';
 export class AppComponent implements OnInit {
   public addChildTarget: any = false;
   public deleteTarget: any = false;
+  public refreshingMenu = false;
   public lastClickEvent: Array<any> = [];
   public nodes = [];
   public options = {
     actionMapping: {
       mouse: {
         dblClick: (tree, node, $event) => {
-          console.log({ tree, node, $event });
           const id = node.data.id;
           this.router.navigate(['/editor', { id }]);
         },
         click: (tree, node, $event) => {
-          console.log('click', { tree, node, $event });
           TREE_ACTIONS.FOCUS(tree, node, $event);
           this.addChildTarget = node;
           this.deleteTarget = node;
@@ -158,6 +157,14 @@ export class AppComponent implements OnInit {
     await alert.present();
   }
 
+  onMenuRefresh() {
+    this.refreshingMenu = true;
+    this.reloadMenuItems().subscribe();
+    setTimeout(() => {
+      this.refreshingMenu = false;
+    }, 2000);
+  }
+
   reloadMenuItems() {
     return new Observable(sub => {
       this.api.get('/menu/items').subscribe(result => {
@@ -178,7 +185,6 @@ export class AppComponent implements OnInit {
   toggleDark() {
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
     this.darkMode = !this.darkMode;
-    console.log('toggel Dark mode');
     document.body.classList.toggle('dark', this.darkMode);
   }
 

src/app/components/components.module.ts

@@ -9,11 +9,12 @@ import {ColumnsComponent} from './editor/database/columns/columns.component';
 import {FormsModule} from '@angular/forms';
 import {CodeComponent} from './editor/code/code.component';
 import {MonacoEditorModule} from 'ngx-monaco-editor';
+import {FilesComponent} from './editor/files/files.component';
 
 @NgModule({
-  declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent],
+  declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent],
   imports: [CommonModule, IonicModule, AgGridModule, FormsModule, MonacoEditorModule],
-  entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent],
+  entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent],
-  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent]
+  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent]
 })
 export class ComponentsModule {}

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

@@ -35,17 +35,19 @@ export class DatabaseComponent implements OnInit {
   rowData = [];
 
   ngOnInit() {
-    this.loader.create({message: 'Loading database...'}).then(loader => {
+    // this.loader.create({message: 'Loading database...'}).then(loader => {
-      loader.present().then(() => {
+      // setTimeout(() => {
+      //   loader.present().then(() => {
         this.getInitObservable().subscribe(() => {
           this.getColumnLoadObservable().subscribe(() => {
             this.getDataLoadObservable().subscribe(() => {
-              loader.dismiss();
+              // loader.dismiss();
             });
           });
         });
-      });
+        // });
-    });
+      // }, 100);
+    // });
   }
 
   onCellValueChanged() {
@@ -80,7 +82,7 @@ export class DatabaseComponent implements OnInit {
         });
         const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns`
         this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
-          this.columnDefs = res.data;
+          // this.columnDefs = res.data;
         });
       }
     });
@@ -202,7 +204,7 @@ export class DatabaseComponent implements OnInit {
 
   getInitObservable(): Observable<any> {
     return new Observable<any>(sub => {
-      if ( this.hostRecord && this.pendingSetup ) {
+      if ( this.hostRecord.UUID && this.pendingSetup ) {
         if ( !this.hostRecord.Value ) {
           this.hostRecord.Value = {};
         }

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

@@ -0,0 +1,23 @@
+<div class="files-wrapper">
+    <div class="new-uploads" style="margin: 20px;">
+        <form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
+            <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
+            <ion-button (click)="onSubmitClick()" type="submit" fill="outline" class="ion-margin-start">Upload</ion-button>
+            <ion-button (click)="onDestroyClick()" type="submit" fill="outline" class="ion-margin-start" color="danger">Drop Files</ion-button>
+        </form>
+    </div>
+    <div class="existing-uploads">
+        <ion-grid>
+            <ion-row>
+                <ion-col *ngFor="let upload of fileRecords; let i = index" size-xl="4" size-lg="6" size-md="12">
+                    <ion-card>
+                        <ion-item>
+                            <ion-label>{{ fileRecords[i].original_name }}</ion-label>
+                            <ion-button (click)="downloadFile(fileRecords[i])" fill="outline" color="lighter" slot="end"><ion-icon color="primary" name="arrow-down"></ion-icon></ion-button>
+                        </ion-item>
+                    </ion-card>
+                </ion-col>
+            </ion-row>
+        </ion-grid>
+    </div>
+</div>

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

@@ -0,0 +1,4 @@
+div.files-wrapper {
+  border: 2px solid #8c8c8c;
+  border-radius: 3px;
+}

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

@@ -0,0 +1,104 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import HostRecord from '../../../structures/HostRecord';
+import {ApiService} from '../../../service/api.service';
+import {AlertController} from '@ionic/angular';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'editor-files',
+  templateUrl: './files.component.html',
+  styleUrls: ['./files.component.scss'],
+})
+export class FilesComponent implements OnInit {
+  @Input() hostRecord: HostRecord;
+  @Output() hostRecordChange = new EventEmitter<HostRecord>();
+  @Output() requestParentSave = new EventEmitter<FilesComponent>();
+  @Output() requestParentDelete = new EventEmitter<FilesComponent>();
+  @ViewChild('uploadForm', {static: false}) uploadForm: ElementRef;
+
+  public fileRecords: Array<any> = [];
+  public pendingSetup = true;
+  public dbRecord: any = {};
+
+  constructor(
+      protected api: ApiService,
+      protected alerts: AlertController,
+  ) { }
+
+  ngOnInit() {
+    this.getInitObservable().subscribe(() => {
+
+    });
+  }
+
+  getApiSubmit() {
+    return this.api._build_url(`file/upload/${this.hostRecord.PageId}/${this.hostRecord.UUID}/${this.hostRecord.Value.Value}`);
+  }
+
+  onSubmitClick() {
+    this.uploadForm.nativeElement.submit();
+  }
+
+  downloadFile(fileRecord) {
+    // tslint:disable-next-line:max-line-length
+    window.open(this.api._build_url(`files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/${fileRecord._id}`), '_blank');
+  }
+
+  async onDestroyClick() {
+    const alert = await this.alerts.create({
+      header: 'Are you sure?',
+      message: 'You are about to delete these files. This action cannot be undone.',
+      buttons: [
+        {
+          text: 'Keep Them',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete Them',
+          handler: async () => {
+            this.api.post(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/delete/${this.hostRecord.Value.Value}`)
+                .subscribe(res => {
+              this.requestParentDelete.emit(this);
+            });
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+  }
+
+  getInitObservable(): Observable<any> {
+    return new Observable<any>(sub => {
+      if ( this.hostRecord && this.pendingSetup ) {
+        if ( !this.hostRecord.Value ) {
+          this.hostRecord.Value = {};
+        }
+
+        if ( !this.hostRecord.Value.Value ) {
+          this.api.post(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
+            this.dbRecord = res.data;
+            this.fileRecords = res.data.files;
+            this.hostRecord.Value.Mode = 'files';
+            this.hostRecord.Value.Value = res.data.UUID;
+            this.hostRecord.value = res.data.UUID;
+            this.hostRecordChange.emit(this.hostRecord);
+            this.pendingSetup = false;
+            sub.next(true);
+            sub.complete();
+          });
+        } else {
+          this.api.get(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
+            this.fileRecords = res.data.files;
+            this.pendingSetup = false;
+            sub.next(true);
+            sub.complete();
+          });
+        }
+      } else {
+        this.pendingSetup = true;
+      }
+    });
+  }
+
+}

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

@@ -42,4 +42,12 @@
       (requestParentDelete)="onRequestDelete($event)"
     ></editor-code>
   </div>
+  <div class="files-wrapper" *ngIf="record.type === 'file_ref'">
+    <editor-files
+      [hostRecord]="record"
+      (hostRecordChange)="onRecordChange($event)"
+      (requestParentSave)="onRequestParentSave($event)"
+      (requestParentDelete)="onRequestDelete($event)"
+    ></editor-files>
+  </div>
 </ng-container>

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

@@ -70,7 +70,6 @@ export class HostComponent implements OnInit {
   }
 
   onLIKeyUp($event, i) {
-    console.log({$event});
     if ( $event.code === 'Enter' ) {
       /*const newListLines = [];
       this.liItems.forEach((li, index) => {

src/app/components/editor/node-picker/node-picker.component.html

@@ -35,4 +35,8 @@
     <ion-icon slot="start" name="code"></ion-icon>
     <ion-label>Code Editor</ion-label>
   </ion-item>
+  <ion-item button (click)="onSelect('file_ref')">
+    <ion-icon slot="start" name="document"></ion-icon>
+    <ion-label>Upload Files</ion-label>
+  </ion-item>
 </ion-list>

src/app/pages/editor/editor.page.ts

@@ -29,8 +29,6 @@ export class EditorPage implements OnInit {
     this.route.params.subscribe(params => {
       this.pageId = params.id;
     });
-
-    console.log('editor page', this);
   }
 
   ngOnInit() {}
@@ -41,6 +39,7 @@ export class EditorPage implements OnInit {
         this.pageRecord = pageRecord;
         this.pages.get_nodes(pageRecord).subscribe((hosts: Array<HostRecord>) => {
           this.hostRecords = hosts;
+          this.onSaveClick();
         });
       });
     } else {
@@ -59,10 +58,8 @@ export class EditorPage implements OnInit {
     });
 
     popover.onDidDismiss().then(arg => {
-      console.log({arg});
       const defValue = this.getDefaultValue(arg.data);
       const hostRec = new HostRecord(defValue);
-      console.log({hostRec});
       hostRec.type = arg.data;
       hostRec.PageId = this.pageRecord.UUID;
       this.hostRecords.push(hostRec);

src/app/service/api.service.ts

@@ -48,7 +48,7 @@ export class ApiService {
     });
   }
 
-  private _build_url(endpoint) {
+  public _build_url(endpoint) {
     if ( !endpoint.startsWith('/') ) {
       endpoint = `/${endpoint}`;
     }

src/app/service/page.service.ts

@@ -52,7 +52,6 @@ export class PageService {
   }
 
   save_nodes(page: PageRecord, nodes: Array<HostRecord>): Observable<Array<HostRecord>> {
-    console.log('save nodes', {nodes})
     return new Observable<Array<HostRecord>>(sub => {
       nodes = nodes.map(x => {
         x.PageId = page.UUID;