Implement sub-tree sharing; read-only pages

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';