Refactor support for the files component

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

@@ -4,7 +4,6 @@
             <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
             <input type="hidden" name="redirectTo" [value]="getReturnUrl()">
             <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">

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

@@ -4,38 +4,106 @@ import {ApiService} from '../../../service/api.service';
 import {AlertController} from '@ionic/angular';
 import {Observable} from 'rxjs';
 import { APP_BASE_HREF } from '@angular/common';
+import {EditorService} from '../../../service/editor.service';
+import {EditorNodeContract} from '../../nodes/EditorNode.contract';
 
 @Component({
   selector: 'editor-files',
   templateUrl: './files.component.html',
   styleUrls: ['./files.component.scss'],
 })
-export class FilesComponent implements OnInit {
+export class FilesComponent extends EditorNodeContract implements OnInit {
-  @Input() readonly = false;
+  @Input() nodeId: string;
-  @Input() hostRecord: HostRecord;
-  @Output() hostRecordChange = new EventEmitter<HostRecord>();
-  @Output() requestParentSave = new EventEmitter<FilesComponent>();
-  @Output() requestParentDelete = new EventEmitter<FilesComponent>();
   @ViewChild('uploadForm') uploadForm: ElementRef;
+  // @Input() readonly = false;
+  // @Input() hostRecord: HostRecord;
+  // @Output() hostRecordChange = new EventEmitter<HostRecord>();
+  // @Output() requestParentSave = new EventEmitter<FilesComponent>();
+  // @Output() requestParentDelete = new EventEmitter<FilesComponent>();
 
   public fileRecords: Array<any> = [];
   public pendingSetup = true;
   public dbRecord: any = {};
+  public dirty = false;
+
+  public get readonly() {
+    return !this.node || !this.editorService.canEdit();
+  }
 
   constructor(
       protected api: ApiService,
       protected alerts: AlertController,
+      public readonly editorService: EditorService,
       @Inject(APP_BASE_HREF) private baseHref: string
-  ) { }
+  ) { super(); }
+
+  public isDirty(): boolean | Promise<boolean> {
+    return this.dirty;
+  }
+
+  public writeChangesToNode(): void | Promise<void> {
+    this.node.Value.Mode = 'files';
+  }
+
+  public needsLoad(): boolean | Promise<boolean> {
+    return this.node && this.pendingSetup;
+  }
+
+  public async performLoad(): Promise<void> {
+    if ( !this.node.Value ) {
+      this.node.Value = {};
+    }
+
+    if ( !this.node.Value.Value && !this.readonly ) {
+      await new Promise((res, rej) => {
+        this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
+          next: result => {
+            this.dbRecord = result.data;
+            this.fileRecords = result.data.files;
+            this.node.Value.Mode = 'files';
+            this.node.Value.Value = result.data.UUID;
+            this.node.value = result.data.UUID;
+            this.dirty = true;
+            res();
+          },
+          error: rej,
+        });
+      });
+    } else {
+      await new Promise((res, rej) => {
+        this.api.get(`/files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
+          next: result => {
+            this.dbRecord = result.data;
+            this.fileRecords = result.data.files;
+            res();
+          },
+          error: rej,
+        });
+      });
+    }
+
+    this.pendingSetup = false;
+  }
+
+  public async performDelete(): Promise<void> {
+    await new Promise((res, rej) => {
+      this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
+        next: result => {
+          res();
+        },
+        error: rej,
+      });
+    });
+  }
 
   ngOnInit() {
-    this.getInitObservable().subscribe(() => {
+    this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
 
     });
   }
 
   getApiSubmit() {
-    return this.api._build_url(`file/upload/${this.hostRecord.PageId}/${this.hostRecord.UUID}/${this.hostRecord.Value.Value}`);
+    return this.api._build_url(`file/upload/${this.page.UUID}/${this.node.UUID}/${this.node.Value.Value}`);
   }
 
   onSubmitClick() {
@@ -47,73 +115,11 @@ export class FilesComponent implements OnInit {
   }
 
   getReturnUrl() {
-    return `${this.baseHref}editor;id=${this.hostRecord.PageId}`;
+    return `${this.baseHref}editor;id=${this.page.UUID}`;
   }
 
   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');
+    window.open(this.api._build_url(`files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}/${fileRecord._id}`), '_blank');
   }
-
-  async onDestroyClick() {
-    if ( this.readonly ) {
-      return;
-    }
-
-    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.readonly ) {
-          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/pages/editor/editor.page.html

@@ -37,6 +37,9 @@
           <ng-container *ngIf="node.type === 'code_ref'">
             <editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
           </ng-container>
+          <ng-container *ngIf="node.type === 'file_ref'">
+            <editor-files style="flex: 1;" [nodeId]="node.UUID"></editor-files>
+          </ng-container>
         </div>
         <button class="host-add-button" (click)="onAddClick($event)">
           <i class="fa fa-plus"></i> Add Node