Implement sub-tree sharing; read-only pages

src/app/app.component.html

@@ -10,7 +10,7 @@
       <ion-content>
         <ion-list>
           <ion-list-header>
-            <ion-buttons class="ion-padding-start">
+            <ion-buttons>
               <ion-button fill="outline" [color]="refreshingMenu ? 'success' : 'light'" (click)="onMenuRefresh()">
                 <ion-icon color="tertiary" name="refresh"></ion-icon>
               </ion-button>
@@ -23,6 +23,9 @@
               <ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget">
                 <ion-icon color="danger" name="trash"></ion-icon>
               </ion-button>
+              <ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget">
+                <ion-icon color="dark" name="more"></ion-icon>
+              </ion-button>
             </ion-buttons>
           </ion-list-header>
 

src/app/app.component.spec.ts

@@ -1,67 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed, async } from '@angular/core/testing';
-
-import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-
-  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
-
-  beforeEach(async(() => {
-    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
-    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-    platformReadySpy = Promise.resolve();
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
-
-    TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        { provide: StatusBar, useValue: statusBarSpy },
-        { provide: SplashScreen, useValue: splashScreenSpy },
-        { provide: Platform, useValue: platformSpy },
-      ],
-      imports: [ RouterTestingModule.withRoutes([])],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should initialize the app', async () => {
-    TestBed.createComponent(AppComponent);
-    expect(platformSpy.ready).toHaveBeenCalled();
-    await platformReadySpy;
-    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
-    expect(splashScreenSpy.hide).toHaveBeenCalled();
-  });
-
-  it('should have menu labels', async () => {
-    const fixture = await TestBed.createComponent(AppComponent);
-    await fixture.detectChanges();
-    const app = fixture.nativeElement;
-    const menuItems = app.querySelectorAll('ion-label');
-    expect(menuItems.length).toEqual(2);
-    expect(menuItems[0].textContent).toContain('Home');
-    expect(menuItems[1].textContent).toContain('List');
-  });
-
-  it('should have urls', async () => {
-    const fixture = await TestBed.createComponent(AppComponent);
-    await fixture.detectChanges();
-    const app = fixture.nativeElement;
-    const menuItems = app.querySelectorAll('ion-item');
-    expect(menuItems.length).toEqual(2);
-    expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/home');
-    expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/list');
-  });
-
-});

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 
-import {AlertController, Platform, PopoverController} from '@ionic/angular';
+import {AlertController, ModalController, Platform, PopoverController} from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
@@ -8,6 +8,8 @@ import { Router } from '@angular/router';
 import {TREE_ACTIONS, TreeComponent} from 'angular-tree-component';
 import { Observable } from 'rxjs';
 import {OptionPickerComponent} from './components/option-picker/option-picker.component';
+import {OptionMenuComponent} from './components/option-menu/option-menu.component';
+import {SelectorComponent} from './components/sharing/selector/selector.component';
 
 @Component({
   selector: 'app-root',
@@ -18,6 +20,7 @@ export class AppComponent implements OnInit {
   @ViewChild('menuTree', {static: false}) menuTree: TreeComponent;
   public addChildTarget: any = false;
   public deleteTarget: any = false;
+  public menuTarget: any = false;
   public refreshingMenu = false;
   public lastClickEvent: Array<any> = [];
   public nodes = [];
@@ -37,13 +40,20 @@ export class AppComponent implements OnInit {
         click: (tree, node, $event) => {
           TREE_ACTIONS.FOCUS(tree, node, $event);
           TREE_ACTIONS.EXPAND(tree, node, $event);
-          if ( !node.data.noChildren ) {
+
+          this.addChildTarget = false;
+          this.deleteTarget = false;
+          this.menuTarget = false;
+
+          if ( !node.data.noChildren && (!node.data.level || node.data.level === 'manage') ) {
             this.addChildTarget = node;
           }
 
-          if ( !node.data.noDelete ) {
+          if ( !node.data.noDelete && (!node.data.level || node.data.level === 'manage') ) {
             this.deleteTarget = node;
           }
+
+          this.menuTarget = node;
           this.lastClickEvent = [tree, node, $event];
         }
       }
@@ -60,6 +70,7 @@ export class AppComponent implements OnInit {
     protected router: Router,
     protected alerts: AlertController,
     protected popover: PopoverController,
+    protected modal: ModalController,
   ) {
     this.initializeApp();
   }
@@ -86,6 +97,33 @@ export class AppComponent implements OnInit {
     this.menuTree.treeModel.filterNodes(value, true);
   }
 
+  async onNodeMenuClick($event) {
+    const popover = await this.popover.create({
+      component: OptionMenuComponent,
+      componentProps: {
+        menuItems: [
+            ...(this.menuTarget.data.level === 'view' ? [] : [{name: 'Share Sub-Tree', icon: 'person-add', value: 'share'}]),
+        ],
+      },
+      event: $event,
+    });
+
+    popover.onDidDismiss().then((result) => {
+      if ( result.data === 'share' ) {
+        this.modal.create({
+          component: SelectorComponent,
+          componentProps: {
+            node: this.menuTarget.data,
+          }
+        }).then(modal => {
+          modal.present();
+        });
+      }
+    });
+
+    await popover.present();
+  }
+
   async onTopLevelCreate() {
     const alert = await this.alerts.create({
       header: 'Create Page',
@@ -185,6 +223,7 @@ export class AppComponent implements OnInit {
                 this.reloadMenuItems().subscribe();
                 this.deleteTarget = false;
                 this.addChildTarget = false;
+                this.menuTarget = false;
               });
           }
         }

src/app/components/components.module.ts

@@ -12,6 +12,8 @@ import {MonacoEditorModule} from 'ngx-monaco-editor';
 import {FilesComponent} from './editor/files/files.component';
 import {OptionPickerComponent} from './option-picker/option-picker.component';
 import {HostOptionsComponent} from './editor/host-options/host-options.component';
+import {OptionMenuComponent} from './option-menu/option-menu.component';
+import {SelectorComponent} from './sharing/selector/selector.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +24,9 @@ import {HostOptionsComponent} from './editor/host-options/host-options.component
     CodeComponent,
     FilesComponent,
     OptionPickerComponent,
-    HostOptionsComponent
+    HostOptionsComponent,
+    OptionMenuComponent,
+    SelectorComponent,
   ],
   imports: [
     CommonModule,
@@ -39,7 +43,9 @@ import {HostOptionsComponent} from './editor/host-options/host-options.component
     CodeComponent,
     FilesComponent,
     OptionPickerComponent,
-    HostOptionsComponent
+    HostOptionsComponent,
+    OptionMenuComponent,
+    SelectorComponent,
   ],
   exports: [
     HostComponent,
@@ -49,7 +55,9 @@ import {HostOptionsComponent} from './editor/host-options/host-options.component
     CodeComponent,
     FilesComponent,
     OptionPickerComponent,
-    HostOptionsComponent
+    HostOptionsComponent,
+    OptionMenuComponent,
+    SelectorComponent,
   ]
 })
 export class ComponentsModule {}

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

@@ -2,7 +2,7 @@
   <ion-toolbar>
       <ion-item>
         <ion-label position="floating">Language</ion-label>
-        <ion-select style="min-width: 40px;" [(ngModel)]="editorOptions.language" (ionChange)="onSelectChange()">
+        <ion-select style="min-width: 40px;" [(ngModel)]="editorOptions.language" (ionChange)="onSelectChange()" [disabled]="readonly">
           <ion-select-option *ngFor="let lang of languageOptions" [value]="lang.toLowerCase()">{{lang}}</ion-select-option>
         </ion-select>
       </ion-item>
@@ -15,7 +15,7 @@
       #theEditor
     ></ngx-monaco-editor>
   </div>
-  <ion-toolbar>
+  <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>

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

@@ -11,6 +11,7 @@ import {AlertController, LoadingController} from '@ionic/angular';
   styleUrls: ['./code.component.scss'],
 })
 export class CodeComponent implements OnInit {
+  @Input() readonly = false;
   @Input() hostRecord: HostRecord;
   @Output() hostRecordChange = new EventEmitter<HostRecord>();
   @Output() requestParentSave = new EventEmitter<CodeComponent>();
@@ -90,6 +91,7 @@ export class CodeComponent implements OnInit {
   public editorOptions = {
     language: 'javascript',
     uri: v4(),
+    readOnly: this.readonly,
   };
   public editorValue = '';
 
@@ -104,6 +106,7 @@ export class CodeComponent implements OnInit {
         loader.present().then(() => {
             this.getInitObservable().subscribe(() => {
                 this.editorOptions.language = this.dbRecord.language;
+                this.editorOptions.readOnly = this.readonly;
                 this.onSelectChange(false);
                 loader.dismiss();
             });
@@ -118,7 +121,7 @@ export class CodeComponent implements OnInit {
             this.hostRecord.Value = {};
         }
 
-        if ( !this.hostRecord.Value.Value ) {
+        if ( !this.hostRecord.Value.Value && !this.readonly ) {
           this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
             this.dbRecord = res.data;
             this.hostRecord.Value.Mode = 'code';
@@ -146,6 +149,10 @@ export class CodeComponent implements OnInit {
   }
 
   onSaveClick() {
+      if ( this.readonly ) {
+          return;
+      }
+
       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)
@@ -158,6 +165,10 @@ export class CodeComponent implements OnInit {
   }
 
   async onDropClick() {
+      if ( this.readonly ) {
+          return;
+      }
+
       const alert = await this.alerts.create({
           header: 'Are you sure?',
           message: `You are about to delete this code. This action cannot be undone.`,

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

@@ -1,5 +1,5 @@
 <div class="database-wrapper">
-  <ion-toolbar>
+  <ion-toolbar *ngIf="!readonly">
     <ion-buttons>
       <ion-button (click)="onManageColumns()"><ion-icon name="build" color="primary"></ion-icon>&nbsp;Manage Columns</ion-button>
       <ion-button (click)="onInsertRow()"><ion-icon name="add-circle" color="success"></ion-icon>&nbsp;Insert Row</ion-button>
@@ -14,6 +14,7 @@
       class="ag-theme-balham"
       [rowData]="rowData"
       [columnDefs]="columnDefs"
+      suppressMovableColumns="true"
       (rowClicked)="onRowClicked($event)"
       (cellValueChanged)="onCellValueChanged()"
       #agGridElement

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

@@ -13,6 +13,7 @@ import {AgGridAngular} from 'ag-grid-angular';
 })
 export class DatabaseComponent implements OnInit {
   @Input() hostRecord: HostRecord;
+  @Input() readonly = false;
   @Output() hostRecordChange = new EventEmitter<HostRecord>();
   @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
   @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
@@ -55,6 +56,10 @@ export class DatabaseComponent implements OnInit {
   }
 
   async onManageColumns() {
+    if ( this.readonly ) {
+      return;
+    }
+
     const modal = await this.modals.create({
       component: ColumnsComponent,
       componentProps: {columnSets: this.columnDefs},
@@ -91,12 +96,20 @@ export class DatabaseComponent implements OnInit {
   }
 
   onInsertRow() {
+    if ( this.readonly ) {
+      return;
+    }
+
     this.rowData.push({});
     this.agGridElement.api.setRowData(this.rowData);
     this.dirty = true;
   }
 
   async onRemoveRow() {
+    if ( this.readonly ) {
+      return;
+    }
+
     const alert = await this.alerts.create({
       header: 'Are you sure?',
       message: `You are about to delete row ${this.lastClickRow + 1}. This cannot be undone.`,
@@ -125,6 +138,10 @@ export class DatabaseComponent implements OnInit {
   }
 
   async onDropDatabase() {
+    if ( this.readonly ) {
+      return;
+    }
+
     const alert = await this.alerts.create({
       header: 'Are you sure?',
       message: `You are about to delete this database and all its entries. This action cannot be undone.`,
@@ -162,6 +179,10 @@ export class DatabaseComponent implements OnInit {
   }
 
   onSyncRecords() {
+    if ( this.readonly ) {
+      return;
+    }
+
     this.loader.create({message: 'Syncing the database...'}).then(loader => {
       loader.present().then(() => {
         this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
@@ -179,7 +200,7 @@ export class DatabaseComponent implements OnInit {
     return new Observable<any>(sub => {
       this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => {
         this.columnDefs = res.data.map(x => {
-          x.editable = true;
+          x.editable = !this.readonly;
           if ( x.Type === 'text' ) {
             x.editor = 'agTextCellEditor';
           } else if ( x.Type === 'number' ) {
@@ -208,7 +229,7 @@ export class DatabaseComponent implements OnInit {
         if ( !this.hostRecord.Value ) {
           this.hostRecord.Value = {};
         }
-        if ( !this.hostRecord.Value.Value ) {
+        if ( !this.hostRecord.Value.Value && !this.readonly ) {
           this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
             this.dbRecord = res.data;
             this.hostRecord.Value.Mode = 'database';

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

@@ -1,5 +1,5 @@
 <div class="files-wrapper">
-    <div class="new-uploads" style="margin: 20px;">
+    <div class="new-uploads" style="margin: 20px;" *ngIf="!readonly">
         <form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
             <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
             <input type="hidden" name="redirectTo" [value]="getReturnUrl()">

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

@@ -11,6 +11,7 @@ import { APP_BASE_HREF } from '@angular/common';
   styleUrls: ['./files.component.scss'],
 })
 export class FilesComponent implements OnInit {
+  @Input() readonly = false;
   @Input() hostRecord: HostRecord;
   @Output() hostRecordChange = new EventEmitter<HostRecord>();
   @Output() requestParentSave = new EventEmitter<FilesComponent>();
@@ -38,6 +39,10 @@ export class FilesComponent implements OnInit {
   }
 
   onSubmitClick() {
+    if ( this.readonly ) {
+      return;
+    }
+
     this.uploadForm.nativeElement.submit();
   }
 
@@ -51,6 +56,10 @@ export class FilesComponent implements OnInit {
   }
 
   async onDestroyClick() {
+    if ( this.readonly ) {
+      return;
+    }
+
     const alert = await this.alerts.create({
       header: 'Are you sure?',
       message: 'You are about to delete these files. This action cannot be undone.',
@@ -81,7 +90,7 @@ export class FilesComponent implements OnInit {
           this.hostRecord.Value = {};
         }
 
-        if ( !this.hostRecord.Value.Value ) {
+        if ( !this.hostRecord.Value.Value && !this.readonly ) {
           this.api.post(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
             this.dbRecord = res.data;
             this.fileRecords = res.data.files;

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

@@ -1,6 +1,12 @@
 <ng-container>
   <div
-    *ngIf="record.type === 'paragraph' || record.type === 'header1' || record.type === 'header2' || record.type === 'header3' || record.type === 'header4' || record.type === 'block_code' || record.type === 'click_link'"
+    *ngIf="!page.isViewOnly() && ( record.type === 'paragraph'
+      || record.type === 'header1'
+      || record.type === 'header2'
+      || record.type === 'header3'
+      || record.type === 'header4'
+      || record.type === 'block_code'
+      || record.type === 'click_link' )"
     class="host-host ion-padding"
     contenteditable="true"
     (keyup)="onKeyUp($event)"
@@ -10,8 +16,22 @@
     [ngClass]="{'paragraph': record.type === 'paragraph', 'header1': record.type === 'header1', 'header2': record.type === 'header2', 'header3': record.type === 'header3', 'header4': record.type === 'header4', 'block_code': record.type === 'block_code', 'click_link': record.type === 'click_link'}"
     [innerHTML]="record.value.replace('\n', '<br>')"
   ></div>
+  <div
+    *ngIf="page.isViewOnly() && ( record.type === 'paragraph'
+      || record.type === 'header1'
+      || record.type === 'header2'
+      || record.type === 'header3'
+      || record.type === 'header4'
+      || record.type === 'block_code'
+      || record.type === 'click_link' )"
+    (click)="onHostDblClick()"
+    class="host-host ion-padding"
+    #hostContainer
+    [ngClass]="{'paragraph': record.type === 'paragraph', 'header1': record.type === 'header1', 'header2': record.type === 'header2', 'header3': record.type === 'header3', 'header4': record.type === 'header4', 'block_code': record.type === 'block_code', 'click_link': record.type === 'click_link'}"
+    [innerHTML]="record.value.replace('\n', '<br>')"
+  ></div>
   <ul
-    *ngIf="record.type === 'ul'"
+    *ngIf="record.type === 'ul' && !page.isViewOnly()"
     class="host-host ion-padding"
   >
     <li
@@ -23,6 +43,16 @@
       [innerHTML]="listLines[i]"
     ></li>
   </ul>
+  <ul
+    *ngIf="record.type === 'ul' && page.isViewOnly()"
+    class="host-host ion-padding"
+  >
+    <li
+      #liItems
+      *ngFor="let line of listLines; let i = index"
+      [innerHTML]="listLines[i]"
+    ></li>
+  </ul>
   <div *ngIf="record.type === 'page_sep'" class="hr-wrapper">
     <hr>
   </div>
@@ -31,6 +61,7 @@
     class="db-wrapper"
   >
     <editor-database
+      [readonly]="page.isViewOnly()"
       [hostRecord]="record"
       (hostRecordChange)="onRecordChange($event)"
       (requestParentSave)="onRequestParentSave($event)"
@@ -39,6 +70,7 @@
   </div>
   <div class="code-wrapper" *ngIf="record.type === 'code_ref'">
     <editor-code
+      [readonly]="page.isViewOnly()"
       [hostRecord]="record"
       (hostRecordChange)="onRecordChange($event)"
       (requestParentSave)="onRequestParentSave($event)"
@@ -47,6 +79,7 @@
   </div>
   <div class="files-wrapper" *ngIf="record.type === 'file_ref'">
     <editor-files
+      [readonly]="page.isViewOnly()"
       [hostRecord]="record"
       (hostRecordChange)="onRecordChange($event)"
       (requestParentSave)="onRequestParentSave($event)"

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

@@ -1,5 +1,6 @@
 import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, ViewChildren} from '@angular/core';
 import HostRecord from '../../../structures/HostRecord';
+import PageRecord from '../../../structures/PageRecord';
 
 @Component({
   selector: 'editor-host',
@@ -7,6 +8,7 @@ import HostRecord from '../../../structures/HostRecord';
   styleUrls: ['./host.component.scss'],
 })
 export class HostComponent implements OnInit {
+  @Input() page: PageRecord;
   @Input() record: HostRecord;
   @Output() recordChange = new EventEmitter<HostRecord>();
   @Output() newHostRequested = new EventEmitter<HostComponent>();

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

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

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

@@ -0,0 +1,22 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {PopoverController} from '@ionic/angular';
+
+@Component({
+  selector: 'common-option-menu',
+  templateUrl: './option-menu.component.html',
+  styleUrls: ['./option-menu.component.scss'],
+})
+export class OptionMenuComponent implements OnInit {
+  @Input() menuItems: Array<{name: string, icon: string, value: string, type?: string}> = [];
+
+  constructor(
+      protected popover: PopoverController,
+  ) { }
+
+  ngOnInit() {}
+
+  async onSelect(value) {
+    await this.popover.dismiss(value);
+  }
+
+}

src/app/components/sharing/selector/selector.component.html

@@ -0,0 +1,98 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismissModal(false)">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <h4>Create Sharing Link</h4>
+        <p>You can share this sub-tree of your notes by generating a sharing link. You can choose to allow the recipient to have view, edit, or manage access to this sub-tree. Sharing links are one time use only and require a Noded account.</p>
+        <ion-buttons>
+          <ion-button fill="outline" color="medium" (click)="getShareLink('view')">
+            <ion-icon name="link" color="dark"></ion-icon>&nbsp;&nbsp;View
+          </ion-button>
+          <ion-button fill="outline" color="medium" (click)="getShareLink('update')">
+            <ion-icon name="link" color="dark"></ion-icon>&nbsp;&nbsp;Edit
+          </ion-button>
+          <ion-button fill="outline" color="medium" (click)="getShareLink('manage')">
+            <ion-icon name="link" color="dark"></ion-icon>&nbsp;&nbsp;Manage
+          </ion-button>
+        </ion-buttons>
+      </ion-col>
+    </ion-row>
+    <ion-row *ngIf="generatedLink">
+      <ion-col size="12">
+        <ion-item>
+          <ion-label position="floating">Share this link to give access:</ion-label>
+          <ion-input [(ngModel)]="generatedLink" [readonly]="true"></ion-input>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+    <ion-row *ngIf="isShared">
+      <ion-col size="12">
+        <h4>Shared With</h4>
+        <ion-list>
+          <ion-item *ngFor="let group of sharingInfo.view; let i = index">
+            <ion-icon slot="start" name="contact"></ion-icon>
+            <ion-label>
+              {{ sharingInfo.view[i].username }}&nbsp;&nbsp;<span class="share-token">VIEW</span>
+            </ion-label>
+            <ion-buttons slot="end">
+              <ion-button fill="invisible" (click)="setShareLevel(sharingInfo.view[i], 'update')">
+                <ion-icon name="create" color="medium"></ion-icon>
+              </ion-button>
+              <ion-button fill="invisible" (click)="setShareLevel(sharingInfo.view[i], 'manage')">
+                <ion-icon name="build" color="medium"></ion-icon>
+              </ion-button>
+              <ion-button fill="invisible" (click)="unsharePage(sharingInfo.view[i])">
+                <ion-icon name="close" color="medium"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          </ion-item>
+          <ion-item *ngFor="let group of sharingInfo.update; let i = index">
+            <ion-icon slot="start" name="contact"></ion-icon>
+            <ion-label>
+              {{ sharingInfo.update[i].username }}&nbsp;&nbsp;<span class="share-token">VIEW</span>&nbsp;&nbsp;<span class="share-token">EDIT</span>
+            </ion-label>
+            <ion-buttons slot="end">
+              <ion-button fill="invisible" (click)="setShareLevel(sharingInfo.update[i], 'view')">
+                <ion-icon name="eye" color="medium"></ion-icon>
+              </ion-button>
+              <ion-button fill="invisible" (click)="setShareLevel(sharingInfo.update[i], 'manage')">
+                <ion-icon name="build" color="medium"></ion-icon>
+              </ion-button>
+              <ion-button fill="invisible" (click)="unsharePage(sharingInfo.update[i])">
+                <ion-icon name="close" color="medium"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          </ion-item>
+          <ion-item *ngFor="let group of sharingInfo.manage; let i = index">
+            <ion-icon slot="start" name="contact"></ion-icon>
+            <ion-label>
+              {{ sharingInfo.manage[i].username }}&nbsp;&nbsp;<span class="share-token">VIEW</span>&nbsp;&nbsp;<span class="share-token">EDIT</span>&nbsp;&nbsp;<span class="share-token">MANAGE</span>
+            </ion-label>
+            <ion-buttons slot="end">
+              <ion-button fill="invisible" (click)="setShareLevel(sharingInfo.manage[i], 'view')">
+                <ion-icon name="eye" color="medium"></ion-icon>
+              </ion-button>
+              <ion-button fill="invisible" (click)="setShareLevel(sharingInfo.manage[i], 'update')">
+                <ion-icon name="create" color="medium"></ion-icon>
+              </ion-button>
+              <ion-button fill="invisible" (click)="unsharePage(sharingInfo.manage[i])">
+                <ion-icon name="close" color="medium"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          </ion-item>
+        </ion-list>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

src/app/components/sharing/selector/selector.component.scss

@@ -0,0 +1,8 @@
+.share-token {
+  background-color: #dedede;
+  color: #555;
+  padding: 5px;
+  font-size: 10pt;
+  font-style: italic;
+  font-family: monospace;
+}

src/app/components/sharing/selector/selector.component.ts

@@ -0,0 +1,77 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+import {ApiService} from '../../../service/api.service';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'app-selector',
+  templateUrl: './selector.component.html',
+  styleUrls: ['./selector.component.scss'],
+})
+export class SelectorComponent implements OnInit {
+  @Input() node: any;
+  public sharingInfo: {
+    view: Array<{username: string, id: string, level: 'view'|'update'|'manage'}>,
+    update: Array<{username: string, id: string, level: 'view'|'update'|'manage'}>,
+    manage: Array<{username: string, id: string, level: 'view'|'update'|'manage'}>,
+  } = {view: [], update: [], manage: []};
+  public generatedLink = '';
+
+  constructor(
+      protected modals: ModalController,
+      protected api: ApiService,
+  ) {}
+
+  public get title() {
+    return this.node ? `Share ${this.node.name}` : 'Manage Sharing';
+  }
+
+  public get isShared() {
+    return (this.sharingInfo.view.length > 0) || (this.sharingInfo.update.length > 0) || (this.sharingInfo.manage.length > 0);
+  }
+
+  ngOnInit() {
+    this.loadShareInfo().subscribe(data => {
+      this.sharingInfo = data;
+    });
+  }
+
+  dismissModal(success: boolean) {
+    this.modals.dismiss();
+  }
+
+  loadShareInfo(): Observable<{
+    view: Array<{username: string, id: string, level: 'view'|'update'|'manage'}>,
+    update: Array<{username: string, id: string, level: 'view'|'update'|'manage'}>,
+    manage: Array<{username: string, id: string, level: 'view'|'update'|'manage'}>,
+  }> {
+    return new Observable(sub => {
+      this.api.get(`/share/page/${this.node.id}/info`).subscribe(result => {
+        sub.next(result.data);
+        sub.complete();
+      });
+    });
+  }
+
+  setShareLevel(group, level) {
+    this.api.post(`/share/page/${this.node.id}/share`, { user_id: group.id, level }).subscribe(result => {
+      this.loadShareInfo().subscribe(data => {
+        this.sharingInfo = data;
+      });
+    });
+  }
+
+  unsharePage(group) {
+    this.api.post(`/share/page/${this.node.id}/revoke`, { user_id: group.id }).subscribe(result => {
+      this.loadShareInfo().subscribe(data => {
+        this.sharingInfo = data;
+      });
+    });
+  }
+
+  getShareLink(level) {
+    this.api.get(`/share/page/${this.node.id}/link/${level}`).subscribe(result => {
+      this.generatedLink = result.data.link;
+    });
+  }
+}

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;
+          if ( !pageRecord.isViewOnly() ) {
             this.onSaveClick();
+          }
         });
       });
     } else {
@@ -64,10 +66,16 @@ export class EditorPage implements OnInit {
   }
 
   onHostRecordChange($event, i) {
+    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);

src/app/structures/PageRecord.ts

@@ -11,8 +11,9 @@ export default class PageRecord {
     public CreatedUserId: string;
     public UpdateUserId: string;
     public ChildPageIds: Array<string>;
+    public level: 'view'|'manage'|'update'|false;
 
-    constructor(data: any = {Name: 'Click to edit title...'}) {
+    constructor(data: any = {Name: 'Click to edit...'}) {
         [
             'UUID',
             'Name',
@@ -25,7 +26,8 @@ export default class PageRecord {
             'UpdatedAt',
             'CreatedUserId',
             'UpdateUserId',
-            'ChildPageIds'
+            'ChildPageIds',
+            'level'
         ].forEach(field => {
             if ( field in data ) {
                 this[field] = data[field];
@@ -55,4 +57,8 @@ export default class PageRecord {
         });
         return data;
     }
+
+    isViewOnly() {
+        return this.level === 'view';
+    }
 }