Convert code editor to new format

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

@@ -7,7 +7,7 @@
         </ion-select>
       </ion-item>
   </ion-toolbar>
-  <div class="ed-wrapper" style="width: 100%; height: 480px;">
+  <div class="ed-wrapper" style="width: 100%; height: 540px;">
     <ngx-monaco-editor style="width: 100%; height: 100%;"
       [options]="editorOptions"
       [(ngModel)]="editorValue"
@@ -15,10 +15,4 @@
       #theEditor
     ></ngx-monaco-editor>
   </div>
-  <ion-toolbar *ngIf="!readonly">
-    <ion-buttons slot="end">
-      <ion-button (click)="onDropClick()"><ion-icon name="alert" color="danger"></ion-icon>&nbsp;Drop Editor</ion-button>
-      <ion-button (click)="onSaveClick()"><ion-icon name="save" [color]="dirty ? 'warning' : 'success'"></ion-icon>&nbsp;Save Changes</ion-button>
-    </ion-buttons>
-  </ion-toolbar>
 </div>

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

@@ -1,26 +1,30 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {v4} from 'uuid';
-import HostRecord from '../../../structures/HostRecord';
-import {Observable} from 'rxjs';
 import {ApiService} from '../../../service/api.service';
-import {AlertController, LoadingController} from '@ionic/angular';
+import {EditorNodeContract} from '../../nodes/EditorNode.contract';
+import {EditorService} from '../../../service/editor.service';
 
 @Component({
     selector: 'editor-code',
     templateUrl: './code.component.html',
     styleUrls: ['./code.component.scss'],
 })
-export class CodeComponent implements OnInit {
+export class CodeComponent extends EditorNodeContract implements OnInit {
-  @Input() readonly = false;
+    @Input() nodeId: string;
-  @Input() hostRecord: HostRecord;
-  @Output() hostRecordChange = new EventEmitter<HostRecord>();
-  @Output() requestParentSave = new EventEmitter<CodeComponent>();
-  @Output() requestParentDelete = new EventEmitter<CodeComponent>();
-  @ViewChild('theEditor') theEditor;
-
     public dirty = false;
-  public pendingSetup = true;
     protected dbRecord: any = {};
+    protected codeRefId!: string;
+
+    public editorOptions = {
+        language: 'javascript',
+        uri: v4(),
+        readOnly: false,
+    };
+
+    public editorValue = '';
+    public get readonly() {
+        return !this.node || !this.editorService.canEdit();
+    }
 
     public languageOptions: Array<string> = [
         'ABAP',
@@ -87,109 +91,109 @@ export class CodeComponent implements OnInit {
         'XML',
         'YAML',
     ];
-
+    protected hadLoad = false;
-  public editorOptions = {
-    language: 'javascript',
-    uri: v4(),
-    readOnly: this.readonly,
-  };
-  public editorValue = '';
 
     constructor(
-      protected api: ApiService,
+        public readonly editorService: EditorService,
-      protected loader: LoadingController,
+        public readonly api: ApiService,
-      protected alerts: AlertController,
+    ) { super(); }
-  ) { }
 
-  ngOnInit() {
+    public isDirty(): boolean | Promise<boolean> {
-    this.loader.create({message: 'Loading code...'}).then(loader => {
+        return this.dirty;
-        loader.present().then(() => {
+    }
-            this.getInitObservable().subscribe(() => {
+
-                this.editorOptions.language = this.dbRecord.Language;
+    public needsSave(): boolean | Promise<boolean> {
-                this.editorOptions.readOnly = this.readonly;
+        return this.dirty;
-                this.onSelectChange(false);
-                loader.dismiss();
-            });
-        });
-    });
     }
 
-  getInitObservable(): Observable<any> {
+    public writeChangesToNode(): void | Promise<void> {
-    return new Observable<any>(sub => {
+        this.node.Value.Mode = 'code';
-      if ( this.hostRecord && this.pendingSetup ) {
+        this.node.Value.Value = this.codeRefId;
-        if ( !this.hostRecord.Value ) {
+        this.node.value = this.codeRefId;
-            this.hostRecord.Value = {};
     }
 
-        if ( !this.hostRecord.Value.Value && !this.readonly ) {
+    public needsLoad(): boolean | Promise<boolean> {
-          this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
+        return this.node && !this.hadLoad;
-            this.dbRecord = res.data;
+    }
-            this.hostRecord.Value.Mode = 'code';
+
-            this.hostRecord.Value.Value = res.data.UUID;
+    public performLoad(): void | Promise<void> {
-            this.hostRecord.value = res.data.UUID;
+        return new Promise((res, rej) => {
-            this.hostRecordChange.emit(this.hostRecord);
+            if ( !this.node.Value ) {
-            this.pendingSetup = false;
+                this.node.Value = {};
-            sub.next(true);
+            }
-            sub.complete();
+
+            if ( !this.node.Value.Value && this.editorService.canEdit() ) {
+                this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
+                    next: result => {
+                        this.dbRecord = result.data;
+                        this.node.Value.Mode = 'code';
+                        this.node.Value.Value = result.data.UUID;
+                        this.node.value = result.data.UUID;
+                        this.codeRefId = result.data.UUID;
+                        this.editorOptions.readOnly = this.readonly;
+                        this.onSelectChange(false);
+                        this.hadLoad = true;
+                        res();
+                    },
+                    error: rej,
                 });
             } else {
-            this.api.get(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
+                this.api.get(`/code/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
-                this.dbRecord = res.data;
+                    next: result => {
+                        this.dbRecord = result.data;
+                        this.initialValue = this.dbRecord.code;
                         this.editorValue = this.dbRecord.code;
                         this.editorOptions.language = this.dbRecord.Language;
-                this.pendingSetup = false;
+                        this.codeRefId = this.node.Value.Value;
-                sub.next(true);
+                        this.editorOptions.readOnly = this.readonly;
-                sub.complete();
+                        this.onSelectChange(false);
+                        this.hadLoad = true;
+                        res();
+                    },
+                    error: rej,
                 });
             }
-      } else {
-          this.pendingSetup = true;
-      }
         });
     }
 
-  onSaveClick() {
+    public performSave(): void | Promise<void> {
-      if ( this.readonly ) {
+        if ( !this.editorService.canEdit() ) {
             return;
         }
 
+        return new Promise((res, rej) => {
             this.dbRecord.code = this.editorValue;
             this.dbRecord.Language = this.editorOptions.language;
-      this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}`, this.dbRecord)
+
-          .subscribe(res => {
+            this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}`, this.dbRecord)
-        this.dbRecord = res.data;
+                .subscribe({
+                    next: result => {
+                        this.dbRecord = result.data;
                         this.editorOptions.language = this.dbRecord.Language;
                         this.editorValue = this.dbRecord.code;
                         this.dirty = false;
+                        res();
+                    },
+                    error: rej,
+                });
         });
     }
 
-  async onDropClick() {
+    public performDelete(): void | Promise<void> {
-      if ( this.readonly ) {
+        return new Promise((res, rej) => {
-          return;
+            this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
-      }
+                next: result => {
-
+                    res();
-      const alert = await this.alerts.create({
-          header: 'Are you sure?',
-          message: `You are about to delete this code. This action cannot be undone.`,
-          buttons: [
-              {
-                  text: 'Keep It',
-                  role: 'cancel',
                 },
-              {
+                error: rej,
-                  text: 'Delete It',
-                  handler: async () => {
-                      this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/delete/${this.hostRecord.Value.Value}`)
-                          .subscribe(res => {
-                          this.requestParentDelete.emit(this);
             });
-                  },
-              },
-          ],
         });
+    }
 
-      await alert.present();
+    ngOnInit() {
+        this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
+            this.editorOptions.readOnly = !this.editorService.canEdit();
+        });
     }
 
     public onEditorModelChange($event) {
@@ -198,12 +202,11 @@ export class CodeComponent implements OnInit {
         }
     }
 
-  onSelectChange(updateDbRecord = true) {
+    public onSelectChange(updateDbRecord = true) {
         if ( updateDbRecord ) {
             this.dbRecord.Language = this.editorOptions.language;
         }
 
         this.editorOptions = {...this.editorOptions};
     }
-
 }

src/app/pages/editor/editor.page.html

@@ -19,11 +19,11 @@
       <div class="editor-root ion-padding">
         <div
           class="host-container"
-          style="display: flex;"
+          style="display: flex; margin-bottom: 20px;"
           *ngFor="let node of editorService.immutableNodes"
         >
           <div class="host-icons">
-            <i class="type-icon norm fa" [ngClass]="typeIcons.norm" title="WYSIWYG Node"></i>
+            <i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : node.type)" title="WYSIWYG Node"></i>
             <button (click)="onOptionsClick($event, node)">
               <i class="fa fa-ellipsis-v" title="Node options"></i>
             </button>
@@ -31,6 +31,9 @@
           <ng-container *ngIf="node.isNorm()">
             <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
           </ng-container>
+          <ng-container *ngIf="node.type === 'code_ref'">
+            <editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
+          </ng-container>
         </div>
         <button class="host-add-button" (click)="onAddClick($event)">
           <i class="fa fa-plus"></i> Add Node

src/app/pages/editor/editor.page.scss

@@ -15,10 +15,19 @@ ion-icon.invisible {
 
 .type-icon {
   margin-bottom: 15px;
+  margin-top: 15px;
 
-  &.norm {
+  &.node {
     color: var(--noded-background-node);
   }
+
+  &.code_ref {
+    color: var(--noded-background-code);
+  }
+
+  &.db {
+    color: var(--noded-background-db);
+  }
 }
 
 .host-add-button {

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

@@ -24,6 +24,7 @@ export class EditorPage implements OnInit {
     page: 'fa fa-sticky-note',
     db: 'fa fa-database',
     code: 'fa fa-code',
+    code_ref: 'fa fa-code',
   };
 
   @Input() pageId: string;