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.
107 lines
3.4 KiB
107 lines
3.4 KiB
import {Component, Input, OnInit} from '@angular/core';
|
|
import {AlertController, ModalController} from '@ionic/angular';
|
|
import {EditorService} from '../../../service/editor.service';
|
|
import {debug} from '../../../utility';
|
|
import {NodeTypeIcons} from '../../../structures/node-types';
|
|
import {Database, DatabaseColumn} from '../../../structures/db-api';
|
|
import {DbApiService} from '../../../service/db-api.service';
|
|
import HostRecord from '../../../structures/HostRecord';
|
|
|
|
export interface FormDatabaseMap {
|
|
formNodeId?: string;
|
|
databaseColumnId?: string;
|
|
|
|
formNode?: any;
|
|
databaseColumn?: DatabaseColumn;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'noded-form-database-link',
|
|
templateUrl: './database-link.component.html',
|
|
styleUrls: ['./database-link.component.scss'],
|
|
})
|
|
export class DatabaseLinkComponent implements OnInit {
|
|
@Input() pageId: string;
|
|
@Input() editorUUID: string;
|
|
|
|
public readonly typeIcons = NodeTypeIcons;
|
|
public databases: Database[] = [];
|
|
public selectedDatabase?: Database;
|
|
public selectedDatabaseColumns: DatabaseColumn[] = [];
|
|
public mapping: FormDatabaseMap[] = [];
|
|
public formFields: any[] = [];
|
|
|
|
constructor(
|
|
protected alerts: AlertController,
|
|
protected modals: ModalController,
|
|
protected editorService: EditorService,
|
|
protected dbApi: DbApiService,
|
|
) {}
|
|
|
|
async ngOnInit() {
|
|
debug('Database link component', this);
|
|
this.editorService = this.editorService.getEditor(this.editorUUID);
|
|
|
|
this.databases = await this.dbApi.getDatabases();
|
|
|
|
this.formFields = this.editorService.immutableNodes
|
|
.filter(x => x.isForm())
|
|
.map(x => {
|
|
const data = {...x.AdditionalData};
|
|
data.NodeId = x.UUID;
|
|
return data;
|
|
});
|
|
|
|
const meta = this.editorService.metadata;
|
|
if ( meta?.formDatabaseId ) {
|
|
this.selectedDatabase = this.databases.find(x => x.uuid === meta.formDatabaseId);
|
|
await this.onDatabaseChange();
|
|
}
|
|
|
|
if ( Array.isArray(meta?.formMapping) ) {
|
|
this.mapping = meta.formMapping.map(x => {
|
|
return {
|
|
formNode: this.formFields.find(field => field.NodeId === x.formNodeId),
|
|
databaseColumn: this.selectedDatabaseColumns.find(column => column.uuid === x.databaseColumnId),
|
|
};
|
|
});
|
|
}
|
|
}
|
|
|
|
onAddMappingClick(event) {
|
|
this.mapping.push({} as FormDatabaseMap);
|
|
}
|
|
|
|
async onDatabaseChange() {
|
|
this.mapping = [];
|
|
this.selectedDatabaseColumns = await this.selectedDatabase.columns();
|
|
}
|
|
|
|
onMappingDelete(item) {
|
|
this.mapping = this.mapping.filter(x => x !== item);
|
|
}
|
|
|
|
dismiss(save = false) {
|
|
if ( save ) {
|
|
const merge = {
|
|
formDatabaseId: this.selectedDatabase?.uuid,
|
|
formMapping: this.mapping.map(x => {
|
|
return {
|
|
formNodeId: x.formNode?.NodeId || x.formNodeId,
|
|
databaseColumnId: x.databaseColumn?.uuid || x.databaseColumnId,
|
|
};
|
|
}),
|
|
};
|
|
|
|
this.editorService.metadata = {
|
|
...this.editorService.metadata,
|
|
...merge,
|
|
};
|
|
|
|
this.editorService.triggerSave();
|
|
}
|
|
|
|
this.modals.dismiss();
|
|
}
|
|
}
|