Task #11, Task #6 - add click_link type, saving/restore support to the editor

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

@@ -1,17 +1,12 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>Note Editor</ion-title>
+    <ion-title contenteditable="true" #titleBar>{{ pageRecord.Name }}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
   <ng-container>
-    <div class="editor-buttons">
-      <ion-button class="ion-padding ion-margin">Save</ion-button>
-    </div>
     <div class="editor-root ion-padding">
-      Hello, world!
-
       <div class="host-container ion-padding">
         <editor-host
           #editorHosts
@@ -22,5 +17,9 @@
         ></editor-host>
       </div>
     </div>
+    <div class="editor-buttons">
+      <ion-button (click)="onAddClick()" class="ion-padding ion-margin">Add Node</ion-button>
+      <ion-button (click)="onSaveClick()" class="ion-padding ion-margin">Save</ion-button>
+    </div>
   </ng-container>
 </ion-content>

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

@@ -1,5 +1,7 @@
-import {Component, OnInit, ViewChildren} from '@angular/core';
+import {Component, Host, OnInit, ViewChild, ViewChildren} from '@angular/core';
 import HostRecord from '../../structures/HostRecord';
+import PageRecord from '../../structures/PageRecord';
+import {PageService} from '../../service/page.service';
 
 @Component({
   selector: 'app-editor',
@@ -7,16 +9,43 @@ import HostRecord from '../../structures/HostRecord';
   styleUrls: ['./editor.page.scss'],
 })
 export class EditorPage implements OnInit {
-  public hostRecords: Array<HostRecord> = [new HostRecord('I am a record.')];
+  public hostRecords: Array<HostRecord> = [new HostRecord('Click to edit page...')];
+  public pageRecord: PageRecord = new PageRecord();
 
   @ViewChildren('editorHosts') editorHosts;
+  @ViewChild('titleBar', {static: false}) titleBar;
 
-  constructor() { }
+  constructor(
+    protected pages: PageService,
+  ) { }
 
   ngOnInit() {
     console.log('Editor component: ', this);
   }
 
+  ionViewDidEnter() {
+    const pageId = prompt('What is the ID of the page to load?');
+    this.pages.load(pageId).subscribe(pageRecord => {
+      this.pageRecord = pageRecord;
+      this.pages.get_nodes(pageRecord).subscribe((hosts: Array<HostRecord>) => {
+        this.hostRecords = hosts;
+      });
+    });
+  }
+
+  onAddClick() {
+    this.hostRecords.push(new HostRecord(''));
+    setTimeout(() => {
+      const host = this.editorHosts.toArray().reverse()[0].hostContainer.nativeElement;
+      const s = window.getSelection();
+      const r = document.createRange();
+      r.setStart(host, 0);
+      r.setEnd(host, 0);
+      s.removeAllRanges();
+      s.addRange(r);
+    }, 0);
+  }
+
   onNewHostRequested($event) {
     const insertAfter = this.getIndexFromRecord($event.record);
     const record = new HostRecord('');
@@ -87,4 +116,18 @@ export class EditorPage implements OnInit {
     return index;
   }
 
+  onSaveClick() {
+    this.pageRecord.Name = this.titleBar.el.innerText.trim();
+
+    // First, save the page record itself
+    this.pages.save(this.pageRecord).subscribe(pageRecord => {
+      this.pageRecord = pageRecord;
+
+      // Now, save the nodes
+      this.pages.save_nodes(pageRecord, this.hostRecords).subscribe(result => {
+        this.hostRecords = result;
+      });
+    });
+  }
+
 }