diff options
Diffstat (limited to 'public/src/app/rule-engine/rule-list')
3 files changed, 728 insertions, 139 deletions
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.html b/public/src/app/rule-engine/rule-list/rule-list.component.html index 4ce6efb..9a9997e 100644 --- a/public/src/app/rule-engine/rule-list/rule-list.component.html +++ b/public/src/app/rule-engine/rule-list/rule-list.component.html @@ -2,8 +2,8 @@ <div class="header"> <span style="font-size: 18px; margin-left:20px;">Rule Engine</span> <div style="display:flex"> - <button mat-raised-button (click)="translateRules()" color="primary" [disabled]="store.ruleList.length === 0" style="margin-right: 10px; width: 113px;height: 36px;" - data-tests-id="btnTranslate"> + <button mat-raised-button (click)="translateRules()" color="primary" [disabled]="store.ruleList.length === 0 || entryPhase === '' || publishPhase === '' " + style="margin-right: 10px; width: 113px;height: 36px;" data-tests-id="btnTranslate"> Translate </button> <app-bar-icons [tabName]="this.store.tabParmasForRule[0].name"></app-bar-icons> @@ -13,87 +13,238 @@ <div style="margin: 0rem 1rem; flex-grow: 1; overflow-y: auto;"> <!-- error container --> - <div *ngIf="error" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold;"> + <div *ngIf="error" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin-bottom: 15px;"> {{ error }} </div> - <app-version-type-select #versionEventType [versions]="versions" [metaData]="metaData" (nodesUpdated)="handleUpdateNode($event)" - (refrashRuleList)="handlePropertyChange()"></app-version-type-select> + <div style="display: flex"> + <app-version-type-select #versionEventType [versions]="versions" [metaData]="metaData" (nodesUpdated)="handleUpdateNode($event)" + (refrashRuleList)="handlePropertyChange()"></app-version-type-select> - <!-- <div class="container-phase-notify"> - <div> - <span class="field-label required" style="margin-right: 10px;"> - phase - </span> - <select name="phase" [(ngModel)]="phase" data-tests-id="phase" style="height: 27px; padding: 0.3rem; margin-right: 18px;" - class="field-select"> - <option [ngValue]="null" disabled>Select phase</option> - </select> + <div style="display:flex;"> + <div class="field" style="display: flex; align-items: baseline;flex-direction: column; margin:0; margin-right: 10px;"> + <div class="field-label required" style="padding-right: 10px;"> + Entry Phase + </div> + <input type="text" name="entryPhase" required [(ngModel)]="entryPhase" class="field-text" style="width:250px;" + data-tests-id="entryPhase" /> + </div> + + <div class="field" style="display: flex; align-items: baseline;flex-direction: column; margin:0; margin-right: 10px;"> + <div class="field-label required" style="padding-right: 10px;"> + Publish Phase + </div> + <input type="text" name="publishPhase" [(ngModel)]="publishPhase" class="field-text" style="width:250px;" + data-tests-id="publishPhase" /> + </div> </div> + </div> - <div class="default" style="display: flex; align-items: center"> - <div class="pretty p-svg"> - <input type="checkbox" name="notifyCheckbox" data-tests-id="notifyCheckbox" /> + <div style="margin-bottom: 24px;"> + <div style="display: flex; justify-content: space-between; align-items: baseline;"> + <div class="pretty p-svg" style="margin-top: 24px; margin-bottom: 10px;"> + <input type="checkbox" name="isCondition" data-tests-id="isFilter" [checked]="ifStatement" (change)="filterCheckbox()" /> <div class="state"> <svg class="svg svg-icon" viewBox="0 0 20 20"> <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: #009fdb; fill:#009fdb;"></path> </svg> - <label>notify OID</label> + <label>Filtering</label> </div> </div> - <div class="input-wrapper"> - <input type="text" ngModel required name="notify-oid" data-tests-id="notify-oid" class="input"> + <div *ngIf="ifStatement"> + <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;" + data-tests-id="applyFilter"> + Apply Filter + </button> </div> </div> - </div> --> - - <div *ngIf="targetSource && store.ruleList.length === 0" style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;"> + <div *ngIf="ifStatement"> + <app-condition #conditions [isFilter]="true" [condition]="condition" (removeConditionCheck)="removeConditionCheck($event)" + (onConditionChange)="updateCondition($event)"></app-condition> + </div> + </div> - <div style="margin: 3em 0 2em 0;"> - <div style="font-size: 1.5em;"> - Rules were not yet created - </div> - <div style="padding: 0.5em; padding-top: 1em;"> - Please create a new normalization rule + <div *ngIf="targetSource && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"> + <div style="display: flex; align-items: baseline; width: 170px; position:relative;" (mouseenter)="showBtnList = true" + (mouseleave)="showBtnList = false" data-tests-id="addGroup"> + <div style="display: flex; align-items: center;"> + <button mat-mini-fab color="primary" id="addGroup" style="height: 16px; width: 16px; display:flex; justify-content: center; background-color: white; border: 1.5px solid #009fdb; color: #009fdb; cursor: default;"> + <span style="width: 100%; + color:#009fdb; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'plus' | feather:12"></span> + </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Phase</span> </div> + + <ul *ngIf="showBtnList" class="button-list"> + <li> + <button class="button-options" [disabled]="disabledMapBtn('map')" (click)="addGroup('map')" data-tests-id="btnMap"> + map + </button> + </li> + <li> + <button class="button-options" [disabled]="disabledMapBtn('enrich')" (click)="addGroup('enrich')" + data-tests-id="btnEnrich"> + enrich + </button> + </li> + </ul> </div> - <button mat-fab (click)="openAction()" style="background-color:#009FDB" data-tests-id="btnAddFirstRule"> - <span [innerHTML]="'plus' | feather:24"></span> - </button> - <span style="margin-top: 1rem; font-size: 14px; color: #009FDB;"> - Add First Rule - </span> - </div> + <div *ngIf="store.groupList.length > 0"> + <div *ngFor="let item of store.groupList; let index = index" style="border: solid 1px #dedede; margin: 15px 0;"> + <div class="field" style="display: flex; align-items: flex-end; margin:0px;margin-left:1em;"> + <div style="margin-right:10px;"> + <img class="icon-img" *ngIf="item.groupId.substring(0, 1).toLowerCase() !== 'm'" src="{{imgBase}}/group_enrich.svg" + alt="group_enrich"> + <img class="icon-img" *ngIf="item.groupId.substring(0, 1).toLowerCase() === 'm'" src="{{imgBase}}/group_map.svg" + alt="group_map"> + </div> + <div class="field-label" style="padding-right: 10px; color: #959595;"> + PHASE NAME + </div> + <input type="text" name="phase" [(ngModel)]="item.phase" class="field-text" data-tests-id="phase" /> - <div *ngIf="store.ruleList.length > 0"> - <div style="display: flex; align-items: center;"> - <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 24px; width: 24px; display:flex" - (click)="openAction()"> - <mat-icon class="material-icons md-18">add</mat-icon> - </button> - <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span> + <!-- <div class="btn-wrapper" *ngIf="item.groupId.substring(0, 1).toLowerCase() === 'm'"> + <button mat-icon-button class="gray button-options" data-tests-id="importCDAP"> + <span style="width: 100%; + color:#5a5a5a; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'upload' | feather:20"></span> + </button> + <input type="file" id="file" accept=".json" (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)"> + </div> --> + + <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId)" + class="gray" data-tests-id="deleteGroup"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'trash-2' | feather:20"></span> + </button> + </div> + + <div style="margin: 1rem;"> + <div *ngFor="let rule of item.list; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1" + (mouseover)="hoveredIndex=index" class="item listOfRule"> + <span style="width:100%; display: flex; align-items: center;"> + {{rule.description}} - [{{rule.uid}}] + </span> + <div style="display: flex; justify-content: flex-end;" class="ruleList-btn"> + <button (click)="openAction(rule, {groupId: item.groupId, phase: item.phase})" data-tests-id="editRule" + class="btn-list" mat-icon-button> + <mat-icon class="md-24">mode_edit</mat-icon> + </button> + <button mat-icon-button class='btn-list' (click)="copyRule(rule, index, {groupId: item.groupId, phase: item.phase})" + data-tests-id="copyRule"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'copy' | feather:20"></span> + </button> + <button (click)="removeItem(rule.uid, item.groupId)" data-tests-id="deleteRule" class="btn-list" + mat-icon-button [disabled]="disableDeleteGroup(item.groupId) && item.list.length === 1"> + <mat-icon class="md-24">delete</mat-icon> + </button> + </div> + </div> + </div> + + <div style="display: flex; align-items: center; margin:1em;"> + <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 16px; width: 16px; display:flex; justify-content: center;" + (click)="openAction(null,item)"> + <span style="width: 100%; + color:white; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'plus' | feather:12"></span> + </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span> + </div> + + </div> </div> </div> - <div style="margin: 30px 0 10px 0;"> + <div *ngIf="targetSource && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"> + + <div *ngIf="targetSource && store.ruleList.length === 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))" + style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;"> - <div *ngFor="let item of store.ruleList; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index" - class="item" style="display: flex;" [ngStyle]="hoveredIndex === index ? {'background-color': '#E6F6FB', 'color': '#009FDB'} : {'background-color': '#FFFFFF', 'color':'gray'}"> - <span style="width:100%; display: flex; align-items: center;"> - {{item.description}} - [{{item.uid}}] + <div style="margin: 3em 0 2em 0;"> + <div style="font-size: 1.5em;"> + Rules were not yet created + </div> + <div style="padding: 0.5em; padding-top: 1em;"> + Please create a new normalization rule + </div> + </div> + + <button mat-fab (click)="openAction()" style="background-color:#009FDB" data-tests-id="btnAddFirstRule"> + <span [innerHTML]="'plus' | feather:24"></span> + </button> + <span style="margin-top: 1rem; font-size: 14px; color: #009FDB;"> + Add First Rule </span> - <div style="display: flex; justify-content: flex-end;" *ngIf="index==hoveredIndex"> - <button (click)="openAction(item)" data-tests-id="editRule" class="btn-list" mat-icon-button> - <mat-icon class="md-24">mode_edit</mat-icon> - </button> - <button (click)="removeItem(item.uid)" data-tests-id="deleteRule" class="btn-list" mat-icon-button> - <mat-icon class="md-24">delete</mat-icon> + </div> + + <div *ngIf="store.ruleList.length > 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"> + <div style="display: flex; align-items: center;"> + <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 16px; width: 16px; display:flex; justify-content: center;" + (click)="openAction()"> + <span style="width: 100%; + color:white; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'plus' | feather:15"></span> </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span> + </div> + </div> + + <div style="margin: 15px 0 10px 0;"> + + <div *ngFor="let item of store.ruleList; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1" + (mouseover)="hoveredIndex=index" class="item" style="display: flex;" [ngStyle]="hoveredIndex === index ? {'background-color': '#E6F6FB', 'color': '#009FDB'} : {'background-color': '#FFFFFF', 'color':'gray'}"> + <span style="width:100%; display: flex; align-items: center;"> + {{item.description}} - [{{item.uid}}] + </span> + <div style="display: flex; justify-content: flex-end;" *ngIf="index==hoveredIndex"> + <button (click)="openAction(item)" data-tests-id="editRule" class="btn-list" mat-icon-button> + <mat-icon class="md-24">mode_edit</mat-icon> + </button> + <button mat-icon-button class='btn-list' (click)="copyRule(item, index)" data-tests-id="copyRule"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'copy' | feather:20"></span> + </button> + <button (click)="removeItem(item.uid, null)" data-tests-id="deleteRule" class="btn-list" mat-icon-button> + <mat-icon class="md-24">delete</mat-icon> + </button> + </div> </div> </div> + </div> + </div> </div> diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.scss b/public/src/app/rule-engine/rule-list/rule-list.component.scss index 6446fbd..822a3f4 100644 --- a/public/src/app/rule-engine/rule-list/rule-list.component.scss +++ b/public/src/app/rule-engine/rule-list/rule-list.component.scss @@ -6,6 +6,7 @@ flex-direction: column; margin: 0; padding: 0; + width: 100%; .header { position: relative; display: flex; @@ -28,6 +29,10 @@ } } +/deep/ .mat-mini-fab .mat-button-wrapper { + padding: 0; +} + .my-full-screen-dialog .mat-dialog-container { max-width: none; width: 100vw; @@ -117,3 +122,74 @@ .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } + +.listOfRule { + display: flex; + background-color: #ffffff; + color: gray; + &:hover { + background-color: #e6f6fb; + color: #009fdb; + } + .ruleList-btn { + opacity: 0; + } + &:hover .ruleList-btn { + opacity: 1; + } +} + +.gray { + color: #696969; +} + +.icon-img { + width: 24px; + height: 24px; + padding: 2px; +} + +.button-list { + position: absolute; + left: 100px; + list-style-type: none; + width: 150px; + border-radius: 2px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); + background-color: #ffffff; + border: solid 1px #d2d2d2; + border-top: 2px solid #009fdb; + margin-left: 11px; + top: 10px; + // margin-top: 15px; + .button-options { + height: 29px; + padding: 7px 9px; + width: 100%; + text-align: left; + background: white; + border: 0px; + &:hover { + background-color: #e6f6fb; + cursor: pointer; + } + &:disabled, + [disabled] { + cursor: default; + } + } +} + +.btn-wrapper { + position: relative; + cursor: pointer; +} +.btn-wrapper input[type='file'] { + position: absolute; + left: 0; + top: 0; + opacity: 0; + width: 100%; + height: 36px; + cursor: pointer; +} diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.ts b/public/src/app/rule-engine/rule-list/rule-list.component.ts index 2857ea2..c2878c1 100644 --- a/public/src/app/rule-engine/rule-list/rule-list.component.ts +++ b/public/src/app/rule-engine/rule-list/rule-list.component.ts @@ -6,6 +6,10 @@ import { timer } from 'rxjs/observable/timer'; import { Store } from '../../store/store'; import { RuleEngineApiService } from '../api/rule-engine-api.service'; import { ConfirmPopupComponent } from '../confirm-popup/confirm-popup.component'; +import { cloneDeep, has, countBy } from 'lodash'; +import { toJS } from 'mobx'; +import { v4 as uuidGenarator } from 'uuid'; +import { environment } from '../../../environments/environment'; const primaryColor = '#009fdb'; @@ -13,7 +17,7 @@ const primaryColor = '#009fdb'; selector: 'app-rule-list', templateUrl: './rule-list.component.html', styleUrls: ['./rule-list.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.Emulated }) export class RuleListComponent { @ViewChild('versionEventType') versionType; @@ -27,6 +31,18 @@ export class RuleListComponent { params; versions; metaData; + tabName; + // group data + showBtnList = false; + entryPhase; + publishPhase; + latestBtnGroup; + imgBase = environment.imagePath; + fileToUpload; + fileName; + // filter + ifStatement = false; + condition: any; private errorHandler(error: any) { this.store.loader = false; @@ -45,7 +61,206 @@ export class RuleListComponent { } } + updateCondition(data) { + this.condition = data; + } + + filterCheckbox() { + this.ifStatement = !this.ifStatement; + if (!this.ifStatement && this.condition !== undefined) { + this.deleteFilter(); + } + } + + removeConditionCheck(flag) { + this.ifStatement = flag; + if (this.condition !== undefined) { + this.deleteFilter(); + } + } + + private deleteFilter() { + this.error = null; + this.store.loader = true; + 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; + this._ruleApi.deleteFilter().subscribe( + response => { + console.log('success import', response); + this.store.loader = false; + }, + error => { + const errorMsg = Object.values(error) as any; + if (errorMsg[0].messageId !== 'SVC6119') { + this.errorHandler(error); + } else { + this.store.loader = false; + } + this.condition = null; + } + ); + }, + error => { + this.errorHandler(error); + } + ); + } + + disabledMapBtn(btnType) { + if (this.store.groupList.length > 0) { + if (btnType === 'map') { + if ( + this.store.groupList[this.store.groupList.length - 1].groupId + .substring(0, 1) + .toLowerCase() === 'm' || + this.store.groupList.length === 3 + ) { + return true; + } else { + return false; + } + } else { + if ( + this.store.groupList[this.store.groupList.length - 1].groupId + .substring(0, 1) + .toLowerCase() === 'e' || + this.store.groupList.length === 3 + ) { + return true; + } else { + return false; + } + } + } + } + + disableDeleteGroup(groupId) { + const countGroupType = countBy(this.store.groupList, item => { + const innerGroupType = + item.groupId.substring(0, 1).toLowerCase() === 'm' ? 'map' : 'enrich'; + return innerGroupType === 'map' ? 'map' : 'enrich'; + }); + const groupType = + groupId.substring(0, 1).toLowerCase() === 'm' ? 'map' : 'enrich'; + if (groupType === 'map') { + return countGroupType.enrich === 2 ? true : false; + } else { + return countGroupType.map === 2 ? true : false; + } + } + + handleImportCDAP(files: FileList, groupId, phaseName) { + this.error = null; + 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; + const input = { + version: this.versionType.selectedVersion, + eventType: this.versionType.selectedEvent, + groupId: groupId, + phase: phaseName, + payload: JSON.parse(reader.result) + }; + this._ruleApi.importPhase(input).subscribe( + response => { + console.log('success import', response); + this.store.loader = false; + this.store.updateRuleList(Object.values(response.rules)); + }, + error => { + this.errorHandler(error); + } + ); + }, + error => { + this.errorHandler(error); + } + ); + }; + } + + addGroup(type) { + this.latestBtnGroup = type; + const defaultPhase = + type === 'enrich' + ? `standard_${this.tabName}_enrich` + : `standard_${this.tabName}`; + const groupId = type + uuidGenarator(); + const newGroup = { + groupId: groupId, + phase: defaultPhase + }; + this.store.groupList.push(newGroup); + this.showBtnList = false; + } + + deleteGroup(groupId) { + this.store.loader = true; + this.error = null; + // check if group list have list + const selectedGroup = this.store.groupList.filter( + item => item.groupId === groupId + ); + const isExistInRuleList = this.store.ruleList.filter( + item => item.groupId === groupId + ); + if (isExistInRuleList.length < 1) { + this.store.groupList = this.store.groupList.filter( + item => item.groupId !== groupId + ); + this.store.loader = false; + } else { + 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; + this._ruleApi.deleteGroup(groupId, res.uuid).subscribe( + response => { + this.store.deleteFromGroup(groupId); + this.store.loader = false; + }, + error => { + this.errorHandler(error); + } + ); + }, + error => this.errorHandler(error), + () => {} + ); + } + } + private getListOfRules() { + this.error = null; this._ruleApi.getListOfRules().subscribe( response => { console.log('res: %o', response); @@ -57,20 +272,37 @@ export class RuleListComponent { ); this.store.updateRuleList(Object.values(response.rules)); this.targetSource = response.schema; - this.store.notifyIdValue = response.notifyId; - this.versionType.notifyIdCheckbox = - response.notifyId !== '' ? true : false; + this.entryPhase = response.entryPhase; + this.publishPhase = response.publishPhase; + this.condition = response.filter; + this.ifStatement = this.condition == null ? false : true; } else { - this.versionType.notifyIdCheckbox = false; this.store.resetRuleList(); + this.condition = null; + this.ifStatement = false; this.versionType.updateVersionTypeFlag(false); this.targetSource = null; + + this._ruleApi.getInitialPhases(this.store.flowType).subscribe( + data => { + (this.entryPhase = data.entryPhase), + (this.publishPhase = data.publishPhase); + }, + error => { + this.errorHandler(error); + } + ); // if the the list is empty then get version and domain events - this._ruleApi.getMetaData().subscribe(data => { - console.log(data); - this.versions = data.map(x => x.version); - this.metaData = data; - }); + this._ruleApi.getMetaData().subscribe( + data => { + console.log(data); + this.versions = data.map(x => x.version); + this.metaData = data; + }, + error => { + this.errorHandler(error); + } + ); } this.store.loader = false; }, @@ -87,28 +319,120 @@ export class RuleListComponent { public store: Store ) { this.store.loader = false; - this._ruleApi.tabIndex.subscribe(index => { - console.log('rule index in rule-list component:', index); - const tabName = this.store.cdump.nodes[index].name; - console.log('tab name:', tabName); - - if (tabName.toLowerCase().includes('map')) { - this.params = { - vfcmtUuid: this.store.mcUuid, - nodeName: this.store.tabParmasForRule[0].name, - nodeId: this.store.tabParmasForRule[0].nid, - fieldName: this.store.tabsProperties[index][0].name, - userId: this.store.sdcParmas.userId, - flowType: this.store.cdump.flowType - }; - console.log('params: %o', this.params); - this.store.loader = true; - // set api params by iframe url query - this._ruleApi.setParams(this.params); - store.ruleListExistParams = this.params; - this.getListOfRules(); + 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 => { + this.error = null; + 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') + ) { + const advancedSetting = this.store.tabsProperties[index].filter( + item => { + if ( + !( + item.hasOwnProperty('constraints') && + item.value !== undefined && + !item.value.includes('get_input') + ) + ) { + return item; + } + } + ); + const mappingTarget = advancedSetting[0].name; + console.log('mappingTarget', mappingTarget); + + this.params = { + vfcmtUuid: this.store.mcUuid, + nodeName: this.store.tabParmasForRule[0].name, + nodeId: this.store.tabParmasForRule[0].nid, + fieldName: mappingTarget, + userId: this.store.sdcParmas.userId, + flowType: this.store.cdump.flowType + }; + console.log('params: %o', this.params); + this.store.loader = true; + // set api params by iframe url query + this._ruleApi.setParams(this.params); + store.ruleListExistParams = this.params; + this.getListOfRules(); + } + } + }); + } + + applyFilter() { + this.store.loader = true; + this.error = null; + 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; + let conditionData2server = null; + conditionData2server = this.convertConditionToServer(this.condition); + const newFilter = { + version: this.versionType.selectedVersion, + eventType: this.versionType.selectedEvent, + entryPhase: this.entryPhase, + publishPhase: this.publishPhase, + filter: conditionData2server + }; + this._ruleApi.applyFilter(newFilter).subscribe( + success => { + this.store.loader = false; + }, + error => { + this.errorHandler(error); + } + ); + }, + error => this.errorHandler(error), + () => {} + ); + } + + convertConditionToServer(tree) { + const cloneCondition = cloneDeep(tree); + const conditionSetData = this.changeRightToArrayOrString( + cloneCondition, + true + ); + let simpleCondition = null; + if (conditionSetData[0].children.length === 1) { + simpleCondition = conditionSetData[0].children; + } + console.log('condition to server:', conditionSetData); + return simpleCondition !== null ? simpleCondition[0] : conditionSetData[0]; + } + + changeRightToArrayOrString(data, toArray) { + data.forEach(element => { + if (element.name === 'operator') { + this.changeRightToArrayOrString(element.children, toArray); + } + if (element.name === 'condition') { + if (toArray) { + element.right = element.right.split(','); + } else { + element.right = element.right.join(','); + } } }); + console.log(data); + return data; } handlePropertyChange() { @@ -119,46 +443,52 @@ export class RuleListComponent { translateRules() { this.store.loader = true; - // send translate JSON - const nofityId = this.store.notifyIdValue; - this._ruleApi.translate(nofityId).subscribe( - data => { - this.store.loader = false; - console.log(JSON.stringify(data)); - let domElementName: string; - this.store.configurationForm.forEach(property => { - console.log('mappingTarget ', this.versionType.mappingTarget); - if (property.name === this.versionType.mappingTarget) { - property.value = JSON.stringify(data); - domElementName = property.name; - console.log(property.name); - } - }); - this.toastr.success('', 'Translate succeeded'); - this.store.expandAdvancedSetting[this.store.tabIndex] = true; - const source = timer(500); - source.subscribe(val => { - const el = document.getElementById(domElementName); - const label = el.children.item(0) as HTMLElement; - label.style.color = primaryColor; - const input = el.children.item(1) as HTMLElement; - input.style.color = primaryColor; - input.style.borderColor = primaryColor; - el.scrollIntoView(); - }); - }, - error => { - this.errorHandler(error); - } - ); + this.error = null; + // send translate JSON const nofityId = this.store.notifyIdValue; + const mcUuid = this.store.mcUuid; + this._ruleApi + .translate(this.entryPhase, this.publishPhase, mcUuid) + .subscribe( + data => { + this.store.loader = false; + console.log(JSON.stringify(data)); + let domElementName: string; + this.store.configurationForm.forEach(property => { + console.log('mappingTarget ', this.versionType.mappingTarget); + if (property.name === this.versionType.mappingTarget) { + property.value = JSON.stringify(data); + domElementName = property.name; + console.log(property.name); + } + }); + this.toastr.success('', 'Successfull translation'); + this.store.expandAdvancedSetting[this.store.tabIndex] = true; + const source = timer(500); + source.subscribe(val => { + const el = document.getElementById(domElementName); + const label = el.children.item(0) as HTMLElement; + label.style.color = primaryColor; + const input = el.children.item(1) as HTMLElement; + input.style.color = primaryColor; + input.style.borderColor = primaryColor; + el.scrollIntoView(); + this.store.cdumpIsDirty = true; + }); + }, + error => { + this.errorHandler(error); + } + ); } handleUpdateNode(data) { this.targetSource = data.nodes; this.store.resetRuleList(); + this.condition = null; + this.ifStatement = false; } - removeItem(uid) { + removeItem(uid, groupId) { this.dialogRef = this.dialog.open(ConfirmPopupComponent, { panelClass: 'my-confrim-dialog', disableClose: true @@ -168,38 +498,70 @@ export class RuleListComponent { if (result) { // call be api this.store.loader = true; - this._ruleApi.deleteRule(uid).subscribe( - success => { - this.store.removeRuleFromList(uid); - // if its the last rule - if (this.store.ruleList.length === 0) { - this._ruleApi.getMetaData().subscribe(data => { - console.log(data); - this.versions = data.map(x => x.version); - this.metaData = data; - this.versionType.updateVersionTypeFlag(false); - this.targetSource = null; - }); - } - this.store.loader = false; - }, - error => { - this.store.loader = false; - this.errorHandler(error); - } - ); + this.error = null; + 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; + this._ruleApi.deleteRule(uid, res.uuid).subscribe( + success => { + this.store.removeRuleFromList(uid, groupId); + // if its the last rule + if (this.store.ruleList.length === 0) { + this._ruleApi.getMetaData().subscribe(data => { + console.log(data); + this.versions = data.map(x => x.version); + this.metaData = data; + this.versionType.updateVersionTypeFlag(false); + this.targetSource = null; + }); + } + this.store.loader = false; + }, + error => { + this.store.loader = false; + this.errorHandler(error); + } + ); + }, + error => this.errorHandler(error), + () => {} + ); } }); } - openAction(item): void { + copyRule(rule, index, groupItem) { + const copyRule = cloneDeep(toJS(rule)); + copyRule.uid = ''; + copyRule.description = copyRule.description.concat('_Copy'); + this.store.ruleList.push(copyRule); + this.openAction(copyRule, groupItem); + this.toastr.warning( + 'The rule you are editing has unsaved changes, please make sure to save your work' + + '.', + 'The mapping rule is copied' + ); + } + + openAction(item, groupItem): void { this.crud = isEmpty(item) ? 'new' : 'edit'; this._ruleApi.passDataToEditor({ version: this.versionType.selectedVersion, eventType: this.versionType.selectedEvent, targetSource: this.targetSource, item: isEmpty(item) ? null : item, - params: this.params + params: this.params, + groupId: isEmpty(groupItem) ? null : groupItem.groupId, + phase: isEmpty(groupItem) ? null : groupItem.phase, + entryPhase: this.entryPhase, + publishPhase: this.publishPhase }); this.store.isLeftVisible = false; |