Start page versions modal

src/app/components/components.module.ts

@@ -29,7 +29,8 @@ import {SearchComponent} from './search/Search.component';
 import {NormComponent} from './nodes/norm/norm.component';
 import {MarkdownComponent as MarkdownEditorComponent} from './nodes/markdown/markdown.component';
 import {DirectivesModule} from '../directives/directives.module';
-import {MarkdownModule} from "ngx-markdown";
+import {MarkdownModule} from 'ngx-markdown';
+import {VersionModalComponent} from './version-modal/version-modal.component';
 
 @NgModule({
   declarations: [
@@ -56,18 +57,19 @@ import {MarkdownModule} from "ngx-markdown";
 
     NormComponent,
     MarkdownEditorComponent,
+    VersionModalComponent,
+  ],
+  imports: [
+      CommonModule,
+      IonicModule,
+      AgGridModule,
+      FormsModule,
+      ReactiveFormsModule,
+      ContenteditableModule,
+      MonacoEditorModule,
+      DirectivesModule,
+      MarkdownModule,
   ],
-    imports: [
-        CommonModule,
-        IonicModule,
-        AgGridModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ContenteditableModule,
-        MonacoEditorModule,
-        DirectivesModule,
-        MarkdownModule,
-    ],
   entryComponents: [
     NodePickerComponent,
     DatabaseComponent,
@@ -92,6 +94,7 @@ import {MarkdownModule} from "ngx-markdown";
 
     NormComponent,
     MarkdownEditorComponent,
+    VersionModalComponent,
   ],
   exports: [
     NodePickerComponent,
@@ -117,6 +120,7 @@ import {MarkdownModule} from "ngx-markdown";
 
     NormComponent,
     MarkdownEditorComponent,
+    VersionModalComponent,
   ]
 })
 export class ComponentsModule {}

src/app/components/option-menu/option-menu.component.html

@@ -1,5 +1,5 @@
 <ion-list>
-  <ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect(menuItems[i].value)">
+  <ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect(menuItems[i].value)" [title]="menuItems[i].title">
     <i slot="start" [ngClass]="menuItems[i].icon"></i>
     <ion-label>{{ menuItems[i].name }}</ion-label>
   </ion-item>

src/app/components/option-menu/option-menu.component.ts

@@ -7,7 +7,7 @@ import {PopoverController} from '@ionic/angular';
   styleUrls: ['./option-menu.component.scss'],
 })
 export class OptionMenuComponent implements OnInit {
-  @Input() menuItems: Array<{name: string, icon: string, value: string, type?: string}> = [];
+  @Input() menuItems: Array<{name: string, icon: string, value: string, type?: string, title?: string}> = [];
 
   constructor(
       protected popover: PopoverController,
@@ -18,5 +18,4 @@ export class OptionMenuComponent implements OnInit {
   async onSelect(value) {
     await this.popover.dismiss(value);
   }
-
 }

src/app/components/version-modal/version-modal.component.html

@@ -0,0 +1,25 @@
+<div class="container">
+    <div class="header">
+        <div class="title">Page Versions</div>
+        <button title="Close" class="close" (click)="dismiss()">
+            <i class="fa fa-times"></i>
+        </button>
+    </div>
+    <div class="contents">
+        <ion-list>
+            <ion-item button *ngFor="let version of pageVersions" (click)="onVersionClick(version)" [color]="selectedVersion === version ? 'primary' : ''">
+                <ion-label>
+                    <h4 style="font-weight: bold">
+                        #{{ version.versionNum }}
+                        <span class="version-date">({{ version.versionCreateDate.toLocaleString() }})</span>
+                        <span class="current-version"><i *ngIf="version.currentVersion" class="fa fa-asterisk" title="Current version"></i></span>
+                    </h4>
+                    <h5>{{ version.versionMessage }} by {{ version.userDisplay }}</h5>
+                </ion-label>
+            </ion-item>
+        </ion-list>
+        <div class="preview">
+            Page preview will be here.
+        </div>
+    </div>
+</div>

src/app/components/version-modal/version-modal.component.scss

@@ -0,0 +1,49 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .header {
+    background: lightgrey;
+    display: flex;
+    flex-direction: row;
+
+    .title {
+      flex: 1;
+      padding: 10px;
+      font-size: 1.2em;
+    }
+
+    .close {
+      padding: 10px 15px;
+      background: #ff6666;
+      color: white;
+    }
+  }
+
+  .contents {
+    height: 100%;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: row;
+
+    ion-list {
+      height: 100%;
+      overflow-y: scroll;
+      max-width: 325px;
+    }
+
+    .preview {
+      flex: 1;
+    }
+
+    .version-date {
+      font-weight: normal;
+    }
+
+    .current-version {
+      color: darkgreen;
+      margin-left: 10px;
+    }
+  }
+}

src/app/components/version-modal/version-modal.component.ts

@@ -0,0 +1,36 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {AlertController, ModalController} from '@ionic/angular';
+import {EditorService} from '../../service/editor.service';
+import {PageVersionRecord} from '../../structures/PageRecord';
+
+@Component({
+    selector: 'app-version-modal',
+    templateUrl: './version-modal.component.html',
+    styleUrls: ['./version-modal.component.scss'],
+})
+export class VersionModalComponent implements OnInit {
+    @Input() pageId: string;
+    public pageVersions: PageVersionRecord[] = [];
+    public selectedVersion?: PageVersionRecord;
+
+    constructor(
+        protected alerts: AlertController,
+        protected modals: ModalController,
+        protected editorService: EditorService,
+    ) {
+        console.log('version modal', this);
+    }
+
+    async ngOnInit() {
+        this.pageVersions = await this.editorService.loadPageVersions(this.pageId);
+        await this.onVersionClick(this.pageVersions[0]);
+    }
+
+    dismiss() {
+        this.modals.dismiss();
+    }
+
+    async onVersionClick(version: PageVersionRecord) {
+        this.selectedVersion = version;
+    }
+}