You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
7.6 KiB
257 lines
7.6 KiB
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, LoadingController, ModalController} from '@ionic/angular';
|
|
import {ColumnsComponent} from './columns/columns.component';
|
|
import {AgGridAngular} from 'ag-grid-angular';
|
|
import {NumericEditorComponent} from './editors/numeric/numeric-editor.component';
|
|
import {ParagraphEditorComponent} from './editors/paragraph/paragraph-editor.component';
|
|
import {BooleanEditorComponent} from './editors/boolean/boolean-editor.component';
|
|
import {SelectEditorComponent} from './editors/select/select-editor.component';
|
|
|
|
@Component({
|
|
selector: 'editor-database',
|
|
templateUrl: './database.component.html',
|
|
styleUrls: ['./database.component.scss'],
|
|
})
|
|
export class DatabaseComponent implements OnInit {
|
|
@Input() hostRecord: HostRecord;
|
|
@Input() readonly = false;
|
|
@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;
|
|
public lastClickRow = -1;
|
|
|
|
constructor(
|
|
protected api: ApiService,
|
|
protected modals: ModalController,
|
|
protected alerts: AlertController,
|
|
protected loader: LoadingController,
|
|
) { }
|
|
|
|
title = 'app';
|
|
columnDefs = [];
|
|
rowData = [];
|
|
|
|
ngOnInit() {
|
|
// 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() {
|
|
this.dirty = true;
|
|
}
|
|
|
|
async onManageColumns() {
|
|
if ( this.readonly ) {
|
|
return;
|
|
}
|
|
|
|
const modal = await this.modals.create({
|
|
component: ColumnsComponent,
|
|
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.columnDefs = res.data;
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
await modal.present();
|
|
}
|
|
|
|
onInsertRow() {
|
|
if ( this.readonly ) {
|
|
return;
|
|
}
|
|
|
|
this.rowData.push({});
|
|
this.agGridElement.api.setRowData(this.rowData);
|
|
this.dirty = true;
|
|
}
|
|
|
|
async onRemoveRow() {
|
|
if ( this.readonly ) {
|
|
return;
|
|
}
|
|
|
|
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;
|
|
this.dirty = true;
|
|
},
|
|
}
|
|
],
|
|
});
|
|
|
|
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;
|
|
}
|
|
|
|
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 => {
|
|
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.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.cellEditorFramework = BooleanEditorComponent;
|
|
} else if ( x.Type === 'select' ) {
|
|
x.cellEditorFramework = SelectEditorComponent;
|
|
}
|
|
|
|
console.log({x});
|
|
return x;
|
|
});
|
|
|
|
sub.next();
|
|
sub.complete();
|
|
});
|
|
}
|
|
|
|
getInitObservable(): Observable<any> {
|
|
return new Observable<any>(sub => {
|
|
if ( this.hostRecord.UUID && this.pendingSetup ) {
|
|
if ( !this.hostRecord.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.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;
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|