diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index ed0a774..fecf0d0 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -1,6 +1,5 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ApiService} from '../../../service/api.service';
-import {Observable} from 'rxjs';
import {AlertController, LoadingController, ModalController} from '@ionic/angular';
import {ColumnsComponent} from './columns/columns.component';
import {AgGridAngular} from 'ag-grid-angular';
@@ -23,11 +22,6 @@ import {EditorService} from '../../../service/editor.service';
})
export class DatabaseComponent extends EditorNodeContract implements OnInit {
@Input() nodeId: string;
- // @Input() hostRecord: HostRecord;
- // @Input() readonly = false;
- // @Output() hostRecordChange = new EventEmitter
();
- // @Output() requestParentSave = new EventEmitter();
- // @Output() requestParentDelete = new EventEmitter();
@ViewChild('agGridElement') agGridElement: AgGridAngular;
public dbRecord: any;
@@ -38,7 +32,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
protected dbId!: string;
public get readonly() {
- return !this.node || !this.editorService.canEdit()
+ return !this.node || !this.editorService.canEdit();
}
constructor(
@@ -67,27 +61,12 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
public writeChangesToNode(): void | Promise {
this.node.Value.Mode = 'database';
- this.node.Value.Value = this.dbId;
- this.node.value = this.dbId;
}
ngOnInit() {
this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
});
- // this.loader.create({message: 'Loading database...'}).then(loader => {
- // setTimeout(() => {
- // loader.present().then(() => {
- // this.getInitObservable().subscribe(() => {
- // this.getColumnLoadObservable().subscribe(() => {
- // this.getDataLoadObservable().subscribe(() => {
- // loader.dismiss();
- // });
- // });
- // });
- // });
- // }, 100);
- // });
}
onCellValueChanged() {
@@ -104,16 +83,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
componentProps: {columnSets: this.columnDefs},
});
- // modal.onDidDismiss().then(result => {
- // if ( result.data ) {
- // this.setColumns(result.data).subscribe(() => {
- // 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.requestParentSave.emit(this);
- // });
- // });
- // }
- // });
+ modal.onDidDismiss().then(result => {
+ this.setColumns(result.data);
+ });
await modal.present();
}
@@ -158,132 +130,54 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
await alert.present();
}
- // 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.`,
- // 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;
}
+ setColumns(data) {
+ this.columnDefs = data.map(x => {
+ x.editable = !this.readonly;
+
+ // Set editors and renderers for different types
+ if ( x.Type === 'text' ) {
+ x.editor = 'agTextCellEditor';
+ } else if ( x.Type === 'number' ) {
+ x.cellEditorFramework = NumericEditorComponent;
+ } else if ( x.Type === 'paragraph' ) {
+ x.cellEditorFramework = ParagraphEditorComponent;
+ } else if ( x.Type === 'boolean' ) {
+ x.cellRendererFramework = BooleanRendererComponent;
+ x.cellEditorFramework = BooleanEditorComponent;
+ } else if ( x.Type === 'select' ) {
+ x.cellEditorFramework = SelectEditorComponent;
+ } else if ( x.Type === 'multiselect' ) {
+ x.cellEditorFramework = MultiSelectEditorComponent;
+ } else if ( x.Type === 'datetime' ) {
+ x.cellEditorFramework = DatetimeEditorComponent;
+ x.cellRendererFramework = DatetimeRendererComponent;
+ } else if ( x.Type === 'currency' ) {
+ x.cellEditorFramework = NumericEditorComponent;
+ x.cellRendererFramework = CurrencyRendererComponent;
+ } else if ( x.Type === 'index' ) {
+ x.editable = false;
+ }
-
- // getDataLoadObservable(): Observable {
- // return new Observable(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() {
- // 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)
- // .subscribe(res => {
- // this.rowData = res.data.map(x => x.RowData);
- // this.agGridElement.api.setRowData(this.rowData);
- //
- // this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/name`,
- // { Name: this.dbName })
- // .subscribe(resp => {
- // this.dirty = false;
- // loader.dismiss();
- // });
- // });
- // });
- // });
- // }
- //
- // getColumnLoadObservable(): Observable {
- // return new Observable(sub => {
- // this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => {
- // this.setColumns(res.data).subscribe(() => {
- // sub.next();
- // sub.complete();
- // });
- // });
- // });
- // }
-
- setColumns(data): Observable {
- return new Observable(sub => {
- this.columnDefs = data.map(x => {
- x.editable = !this.readonly;
-
- // Set editors and renderers for different types
- if ( x.Type === 'text' ) {
- x.editor = 'agTextCellEditor';
- } else if ( x.Type === 'number' ) {
- x.cellEditorFramework = NumericEditorComponent;
- } else if ( x.Type === 'paragraph' ) {
- x.cellEditorFramework = ParagraphEditorComponent;
- } else if ( x.Type === 'boolean' ) {
- x.cellRendererFramework = BooleanRendererComponent;
- x.cellEditorFramework = BooleanEditorComponent;
- } else if ( x.Type === 'select' ) {
- x.cellEditorFramework = SelectEditorComponent;
- } else if ( x.Type === 'multiselect' ) {
- x.cellEditorFramework = MultiSelectEditorComponent;
- } else if ( x.Type === 'datetime' ) {
- x.cellEditorFramework = DatetimeEditorComponent;
- x.cellRendererFramework = DatetimeRendererComponent;
- } else if ( x.Type === 'currency' ) {
- x.cellEditorFramework = NumericEditorComponent;
- x.cellRendererFramework = CurrencyRendererComponent;
- } else if ( x.Type === 'index' ) {
- x.editable = false;
- }
-
- console.log({x});
- return x;
- });
-
- this.agGridElement.api.setColumnDefs(this.columnDefs);
-
- sub.next();
- sub.complete();
+ return x;
});
- }
- public performLoad(): void | Promise {
- return new Promise((res, rej) => {
- if ( !this.node.Value ) {
- this.node.Value = {};
- }
+ this.agGridElement.api.setColumnDefs(this.columnDefs);
+ this.dirty = true;
+ }
- console.log('loading db');
+ public async performLoad(): Promise {
+ if ( !this.node.Value ) {
+ this.node.Value = {};
+ }
- if ( !this.node.Value.Value && this.editorService.canEdit() ) {
+ // Load the database record itself
+ if ( !this.node.Value.Value && this.editorService.canEdit() ) {
+ await new Promise((res, rej) => {
this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
next: result => {
this.dbRecord = result.data;
@@ -291,22 +185,95 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
this.node.Value.Mode = 'database';
this.node.Value.Value = result.data.UUID;
this.node.value = result.data.UUID;
- this.pendingSetup = false;
res();
},
error: rej,
});
- } else {
+ });
+ } else {
+ await new Promise((res, rej) => {
this.api.get(`/db/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
next: result => {
this.dbRecord = result.data;
this.dbName = result.data.Name;
- this.pendingSetup = false;
res();
},
error: rej,
});
- }
+ });
+ }
+
+ // Load the columns
+ await new Promise((res, rej) => {
+ this.api.get(`/db/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}/columns`).subscribe({
+ next: result => {
+ this.setColumns(result.data);
+ res();
+ },
+ error: rej,
+ });
+ });
+
+ // Load the data
+ await new Promise((res, rej) => {
+ this.api.get(`/db/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}/data`).subscribe({
+ next: result => {
+ this.rowData = result.data.map(x => x.RowData);
+ this.agGridElement.api.setRowData(this.rowData);
+ res();
+ },
+ error: rej,
+ });
+ });
+
+ this.pendingSetup = false;
+ this.dirty = false;
+ }
+
+ public performDelete(): void | Promise {
+ return new Promise((res, rej) => {
+ this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/drop/${this.node.Value.Value}`).subscribe({
+ next: result => {
+ res();
+ },
+ error: rej,
+ });
});
}
+
+ public async performSave(): Promise {
+ // Save the columns first
+ await new Promise((res, rej) => {
+ this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}/columns`, {columns: this.columnDefs}).subscribe({
+ next: result => {
+ res();
+ },
+ error: rej,
+ });
+ });
+
+ // Save the data
+ await new Promise((res, rej) => {
+ this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}/data`, this.rowData).subscribe({
+ next: result => {
+ this.rowData = result.data.map(x => x.RowData);
+ this.agGridElement.api.setRowData(this.rowData);
+ res();
+ },
+ error: rej,
+ });
+ });
+
+ // Save the name
+ await new Promise((res, rej) => {
+ this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}/name`, { Name: this.dbName }).subscribe({
+ next: result => {
+ res();
+ },
+ error: rej,
+ });
+ });
+
+ this.dirty = false;
+ }
}