parent
c69aed2488
commit
5eb68b9338
GPG Key ID:
D2BF5FBA8298F246
@ -0,0 +1,92 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title"><i [ngClass]="typeIcons.db + ' mr-10'"></i> Link Form to Database</div>
|
||||
<button
|
||||
class="clear-btn"
|
||||
style="padding: 0 20px; background: #4CB963;"
|
||||
(click)="dismiss(true)"
|
||||
title="Save changes and close"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button title="Close without saving" class="close" (click)="dismiss(false)">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<ion-grid style="width: 100%; padding: 20px; height: 100%;">
|
||||
<ion-col size="12">
|
||||
<ion-item>
|
||||
<ion-label position="floating">Destination Database</ion-label>
|
||||
<ionic-selectable
|
||||
[items]="databases"
|
||||
itemTextField="name"
|
||||
itemValueField="uuid"
|
||||
[canSearch]="true"
|
||||
[title]="'Select a destination database for form submissions'"
|
||||
(onChange)="onDatabaseChange()"
|
||||
[(ngModel)]="selectedDatabase"
|
||||
>
|
||||
<ng-template ionicSelectableItemTemplate let-port="item" let-isPortSelected="itemIsSelected">
|
||||
<div><i [ngClass]="typeIcons.db" style="margin-right: 15px;"></i>{{ port.name }}</div>
|
||||
</ng-template>
|
||||
</ionic-selectable>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col size="12" *ngIf="selectedDatabase">
|
||||
<ion-row>
|
||||
<ion-col size="12">
|
||||
<h3>Form-to-Database Mapping</h3>
|
||||
<p>In order for the form to save properly, define a mapping of which form fields should be stored in which database fields.</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row *ngFor="let item of mapping" style="border: 1px solid #999999; border-radius: 3px; margin: 15px 0;">
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Form Field (Source)</ion-label>
|
||||
<ionic-selectable
|
||||
[items]="formFields"
|
||||
itemTextField="label"
|
||||
itemValueField="NodeId"
|
||||
[canSearch]="true"
|
||||
[title]="'Select the form field for this mapping'"
|
||||
[(ngModel)]="item.formNode"
|
||||
></ionic-selectable>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Database Column (Destination)</ion-label>
|
||||
<ionic-selectable
|
||||
[items]="selectedDatabaseColumns"
|
||||
itemTextField="name"
|
||||
itemValueField="uuid"
|
||||
[canSearch]="true"
|
||||
[title]="'Select the database column for this mapping'"
|
||||
[(ngModel)]="item.databaseColumn"
|
||||
></ionic-selectable>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col size="1">
|
||||
<button
|
||||
class="clear-btn"
|
||||
style="padding: 15px; height: 100%; color: red; border: 2px solid white; border-radius: 3px;"
|
||||
title="Delete this mapping"
|
||||
(click)="onMappingDelete(item)"
|
||||
>
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row *ngIf="selectedDatabase">
|
||||
<ion-col size="12">
|
||||
<button
|
||||
style="width: 100%; background: none; color: #999999; border: 1px solid #999999; border-radius: 3px; padding: 10px;"
|
||||
(click)="onAddMappingClick($event)"
|
||||
>
|
||||
<i class="fa fa-plus mr-10"></i> Add Mapping
|
||||
</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-grid>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
background: lightgrey;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.close {
|
||||
padding: 10px 15px;
|
||||
background: #ff6666;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.revert {
|
||||
color: red;
|
||||
background: #eaeaea;
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue