diff options
Diffstat (limited to 'public/src/app/rule-engine/version-type-select')
3 files changed, 166 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.html b/public/src/app/rule-engine/version-type-select/version-type-select.component.html new file mode 100644 index 0000000..79b9eae --- /dev/null +++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.html @@ -0,0 +1,34 @@ +<div class="selected-event"> + + <div style="flex:1; display: flex; align-items: center;"> + + <span class="field-label required" style="margin-right: 10px;">Mapping Target</span> + <select name="mappingTarget" [(ngModel)]="mappingTarget" (ngModelChange)="onChangeMapping($event)" data-tests-id="mappingDdl" + style="height: 27px; padding: 0.3rem; margin-right: 18px;" class="field-select"> + <option [ngValue]="null" disabled>Select Mapping</option> + <option *ngFor="let target of advancedSetting" [value]="target.name" data-tests-id="templateOptions">{{target.name}}</option> + </select> + + <span class="field-label required" style="font-size: 13px; margin-right: 10px; display: flex; + align-items: center;" [ngClass]="{'required' : !readOnly}"> + Version + </span> + <select *ngIf="!readOnly" style="height: 27px; padding: 0.3rem; margin-right: 18px;" [(ngModel)]="selectedVersion" (ngModelChange)="onSelectVersion($event)" + data-tests-id="selectVersion"> + <option [ngValue]="null" disabled>Select Version</option> + <option *ngFor="let version of versions" [value]="version" data-tests-id="option">{{version}}</option> + </select> + <span *ngIf="readOnly" style="height: 27px; padding: 0.3rem; width:100px; margin-right: 18px; border: 1px solid #D2D2D2; display: flex; align-items: center; background: #F2F2F2">{{selectedVersion}}</span> + + <span class="field-label required" style="font-size: 13px; display: flex; align-items: center; width: 100px;" [ngClass]="{'required' : !readOnly}"> + Event Domain + </span> + <select *ngIf="!readOnly" style="height: 27px; padding: 0.3rem;" [(ngModel)]="selectedEvent" (ngModelChange)="onSelectEventType($event)" + data-tests-id="selectEventType"> + <option [ngValue]="null" disabled>Select Type</option> + <option *ngFor="let event of events" [value]="event" data-tests-id="option">{{event | slice:0:event.length-6}}</option> + </select> + <span *ngIf="readOnly" style="height: 27px; padding: 0.3rem; width:200px; border: 1px solid #D2D2D2; display: flex; align-items: center; background: #F2F2F2">{{selectedEvent | slice:0:selectedEvent.length-6}}</span> + </div> + +</div> diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.scss b/public/src/app/rule-engine/version-type-select/version-type-select.component.scss new file mode 100644 index 0000000..9f7bad3 --- /dev/null +++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.scss @@ -0,0 +1,46 @@ +.selected-event { + display: flex; + margin: 10px 0; + // align-items: center; + flex-direction: column; + margin-bottom: 30px; +} + +.small-padding { + padding-right: 1rem; +} + +.btn { + padding: 6px; + margin: 6px 8px 6px 8px; + min-width: 88px; + border-radius: 3px; + font-size: 14px; + text-align: center; + text-transform: uppercase; + text-decoration: none; + border: none; + outline: none; +} + +.target-field { + width: 370px; + display: flex; + align-items: center; + margin: 10px; + .field-label { + padding-right: 10px; + } + .required::before { + content: '*'; + color: red; + padding-right: 5px; + } + .field-select { + flex: 1; + width: 100%; + min-width: 250px; + padding: 5px 0 5px 5px; + margin: 0; + } +} diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.ts b/public/src/app/rule-engine/version-type-select/version-type-select.component.ts new file mode 100644 index 0000000..b4170a5 --- /dev/null +++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.ts @@ -0,0 +1,86 @@ +import { Component, Output, EventEmitter, Input } from '@angular/core'; +import { RuleEngineApiService } from '../api/rule-engine-api.service'; +import { Store } from '../../store/store'; + +@Component({ + selector: 'app-version-type-select', + templateUrl: './version-type-select.component.html', + styleUrls: ['./version-type-select.component.scss'] +}) +export class VersionTypeSelectComponent { + mappingTarget: string; + selectedEvent: String; + selectedVersion: String; + events: Array<String>; + loader: boolean; + editMode = false; + readOnly = false; + @Input() versions; + @Input() metaData; + @Output() nodesUpdated = new EventEmitter(); + @Output() refrashRuleList = new EventEmitter(); + advancedSetting; + + constructor(private _ruleApi: RuleEngineApiService, public store: Store) { + this.selectedVersion = null; + this.selectedEvent = null; + // set ddl with the first option value. + this.mappingTarget = this.store.configurationForm[0].name; + this.advancedSetting = this.store.configurationForm.filter(item => { + if ( + !( + item.hasOwnProperty('constraints') && + !item.assignment.value.includes('get_input') + ) + ) { + return item; + } + }); + } + + onChangeMapping(configurationKey) { + console.log('changing propertiy key:', configurationKey); + this._ruleApi.setFieldName(configurationKey); + this.refrashRuleList.next(); + } + + updateData(version, eventType, isList) { + this.selectedVersion = version; + this.selectedEvent = eventType; + this.readOnly = true; + } + + updateVersionTypeFlag(flag) { + this.readOnly = flag; + if (flag === false) { + this.selectedVersion = null; + this.selectedEvent = null; + } + } + + onSelectVersion(version, eventType) { + if (typeof eventType === 'undefined') { + this.selectedEvent = ''; + this.events = this.metaData + .filter(x => x.version === version) + .map(x => x.eventTypes)[0]; + if (eventType) { + this.editMode = true; + this.selectedEvent = eventType + 'Fields'; + } + } + } + + onSelectEventType(eventType) { + this.loader = true; + this._ruleApi + .getSchema(this.selectedVersion, this.selectedEvent) + .subscribe(tree => { + console.log('tree: ', tree); + this.loader = false; + this.nodesUpdated.emit({ + nodes: tree + }); + }); + } +} |