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

src/app/pages/editor/editor.page.html

@@ -27,7 +27,7 @@
           {{ (editorService.isSaving || editorService.willSave) ? 'Saving...' : 'Saved!' }}
         </button>
         <button
-          *ngIf="editorService.isEditing && editorService.canEdit()"
+          *ngIf="editorService.isEditing && editorService.canEdit() && !isFilloutMode"
           title="More page options"
           (click)="onPageMenuClick($event)"
           class="clear-btn"
@@ -52,7 +52,7 @@
           style="display: flex; margin-bottom: 20px;"
           *ngFor="let node of editorService.immutableNodes"
         >
-          <div class="host-icons">
+          <div class="host-icons" *ngIf="!isFilloutMode">
             <i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : (node.isForm() ? 'form-input ' + node.type : node.type))"></i>
             <button (click)="onOptionsClick($event, node)" *ngIf="editorService.canEdit()" class="clear-btn">
               <i class="fa fa-ellipsis-v" title="Node options"></i>
@@ -74,10 +74,10 @@
             <editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-files>
           </ng-container>
           <ng-container *ngIf="node.isForm()">
-            <editor-node-form-input style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-node-form-input>
+            <editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-node-form-input>
           </ng-container>
         </div>
-        <button *ngIf="editorService.canEdit()" class="host-add-button" (click)="onAddClick($event)">
+        <button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">
           <i class="fa fa-plus"></i> Add Node
         </button>
       </div>

src/app/pages/editor/editor.page.ts

@@ -8,6 +8,8 @@ import {EditorService} from '../../service/editor.service';
 import {NodeTypeIcons} from '../../structures/node-types';
 import {OptionMenuComponent} from '../../components/option-menu/option-menu.component';
 import {VersionModalComponent} from '../../components/version-modal/version-modal.component';
+import {debug} from '../../utility';
+import {DatabaseLinkComponent} from '../../components/editor/forms/database-link.component';
 
 @Component({
   selector: 'app-editor',
@@ -17,6 +19,7 @@ import {VersionModalComponent} from '../../components/version-modal/version-moda
 export class EditorPage implements OnInit {
   public typeIcons = NodeTypeIcons;
   @Input() pageId: string;
+  @Input() isFilloutMode = false;
   @Input() hosted = false;
   @Input() version?: number;
 
@@ -42,6 +45,7 @@ export class EditorPage implements OnInit {
   ) {
     this.route.params.subscribe(params => {
       this.pageId = params.id;
+      debug('Got page ID from route:', this.pageId, params);
     });
 
     this.editorService = editorService.getEditor();
@@ -138,6 +142,7 @@ export class EditorPage implements OnInit {
   }
 
   async onPageMenuClick(event: MouseEvent) {
+    debug('Page type: ', this.pageType)
     const popover = await this.popover.create({
       event,
       component: OptionMenuComponent,
@@ -149,6 +154,14 @@ export class EditorPage implements OnInit {
             value: 'view-versions',
             title: 'View other versions of this page',
           },
+          ...(this.editorService.currentPageType === 'form' ? [
+            {
+              name: 'Link to Database',
+              icon: NodeTypeIcons.db,
+              value: 'link-to-db',
+              title: 'Configure the database where submissions of this form will be stored',
+            },
+          ] : []),
         ],
       },
     });
@@ -158,12 +171,38 @@ export class EditorPage implements OnInit {
 
       if ( data === 'view-versions' ) {
         await this.showVersionModal();
+      } else if ( data === 'link-to-db' ) {
+        await this.showFormDatabaseLinkModal();
       }
     });
 
     await popover.present();
   }
 
+  async showFormDatabaseLinkModal() {
+    const modal = await this.modals.create({
+      component: DatabaseLinkComponent,
+      componentProps: {
+        pageId: this.pageId,
+        editorUUID: this.editorService.instanceUUID,
+      },
+      cssClass: 'modal-med',
+    });
+
+    modal.onDidDismiss().then(data => {
+      debug('Database link closed', data);
+    });
+
+    const modalState = {
+      modal : true,
+      desc : 'Link form to database'
+    };
+
+    history.pushState(modalState, null);
+
+    await modal.present();
+  }
+
   async showVersionModal() {
     const modal = await this.modals.create({
       component: VersionModalComponent,
@@ -173,8 +212,8 @@ export class EditorPage implements OnInit {
       cssClass: 'modal-big',
     });
 
-    modal.onDidDismiss().then(reload => {
-      if ( reload ) {
+    modal.onDidDismiss().then(data => {
+      if ( data.data ) {
         this.editorService.startEditing(this.pageId);
       }
     });

src/app/service/editor.service.ts

@@ -72,6 +72,19 @@ export class EditorService {
         return !!this.currentPage;
     }
 
+    public get metadata() {
+        if ( this.currentPage.AdditionalData ) {
+            return this.currentPage.AdditionalData;
+        }
+
+        return {};
+    }
+
+    public set metadata(data: any) {
+        this.currentPage.AdditionalData = data;
+        this.dirtyOverride = true;
+    }
+
     public get immutableNodes(): HostRecord[] {
         return [...this.currentNodes];
     }

src/app/structures/PageRecord.ts

@@ -23,6 +23,7 @@ export default class PageRecord {
     public ChildPageIds: Array<string>;
     public level: 'view'|'manage'|'update'|false;
     public PageType: 'page' | 'form' = 'page';
+    public AdditionalData: any;
 
     constructor(data: any = {Name: 'Click to edit...'}) {
         [
@@ -40,6 +41,7 @@ export default class PageRecord {
             'ChildPageIds',
             'level',
             'PageType',
+            'AdditionalData',
         ].forEach(field => {
             if ( field in data ) {
                 this[field] = data[field];
@@ -61,7 +63,8 @@ export default class PageRecord {
             'UpdatedAt',
             'CreatedUserId',
             'UpdateUserId',
-            'ChildPageIds'
+            'ChildPageIds',
+            'AdditionalData',
         ].forEach(field => {
             if ( field in this ) {
                 data[field] = this[field];

src/app/utility.ts

@@ -29,8 +29,14 @@ export function isDebug() {
     return environment.outputDebug;
 }
 
+export function getCaller(error: Error) {
+    const stackLines = error.stack.split(/\n|\sat\s/).map(x => x.trim()).filter(Boolean);
+    const messageInStack = (new Error()).stack.split(/\n|\sat\s/).map(x => x.trim()).filter(Boolean)?.[0] === 'Error';
+    return stackLines?.[messageInStack ? 2 : 1]?.split(/@|\s\(/)?.[0]?.replace(/[\/\\<]/g, '');
+}
+
 export function debug(...out: any[]) {
-    const caller = (new Error())?.stack?.split('\n')?.[1]?.split('@')?.[0]?.replace(/[\/\\<]/g, '');
+    const caller = getCaller(new Error());
 
     // Define different types of styles
     const baseStyles = [

src/global.scss

@@ -157,6 +157,14 @@ hr {
   }
 }
 
+.mr-10 {
+  margin-right: 10px;
+}
+
+ionic-selectable-modal {
+  border: 1px solid lightgrey;
+}
+
 .modal-big {
   .modal-wrapper {
     min-height: calc(100vh - 30px);
@@ -202,7 +210,7 @@ body.dark {
     border-radius: 4px;
   }
 
-  .clear-btn {
+  h1, h2, h3, h4, h5, h6, p, .clear-btn {
     color: white;
   }
 }