Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

editor-refactor #18

Merged
garrettmills merged 16 commits from editor-refactor into master 2020-10-14 16:42:08 +00:00
Conversation 0 Commits 16 Files Changed 34 +128 -163
2 changed files with 128 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ff75876e2d - Show all commits

18
src/app/components/editor/database/database.component.html
View File

@ -1,17 +1,15 @@
<div class="database-wrapper"> <div class="database-wrapper">
<ion-input <ion-toolbar>
[readonly]="readonly" <ion-input
[(ngModel)]="dbName" [readonly]="readonly"
(ionChange)="onCellValueChanged()" [(ngModel)]="dbName"
style="font-size: 15pt;" (ionChange)="onCellValueChanged()"
></ion-input> style="font-size: 15pt;"
<ion-toolbar *ngIf="!readonly"> ></ion-input>
<ion-buttons> <ion-buttons *ngIf="!readonly">
<ion-button (click)="onManageColumns()"><ion-icon name="build" color="primary"></ion-icon>&nbsp;Manage Columns</ion-button> <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)="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)="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-buttons>
</ion-toolbar> </ion-toolbar>
<div class="grid-wrapper"> <div class="grid-wrapper">

273
src/app/components/editor/database/database.component.ts
View File

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