finish database implementation

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

@@ -0,0 +1,46 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Manage Database Columns</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>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
+        <ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row
+      *ngFor="let colSet of columnSets; let i = index"
+    >
+      <ion-col size="5">
+        <ion-item>
+          <ion-label position="floating">Field Label</ion-label>
+          <ion-input type="text" required [(ngModel)]="columnSets[i].headerName"></ion-input>
+        </ion-item>
+      </ion-col>
+      <ion-col size="5">
+        <ion-item>
+          <ion-label position="floating">Data Type</ion-label>
+          <ion-select interface="popover" [(ngModel)]="columnSets[i].Type">
+            <ion-select-option value="text">Text</ion-select-option>
+            <ion-select-option value="number">Number</ion-select-option>
+            <ion-select-option value="textarea">Text-Area</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2" align-items-center>
+        <ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
+          <ion-icon color="danger" name="trash"></ion-icon>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

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

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+
+@Component({
+  selector: 'editor-database-columns',
+  templateUrl: './columns.component.html',
+  styleUrls: ['./columns.component.scss'],
+})
+export class ColumnsComponent implements OnInit {
+  @Input() columnSets: Array<{headerName: string, field: string, Type: string}> = [];
+
+  constructor(
+      protected modals: ModalController
+  ) { }
+
+  ngOnInit() {}
+
+  onAddColumnClick() {
+    this.columnSets.push({headerName: '', field: '', Type: ''});
+  }
+
+  dismissModal(doSave = true) {
+    if ( doSave ) {
+      this.columnSets = this.columnSets.map(x => {
+        x.field = x.headerName;
+        return x;
+      })
+      this.modals.dismiss(this.columnSets);
+    } else {
+      this.modals.dismiss();
+    }
+  }
+
+  onDeleteClick(i) {
+    const newSets = this.columnSets.filter((x, index) => {
+      return index !== i;
+    });
+    this.columnSets = newSets;
+  }
+
+}

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

@@ -0,0 +1,22 @@
+<div class="database-wrapper">
+  <ion-toolbar>
+    <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>
+      <ion-button (click)="onRemoveRow()" [disabled]="lastClickRow < 0"><ion-icon name="remove-circle" color="danger"></ion-icon>&nbsp;Delete Row</ion-button>
+      <ion-button (click)="onSyncRecords()"><ion-icon name="save" [color]="dirty ? 'warning' : 'success'"></ion-icon>&nbsp;Sync Records</ion-button>
+      <ion-button (click)="onDropDatabase()"><ion-icon name="alert" color="danger"></ion-icon>&nbsp;Drop Database</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  <div class="grid-wrapper">
+    <ag-grid-angular
+      style="width: 100%; height: 500px;"
+      class="ag-theme-balham"
+      [rowData]="rowData"
+      [columnDefs]="columnDefs"
+      (rowClicked)="onRowClicked($event)"
+      (cellValueChanged)="onCellValueChanged()"
+      #agGridElement
+    ></ag-grid-angular>
+  </div>
+</div>

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

@@ -0,0 +1,4 @@
+div.database-wrapper {
+  border: 2px solid #8c8c8c;
+  border-radius: 3px;
+}

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

@@ -0,0 +1,219 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import HostRecord from '../../../structures/HostRecord';
+import {ApiService} from '../../../service/api.service';
+import {Observable} from 'rxjs';
+import {AlertController, ModalController} from '@ionic/angular';
+import {ColumnsComponent} from './columns/columns.component';
+import {AgGridAngular} from 'ag-grid-angular';
+
+@Component({
+  selector: 'editor-database',
+  templateUrl: './database.component.html',
+  styleUrls: ['./database.component.scss'],
+})
+export class DatabaseComponent implements OnInit {
+  @Input() hostRecord: HostRecord;
+  @Output() hostRecordChange = new EventEmitter<HostRecord>();
+  @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
+  @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
+  @ViewChild('agGridElement', {static: false}) agGridElement: AgGridAngular;
+
+  public dbRecord: any;
+  public pendingSetup = true;
+  public dirty = false;
+  protected lastClickRow = -1;
+
+  constructor(
+      protected api: ApiService,
+      protected modals: ModalController,
+      protected alerts: AlertController,
+  ) { }
+
+  title = 'app';
+  columnDefs = [];
+  rowData = [];
+
+  ngOnInit() {
+    this.getInitObservable().subscribe(() => {
+      this.getColumnLoadObservable().subscribe(() => {
+        this.getDataLoadObservable().subscribe(() => {
+
+        });
+      });
+    });
+  }
+
+  onCellValueChanged() {
+    this.dirty = true;
+  }
+
+  async onManageColumns() {
+    const modal = await this.modals.create({
+      component: ColumnsComponent,
+      componentProps: {columnSets: this.columnDefs},
+    });
+
+    modal.onDidDismiss().then(result => {
+      if ( result.data ) {
+        this.columnDefs = result.data.map(x => {
+          x.editable = true;
+          if ( x.Type === 'text' ) {
+            x.editor = 'agTextCellEditor';
+          } else if ( x.Type === 'number' ) {
+            x.valueFormatter = (value) => {
+              const num = parseFloat(value.value);
+              if ( !isNaN(num) ) {
+                return num;
+              } else {
+                return '';
+              }
+            };
+          } else if ( x.Type === 'textarea' ) {
+            x.editor = 'agPopupTextCellEditor';
+          }
+          return x;
+        });
+        const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns`
+        this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
+          this.columnDefs = res.data;
+        });
+      }
+    });
+
+    await modal.present();
+  }
+
+  onInsertRow() {
+    this.rowData.push({});
+    this.agGridElement.api.setRowData(this.rowData);
+  }
+
+  async onRemoveRow() {
+    const alert = await this.alerts.create({
+      header: 'Are you sure?',
+      message: `You are about to delete row ${this.lastClickRow + 1}. This cannot be undone.`,
+      buttons: [
+        {
+          text: 'Keep It',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete It',
+          handler: () => {
+            const newRows = this.rowData.filter((x, i) => {
+              return i !== this.lastClickRow;
+            });
+
+            this.rowData = newRows;
+            this.agGridElement.api.setRowData(this.rowData);
+            this.lastClickRow = -1;
+          },
+        }
+      ],
+    });
+
+    await alert.present();
+  }
+
+  async onDropDatabase() {
+    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.`,
+      buttons: [
+        {
+          text: 'Keep It',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete It',
+          handler: async () => {
+            this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe();
+            this.requestParentDelete.emit(this);
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+  }
+
+  onRowClicked($event) {
+    this.lastClickRow = $event.rowIndex;
+  }
+
+  getDataLoadObservable(): Observable<any> {
+    return new Observable<any>(sub => {
+      this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/data`).subscribe(res => {
+        this.rowData = res.data.map(x => x.RowData);
+        this.agGridElement.api.setRowData(this.rowData);
+        sub.next();
+        sub.complete();
+      });
+    });
+  }
+
+  onSyncRecords() {
+    this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
+        .subscribe(res => {
+      this.rowData = res.data.map(x => x.RowData);
+      this.agGridElement.api.setRowData(this.rowData);
+      this.dirty = false;
+    });
+  }
+
+  getColumnLoadObservable(): Observable<any> {
+    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;
+          if ( x.Type === 'text' ) {
+            x.editor = 'agTextCellEditor';
+          } else if ( x.Type === 'number' ) {
+            x.valueFormatter = (value) => {
+              const num = parseFloat(value.value);
+              if ( !isNaN(num) ) {
+                return num;
+              } else {
+                return '';
+              }
+            };
+          } else if ( x.Type === 'textarea' ) {
+            x.editor = 'agPopupTextCellEditor';
+          }
+          return x;
+        });
+        sub.next();
+        sub.complete();
+      });
+    });
+  }
+
+  getInitObservable(): Observable<any> {
+    return new Observable<any>(sub => {
+      if ( this.hostRecord && this.pendingSetup ) {
+        if ( !this.hostRecord.Value.Value ) {
+          this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
+            this.dbRecord = res.data;
+            this.hostRecord.Value.Mode = 'database';
+            this.hostRecord.Value.Value = res.data.UUID;
+            this.hostRecord.value = res.data.UUID;
+            this.hostRecordChange.emit(this.hostRecord);
+            this.pendingSetup = false;
+            sub.next(true);
+            sub.complete();
+          });
+        } else {
+          this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
+            this.dbRecord = res.data;
+            this.pendingSetup = false;
+            sub.next(true);
+            sub.complete();
+          });
+        }
+      } else {
+        this.pendingSetup = true;
+      }
+    });
+  }
+
+}