diff options
Diffstat (limited to 'public/src/app/import-rules')
3 files changed, 210 insertions, 0 deletions
diff --git a/public/src/app/import-rules/import-rules.component.html b/public/src/app/import-rules/import-rules.component.html new file mode 100644 index 0000000..b19c4e3 --- /dev/null +++ b/public/src/app/import-rules/import-rules.component.html @@ -0,0 +1,47 @@ +<div data-tests-id="import-rules-container"> + + <div> + <div style="font-size: 20px; margin-bottom:13px;"> + Import + </div> + </div> + + <div style="display:flex; flex-direction:column;"> + <span class="field-label required space-down" style="margin-right: 10px; color: #5a5a5a; font-size:12px;">Mapping Target</span> + + <select name="mappingTargetForImport" [(ngModel)]="mappingTarget" (ngModelChange)="onChangeMapping($event)" data-tests-id="mappingDdl" + style="width: 416px; + height: 35px; + margin-bottom:17px; + border-radius: 2px; + background-color: #ffffff; + border: solid 1px #d2d2d2;" class="field-select"> + <option [ngValue]="null" disabled>Select Mapping</option> + <optgroup label="Rules Configured"> + <option *ngFor="let target of advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option> + </optgroup> + <optgroup label="No Mapping Configuration"> + <option *ngFor="let target of advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option> + </optgroup> + </select> + </div> + + <div style="margin-bottom:17px;"> + <div style="font-size: 12px; color: #5a5a5a;"> + Selected file + </div> + <div class="import-container"> + <input type="text" class="field-text" [(ngModel)]="fileName" readonly style="width: 300px; + height: 35px; + border-radius: 2px; + margin-right: 20px; + background-color: #ffffff; + border: solid 1px #d2d2d2;"> + <button mat-raised-button style="border: 1px solid #009fdb; color:#009fdb; font-size: 14px; font-family: 'Open Sans', sans-serif;text-align: center; height: 36px; width: 96px;"> + Browse + </button> + <input type="file" id="file" accept=".json" (change)="handleFileInput($event.target.files)"> + </div> + </div> + +</div> diff --git a/public/src/app/import-rules/import-rules.component.scss b/public/src/app/import-rules/import-rules.component.scss new file mode 100644 index 0000000..ec1fd30 --- /dev/null +++ b/public/src/app/import-rules/import-rules.component.scss @@ -0,0 +1,23 @@ +.import-container { + position: relative; + overflow: hidden; + display: flex; + .field-text { + width: 100%; + min-width: 250px; + padding: 5px 0 5px 5px; + margin-right: 10px; + border-radius: 2px; + border: 1px solid #d2d2d2; + color: #5a5a5a; + height: 36px; + } +} +.import-container input[type='file'] { + position: absolute; + left: 0; + top: 0; + opacity: 0; + width: 100%; + height: 36px; +} diff --git a/public/src/app/import-rules/import-rules.component.ts b/public/src/app/import-rules/import-rules.component.ts new file mode 100644 index 0000000..b581dc6 --- /dev/null +++ b/public/src/app/import-rules/import-rules.component.ts @@ -0,0 +1,140 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { Store } from '../store/store'; +import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service'; + +@Component({ + selector: 'app-import-rules', + templateUrl: './import-rules.component.html', + styleUrls: ['./import-rules.component.scss'] +}) +export class ImportRulesComponent { + fileToUpload: File = null; + fileName = ''; + mappingTarget: string; + advancedSetting: Array<any>; + tabName: string; + isGroup = false; + @Output() refrashRuleList = new EventEmitter(); + + constructor(public _ruleApi: RuleEngineApiService, public store: Store) { + this._ruleApi.tabIndex + // .filter(index => { if (index >= 0) { const tabName = + // this.store.cdump.nodes[index].name; console.log('tab name:', tabName); if + // (tabName.toLowerCase().includes('map')) { return index; } } }) + .subscribe(index => { + if (index >= 0) { + this.tabName = this.store.cdump.nodes[index].name; + console.log('tab name:', this.tabName); + if ( + this.tabName.toLowerCase().includes('map') || + this.tabName.toLowerCase().includes('highlandpark') || + this.tabName.toLowerCase().includes('hp') + ) { + this.advancedSetting = this.store.tabsProperties[index].filter( + item => { + if ( + !( + item.hasOwnProperty('constraints') && + item.value !== undefined && + !item.value.includes('get_input') + ) + ) { + return item; + } + } + ); + this.mappingTarget = this.advancedSetting[0].name; + + this._ruleApi.setParams({ + userId: this.store.sdcParmas.userId, + nodeName: this.store.tabParmasForRule[0].name, + nodeId: this.store.tabParmasForRule[0].nid, + vfcmtUuid: this.store.mcUuid, + fieldName: this.mappingTarget, + flowType: this.store.cdump.flowType + }); + + this._ruleApi + .generateMappingRulesFileName( + this.store.tabParmasForRule[0].name, + this.store.tabParmasForRule[0].nid, + this.store.mcUuid + ) + .subscribe(response => { + console.log( + 'generateMappingRulesFileName response: ', + response + ); + this.advancedSetting.forEach(element => { + if (response.includes(element.name)) { + element.isExist = true; + } else { + element.isExist = false; + } + }); + }); + console.log('advancedSetting', this.advancedSetting); + } + } + }); + } + + onChangeMapping(configurationKey) { + console.log('changing propertiy key:', configurationKey); + this._ruleApi.setFieldName(configurationKey); + this.refrashRuleList.next(); + } + + private notifyError(error: any) { + this.store.loader = false; + console.log(error.notes); + this.store.ErrorContent = Object.values(error.requestError); + this.store.displayErrorDialog = true; + } + + handleFileInput(files: FileList) { + this.store.loader = true; + this.fileToUpload = files.item(0); + console.log('file to load:', this.fileToUpload); + this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : ''; + const reader = new FileReader(); + reader.readAsText(this.fileToUpload, 'UTF-8'); + reader.onload = () => { + console.log(reader.result); + this._ruleApi + .getLatestMcUuid({ + contextType: this.store.sdcParmas.contextType, + serviceUuid: this.store.sdcParmas.uuid, + vfiName: this.store.vfiName, + vfcmtUuid: this.store.mcUuid + }) + .subscribe( + res => { + this.store.mcUuid = res.uuid; + if ( + this.tabName.toLowerCase().includes('highlandpark') || + this.tabName.toLowerCase().includes('hp') + ) { + this.isGroup = true; + } + this._ruleApi + .importRules(reader.result, res.uuid, this.isGroup) + .subscribe( + response => { + console.log('success import', response); + this.store.expandImports[this.store.tabIndex] = false; + this.store.loader = false; + this._ruleApi.callUpdateTabIndex(this.store.tabIndex); + }, + error => { + this.notifyError(error); + } + ); + }, + error => { + this.notifyError(error); + } + ); + }; + } +} |