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 +159 -125
4 changed files with 159 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c07f334d60 - Show all commits

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

@ -1,5 +1,4 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; import {Component, Input, OnInit, ViewChild} from '@angular/core';
import HostRecord from '../../../structures/HostRecord';
import {ApiService} from '../../../service/api.service'; import {ApiService} from '../../../service/api.service';
import {Observable} from 'rxjs'; import {Observable} from 'rxjs';
import {AlertController, LoadingController, ModalController} from '@ionic/angular'; import {AlertController, LoadingController, ModalController} from '@ionic/angular';
@ -14,18 +13,21 @@ import {DatetimeEditorComponent} from './editors/datetime/datetime-editor.compon
import {DatetimeRendererComponent} from './renderers/datetime-renderer.component'; import {DatetimeRendererComponent} from './renderers/datetime-renderer.component';
import {CurrencyRendererComponent} from './renderers/currency-renderer.component'; import {CurrencyRendererComponent} from './renderers/currency-renderer.component';
import {BooleanRendererComponent} from './renderers/boolean-renderer.component'; import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {EditorService} from '../../../service/editor.service';
@Component({ @Component({
selector: 'editor-database', selector: 'editor-database',
templateUrl: './database.component.html', templateUrl: './database.component.html',
styleUrls: ['./database.component.scss'], styleUrls: ['./database.component.scss'],
}) })
export class DatabaseComponent implements OnInit { export class DatabaseComponent extends EditorNodeContract implements OnInit {
@Input() hostRecord: HostRecord; @Input() nodeId: string;
@Input() readonly = false; // @Input() hostRecord: HostRecord;
@Output() hostRecordChange = new EventEmitter<HostRecord>(); // @Input() readonly = false;
@Output() requestParentSave = new EventEmitter<DatabaseComponent>(); // @Output() hostRecordChange = new EventEmitter<HostRecord>();
@Output() requestParentDelete = new EventEmitter<DatabaseComponent>(); // @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
// @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
@ViewChild('agGridElement') agGridElement: AgGridAngular; @ViewChild('agGridElement') agGridElement: AgGridAngular;
public dbRecord: any; public dbRecord: any;
@ -33,29 +35,56 @@ export class DatabaseComponent implements OnInit {
public dirty = false; public dirty = false;
public lastClickRow = -1; public lastClickRow = -1;
public dbName = ''; public dbName = '';
protected dbId!: string;
public get readonly() {
return !this.node || !this.editorService.canEdit()
}
constructor( constructor(
protected api: ApiService, protected api: ApiService,
protected modals: ModalController, protected modals: ModalController,
protected alerts: AlertController, protected alerts: AlertController,
protected loader: LoadingController, protected loader: LoadingController,
) { } public readonly editorService: EditorService,
) { super(); }
title = 'app'; title = 'app';
columnDefs = []; columnDefs = [];
rowData = []; rowData = [];
public isDirty(): boolean | Promise<boolean> {
return this.dirty;
}
public needsSave(): boolean | Promise<boolean> {
return this.dirty;
}
public needsLoad(): boolean | Promise<boolean> {
return this.node && this.pendingSetup;
}
public writeChangesToNode(): void | Promise<void> {
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.loader.create({message: 'Loading database...'}).then(loader => { // this.loader.create({message: 'Loading database...'}).then(loader => {
// setTimeout(() => { // setTimeout(() => {
// loader.present().then(() => { // loader.present().then(() => {
this.getInitObservable().subscribe(() => { // this.getInitObservable().subscribe(() => {
this.getColumnLoadObservable().subscribe(() => { // this.getColumnLoadObservable().subscribe(() => {
this.getDataLoadObservable().subscribe(() => { // this.getDataLoadObservable().subscribe(() => {
// loader.dismiss(); // loader.dismiss();
}); // });
}); // });
}); // });
// }); // });
// }, 100); // }, 100);
// }); // });
@ -75,16 +104,16 @@ export class DatabaseComponent implements OnInit {
componentProps: {columnSets: this.columnDefs}, componentProps: {columnSets: this.columnDefs},
}); });
modal.onDidDismiss().then(result => { // modal.onDidDismiss().then(result => {
if ( result.data ) { // if ( result.data ) {
this.setColumns(result.data).subscribe(() => { // this.setColumns(result.data).subscribe(() => {
const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns` // 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.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
this.requestParentSave.emit(this); // this.requestParentSave.emit(this);
}); // });
}); // });
} // }
}); // });
await modal.present(); await modal.present();
} }
@ -115,11 +144,9 @@ export class DatabaseComponent implements OnInit {
{ {
text: 'Delete It', text: 'Delete It',
handler: () => { handler: () => {
const newRows = this.rowData.filter((x, i) => { this.rowData = this.rowData.filter((x, i) => {
return i !== this.lastClickRow; return i !== this.lastClickRow;
}); });
this.rowData = newRows;
this.agGridElement.api.setRowData(this.rowData); this.agGridElement.api.setRowData(this.rowData);
this.lastClickRow = -1; this.lastClickRow = -1;
this.dirty = true; this.dirty = true;
@ -131,80 +158,82 @@ export class DatabaseComponent implements OnInit {
await alert.present(); await alert.present();
} }
async onDropDatabase() { // async onDropDatabase() {
if ( this.readonly ) { // if ( this.readonly ) {
return; // return;
} // }
//
const alert = await this.alerts.create({ // const alert = await this.alerts.create({
header: 'Are you sure?', // header: 'Are you sure?',
message: `You are about to delete this database and all its entries. This action cannot be undone.`, // message: `You are about to delete this database and all its entries. This action cannot be undone.`,
buttons: [ // buttons: [
{ // {
text: 'Keep It', // text: 'Keep It',
role: 'cancel', // role: 'cancel',
}, // },
{ // {
text: 'Delete It', // text: 'Delete It',
handler: async () => { // handler: async () => {
this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe(); // this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe();
this.requestParentDelete.emit(this); // this.requestParentDelete.emit(this);
}, // },
}, // },
], // ],
}); // });
//
await alert.present(); // await alert.present();
} // }
onRowClicked($event) { onRowClicked($event) {
this.lastClickRow = $event.rowIndex; 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() {
if ( this.readonly ) {
return;
}
this.loader.create({message: 'Syncing the database...'}).then(loader => { // getDataLoadObservable(): Observable<any> {
loader.present().then(() => { // return new Observable<any>(sub => {
this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData) // this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/data`).subscribe(res => {
.subscribe(res => { // this.rowData = res.data.map(x => x.RowData);
this.rowData = res.data.map(x => x.RowData); // this.agGridElement.api.setRowData(this.rowData);
this.agGridElement.api.setRowData(this.rowData); // sub.next();
// sub.complete();
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(); // onSyncRecords() {
}); // if ( this.readonly ) {
}); // return;
}); // }
}); //
} // this.loader.create({message: 'Syncing the database...'}).then(loader => {
// loader.present().then(() => {
getColumnLoadObservable(): Observable<any> { // this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
return new Observable<any>(sub => { // .subscribe(res => {
this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => { // this.rowData = res.data.map(x => x.RowData);
this.setColumns(res.data).subscribe(() => { // this.agGridElement.api.setRowData(this.rowData);
sub.next(); //
sub.complete(); // 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> { setColumns(data): Observable<any> {
return new Observable<any>(sub => { return new Observable<any>(sub => {
@ -246,37 +275,38 @@ export class DatabaseComponent implements OnInit {
}); });
} }
getInitObservable(): Observable<any> { public performLoad(): void | Promise<void> {
return new Observable<any>(sub => { return new Promise((res, rej) => {
if ( this.hostRecord.UUID && this.pendingSetup ) { if ( !this.node.Value ) {
if ( !this.hostRecord.Value ) { this.node.Value = {};
this.hostRecord.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.dbName = res.data.Name;
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.dbName = res.data.Name;
this.pendingSetup = false;
sub.next(true);
sub.complete();
});
}
} else {
this.pendingSetup = true;
}
});
} }
console.log('loading db');
if ( !this.node.Value.Value && this.editorService.canEdit() ) {
this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
next: result => {
this.dbRecord = result.data;
this.dbName = result.data.Name;
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 {
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,
});
}
});
}
} }

3
src/app/pages/editor/editor.page.html
View File

@ -31,6 +31,9 @@
<ng-container *ngIf="node.isNorm()"> <ng-container *ngIf="node.isNorm()">
<editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm> <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
</ng-container> </ng-container>
<ng-container *ngIf="node.type === 'database_ref'">
<editor-database style="flex: 1;" [nodeId]="node.UUID"></editor-database>
</ng-container>
<ng-container *ngIf="node.type === 'code_ref'"> <ng-container *ngIf="node.type === 'code_ref'">
<editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code> <editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
</ng-container> </ng-container>

2
src/app/pages/editor/editor.page.scss
View File

@ -25,7 +25,7 @@ ion-icon.invisible {
color: var(--noded-background-code); color: var(--noded-background-code);
} }
&.db { &.database_ref {
color: var(--noded-background-db); color: var(--noded-background-db);
} }
} }

1
src/app/pages/editor/editor.page.ts
View File

@ -23,6 +23,7 @@ export class EditorPage implements OnInit {
norm: 'fa fa-quote-left', norm: 'fa fa-quote-left',
page: 'fa fa-sticky-note', page: 'fa fa-sticky-note',
db: 'fa fa-database', db: 'fa fa-database',
database_ref: 'fa fa-database',
code: 'fa fa-code', code: 'fa fa-code',
code_ref: 'fa fa-code', code_ref: 'fa fa-code',
}; };