Implement sub-tree sharing; read-only pages

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

@@ -23,7 +23,7 @@
           (mouseenter)="makeVisible(i)"
           (mouseleave)="makeInvisible(i)"
         >
-          <ion-button fill="invisible" color="primary" (click)="onOptionsClick($event, i)">
+          <ion-button fill="invisible" color="primary" (click)="onOptionsClick($event, i)" *ngIf="pageRecord.level !== 'view'">
             <ion-icon
                     name="options"
                     color="medium"
@@ -33,6 +33,7 @@
           <editor-host
             style="width: 100%;"
             #editorHosts
+            [page]="pageRecord"
             [record]="hostRecords[i]"
             (recordChange)="onHostRecordChange($event, i)"
             (newHostRequested)="onNewHostRequested($event)"
@@ -41,7 +42,7 @@
           </editor-host>
         </div>
       </div>
-      <div class="editor-buttons" style="margin-bottom: 50px;">
+      <div class="editor-buttons" style="margin-bottom: 50px;" *ngIf="pageRecord.level !== 'view'">
         <ion-button (click)="onAddClick($event)" class="ion-padding ion-margin-start" fill="outline" color="medium">Add Node</ion-button>
         <ion-button (click)="onSaveClick()" class="ion-padding" fill="outline" color="medium">Save</ion-button>
       </div>

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

@@ -55,7 +55,9 @@ export class EditorPage implements OnInit {
         this.pageRecord = pageRecord;
         this.pages.get_nodes(pageRecord).subscribe((hosts: Array<HostRecord>) => {
           this.hostRecords = hosts;
-          this.onSaveClick();
+          if ( !pageRecord.isViewOnly() ) {
+            this.onSaveClick();
+          }
         });
       });
     } else {
@@ -64,10 +66,16 @@ export class EditorPage implements OnInit {
   }
 
   onHostRecordChange($event, i) {
-    this.hostRecords[i] = $event;
+    if ( !this.pageRecord.isViewOnly() ) {
+      this.hostRecords[i] = $event;
+    }
   }
 
   async onAddClick($event) {
+    if ( this.pageRecord.isViewOnly() ) {
+      return;
+    }
+
     const popover = await this.popover.create({
       component: NodePickerComponent,
       event: $event,
@@ -119,6 +127,10 @@ export class EditorPage implements OnInit {
   }
 
   onNewHostRequested($event) {
+    if ( this.pageRecord.isViewOnly() ) {
+      return;
+    }
+
     const insertAfter = this.getIndexFromRecord($event.record);
     const record = new HostRecord('');
     const newHosts = []
@@ -137,6 +149,10 @@ export class EditorPage implements OnInit {
   }
 
   onDestroyHostRequested($event) {
+    if ( this.pageRecord.isViewOnly() ) {
+      return;
+    }
+
     let removedIndex = 0;
     const newHostRecords = this.editorHosts.filter((host, i) => {
       if ( $event.record === host.record ) {
@@ -158,8 +174,6 @@ export class EditorPage implements OnInit {
         focusIndex = removedIndex - 1;
       }
 
-      console.log({removedIndex, focusIndex, edHArr: this.editorHosts.toArray()});
-
       if ( focusIndex >= 0 ) {
         this.editorHosts.toArray()[focusIndex].takeFocus(false);
       }
@@ -177,6 +191,10 @@ export class EditorPage implements OnInit {
   }
 
   onSaveClick() {
+    if ( this.pageRecord.isViewOnly() ) {
+      return;
+    }
+
     this.loader.create({message: 'Saving changes...'}).then(loader => {
       loader.present().then(() => {
         this.pageRecord.Name = this.titleBar.el.innerText.trim();
@@ -196,6 +214,10 @@ export class EditorPage implements OnInit {
   }
 
   async onOptionsClick($event, i) {
+    if ( this.pageRecord.isViewOnly() ) {
+      return;
+    }
+
     const popover = await this.popover.create({
       component: HostOptionsComponent,
       event: $event,
@@ -208,7 +230,6 @@ export class EditorPage implements OnInit {
     });
 
     popover.onDidDismiss().then((result) => {
-      console.log({result});
       if ( result.data === 'delete_node' ) {
         $event.record = this.hostRecords[i];
         this.onDestroyHostRequested($event);