Start page versions modal

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

@@ -12,10 +12,18 @@
         ></ion-input>
       </ion-title>
       <ion-buttons slot="end">
-        <button class="save-button" (click)="editorService.triggerSave()" title="Manually save this note">
+        <button
+          class="save-button"
+          (click)="editorService.triggerSave()"
+          title="Manually save this note"
+          *ngIf="editorService.isEditing && editorService.canEdit()"
+        >
           <i *ngIf="!(editorService.isSaving || editorService.willSave)" class="fa fa-check-circle"></i>
           {{ (editorService.isSaving || editorService.willSave) ? 'Saving...' : 'Saved!' }}
         </button>
+        <ion-button *ngIf="editorService.isEditing && editorService.canEdit()" title="More page options" (click)="onPageMenuClick($event)">
+          <i class="fa fa-ellipsis-v"></i>
+        </ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>

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

@@ -1,11 +1,13 @@
 import {Component, HostListener, Input, OnInit} from '@angular/core';
 import HostRecord from '../../structures/HostRecord';
 import {ActivatedRoute, Router} from '@angular/router';
-import {AlertController, LoadingController, PopoverController} from '@ionic/angular';
+import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular';
 import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component';
 import {HostOptionsComponent} from '../../components/editor/host-options/host-options.component';
 import {EditorService} from '../../service/editor.service';
 import {NodeTypeIcons} from '../../structures/node-types';
+import {OptionMenuComponent} from '../../components/option-menu/option-menu.component';
+import {VersionModalComponent} from "../../components/version-modal/version-modal.component";
 
 @Component({
   selector: 'app-editor',
@@ -22,6 +24,7 @@ export class EditorPage implements OnInit {
     protected loader: LoadingController,
     protected popover: PopoverController,
     protected alerts: AlertController,
+    protected modals: ModalController,
     public readonly editorService: EditorService,
   ) {
     this.route.params.subscribe(params => {
@@ -86,9 +89,9 @@ export class EditorPage implements OnInit {
       } else if ( value === 'move_down' ) {
         this.editorService.moveNode(node, 'down');
       } else if ( value === 'add_before' ) {
-        this.onAddClick(dismissEvent, 'before', node.UUID);
+        this.onAddClick(event, 'before', node.UUID);
       } else if ( value === 'add_after' ) {
-        this.onAddClick(dismissEvent, 'after', node.UUID);
+        this.onAddClick(event, 'after', node.UUID);
       }
     });
 
@@ -115,4 +118,43 @@ export class EditorPage implements OnInit {
 
     await popover.present();
   }
+
+  async onPageMenuClick(event: MouseEvent) {
+    const popover = await this.popover.create({
+      event,
+      component: OptionMenuComponent,
+      componentProps: {
+        menuItems: [
+          {
+            name: 'Versions',
+            icon: 'fa fa-history',
+            value: 'view-versions',
+            title: 'View other versions of this page',
+          },
+        ],
+      },
+    });
+
+    popover.onDidDismiss().then(async value => {
+      const { data } = value;
+
+      if ( data === 'view-versions' ) {
+        await this.showVersionModal();
+      }
+    });
+
+    await popover.present();
+  }
+
+  async showVersionModal() {
+    const modal = await this.modals.create({
+      component: VersionModalComponent,
+      componentProps: {
+        pageId: this.pageId,
+      },
+      cssClass: 'modal-big',
+    });
+
+    await modal.present();
+  }
 }