From ff75876e2d934b1e525a9e7280d9af09b9834680 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Wed, 14 Oct 2020 08:42:29 -0500 Subject: [PATCH] Finish converting database editor --- .../editor/database/database.component.html | 18 +- .../editor/database/database.component.ts | 271 ++++++++---------- 2 files changed, 127 insertions(+), 162 deletions(-) diff --git a/src/app/components/editor/database/database.component.html b/src/app/components/editor/database/database.component.html index e4e90b4..b22834a 100644 --- a/src/app/components/editor/database/database.component.html +++ b/src/app/components/editor/database/database.component.html @@ -1,17 +1,15 @@
- - - + + +  Manage Columns  Insert Row  Delete Row -  Sync Records -  Drop Database
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; + } }