Add form mapping to database interface

src/app/components/components.module.ts

@@ -44,6 +44,7 @@ import {PageLinkRendererComponent} from './editor/database/renderers/page-link-r
 import {PageLinkEditorComponent} from './editor/database/editors/page-link/page-link-editor.component';
 import {FormInputComponent} from './nodes/form-input/form-input.component';
 import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-options.component';
+import {DatabaseLinkComponent} from './editor/forms/database-link.component';
 
 @NgModule({
   declarations: [
@@ -81,6 +82,7 @@ import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-o
     PageLinkEditorComponent,
     FormInputComponent,
     FormInputOptionsComponent,
+    DatabaseLinkComponent,
   ],
   imports: [
     CommonModule,
@@ -131,6 +133,7 @@ import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-o
     PageLinkEditorComponent,
     FormInputComponent,
     FormInputOptionsComponent,
+    DatabaseLinkComponent,
   ],
   exports: [
     NodePickerComponent,
@@ -167,6 +170,7 @@ import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-o
     PageLinkEditorComponent,
     FormInputComponent,
     FormInputOptionsComponent,
+    DatabaseLinkComponent,
   ]
 })
 export class ComponentsModule {}

src/app/components/editor/forms/database-link.component.html

@@ -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>

src/app/components/editor/forms/database-link.component.scss

@@ -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;
+  }
+}

src/app/components/editor/forms/database-link.component.ts

@@ -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();
+    }
+}