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.
92 lines
4.1 KiB
92 lines
4.1 KiB
<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> |