diff options
Diffstat (limited to 'public/src/app/rule-engine/condition')
3 files changed, 167 insertions, 16 deletions
diff --git a/public/src/app/rule-engine/condition/condition.component.html b/public/src/app/rule-engine/condition/condition.component.html index 0ff244b..7ba21e2 100644 --- a/public/src/app/rule-engine/condition/condition.component.html +++ b/public/src/app/rule-engine/condition/condition.component.html @@ -5,17 +5,58 @@ <div *ngIf="node.data.name === 'operator'" style="background: #F2F2F2;"> <div style="display: flex; margin-left: 5px; align-items: center; min-height: 35px;"> <div style="display: flex; align-items: center;" *ngIf="showType"> - <select style="padding: 5px;" [(ngModel)]="node.data.type"> + <select style="padding: 5px;margin-left: 10px;" [(ngModel)]="node.data.type"> <option value="ANY">ANY</option> <option value="ALL">ALL</option> </select> - <div style="display: flex; align-items: center; margin-left: 10px;"> + <div style="display: flex; align-items: center; margin-left: 10px; width: 150px;"> of the following are true: </div> </div> - <div style="display: flex; margin-left: auto;"> + <div *ngIf="isFilter" style="display: flex; width: 100%; justify-content: space-between; cursor: default;"> + <div style="display: flex;"> + <div style="display: flex; align-items: center; padding: 0 15px;"> + <button mat-mini-fab color="primary" data-tests-id="addCondition" (click)="addConditional(tree, node)" style="height: 16px; width: 16px; display:flex; box-shadow: none;align-items: center;justify-content: center;"> + <span style="width: 100%; + color:white; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'plus' | feather:12"></span> + </button> + <span class="btn-label">Add Filter + </span> + </div> + + <div style="display: flex; align-items: center; padding: 0 25px;"> + <button mat-mini-fab color="primary" data-tests-id="addConditionGroup" [disabled]="node.data.level === 2" (click)="addConditionalGroup(tree, node)" + style="height: 16px; width: 16px; display:flex; box-shadow: none;align-items: center;justify-content: center;"> + <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]="node.data.level === 2 ? '#a7a7a7' : '#009fdb' " class="btn-label">Add Filter Group + </span> + </div> + </div> + <!-- background: #FFFFFF; --> + <div style="display: flex; align-items: center; padding: 0 5px; "> + <button data-tests-id="removeConditionNode" mat-icon-button (click)="removeConditional(tree, node)" class="button-remove"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'trash-2' | feather:20"></span> + </button> + </div> + </div> + + <div *ngIf="!isFilter" style="display: flex; margin-left: auto;"> <div style="display: flex; align-items: center; padding: 0 25px;"> <button mat-mini-fab color="primary" data-tests-id="addCondition" (click)="addConditional(tree, node)" style="height: 24px; width: 24px; display:flex; box-shadow: none;"> @@ -35,9 +76,13 @@ </span> </div> - <div style="display: flex; align-items: center; padding: 0 5px; background: #FFFFFF;"> + <div style="display: flex; align-items: center; padding: 0 5px;"> <button data-tests-id="removeConditionNode" mat-icon-button (click)="removeConditional(tree, node)" class="button-remove"> - <mat-icon class="md-24">delete</mat-icon> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'trash-2' | feather:20"></span> </button> </div> @@ -64,21 +109,41 @@ <option value="startsWith">Starts with</option> <option value="equals">Equals</option> <option value="notEqual">Not equal</option> + <option value="assigned">Assigned</option> + <option value="unassigned">Unassigned</option> + <option value="oneOf">One of</option> + <option value="NotOneOf">Not one of</option> </select> </div> - <div class="label" style="width:100%"> + <div class="label" style="width:100%" *ngIf="node.data.operator !== 'assigned' && node.data.operator !== 'unassigned'"> <span class="label" style="padding: 0 10px; border-left: none;"> Value </span> <input class="input-text" data-tests-id="right" (ngModelChange)="modelChange($event)" [(ngModel)]="node.data.right" ngDefaultControl type="text"> </div> + + <div *ngIf="node.data.operator === 'assigned' || node.data.operator === 'unassigned'" class="pretty p-svg" style="margin: 4px 0 1em 0em; margin-left:10px;"> + <input type="checkbox" name="emptyIsAssigned" data-tests-id="emptyIsAssigned" [checked]="node.data.emptyIsAssigned" (change)="node.data.emptyIsAssigned = !node.data.emptyIsAssigned" + /> + <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>Empty Is Assigned</label> + </div> + </div> </div> <!-- remove button --> <div class="show-delete"> <button mat-icon-button data-tests-id="RemoveCondition" (click)="removeConditional(tree, node)" class="button-remove"> - <mat-icon class="md-24">delete</mat-icon> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'trash-2' | feather:20"></span> </button> </div> diff --git a/public/src/app/rule-engine/condition/condition.component.scss b/public/src/app/rule-engine/condition/condition.component.scss index 8c0e9e0..228d8c6 100644 --- a/public/src/app/rule-engine/condition/condition.component.scss +++ b/public/src/app/rule-engine/condition/condition.component.scss @@ -9,7 +9,7 @@ padding: 0; } .angular-tree-component { - padding-left: 1em; + // padding-left: 1em; overflow-y: hidden; } .tree-node-leaf.container { @@ -26,11 +26,45 @@ } .node-wrapper { background: white; + padding-top: 10px; } .tree-children { border-left: 2px solid #f2f2f2; + border-right: 2px solid #f2f2f2; + border-bottom: 2px solid #f2f2f2; // border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; + // border-bottom: 1px solid #f2f2f2; + } + .tree-node-level-2 + > tree-node-wrapper + > .node-wrapper + > .node-content-wrapper { + width: 90%; + } + .tree-node-level-2 .tree-children { + width: 90%; + } + .tree-node-level-3 + > tree-node-wrapper + > .node-wrapper + > .node-content-wrapper { + width: 85%; + } + .tree-node-level-3 .tree-children { + width: 85%; + } + .tree-node-level-4 + > tree-node-wrapper + > .node-wrapper + > .node-content-wrapper { + width: 80%; + } + .tree-node-level-4 .tree-children { + width: 80%; + } + div .node-content-wrapper { + padding: 0; } tree-node-expander { display: none; diff --git a/public/src/app/rule-engine/condition/condition.component.ts b/public/src/app/rule-engine/condition/condition.component.ts index f44fbf4..200b42d 100644 --- a/public/src/app/rule-engine/condition/condition.component.ts +++ b/public/src/app/rule-engine/condition/condition.component.ts @@ -3,10 +3,13 @@ import { ViewEncapsulation, ViewChild, Output, - EventEmitter + EventEmitter, + Input, + OnInit } from '@angular/core'; import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component'; -import { some } from 'lodash'; +import { some, cloneDeep } from 'lodash'; +import { toJS } from 'mobx'; @Component({ selector: 'app-condition', @@ -14,7 +17,9 @@ import { some } from 'lodash'; styleUrls: ['./condition.component.scss'], encapsulation: ViewEncapsulation.None }) -export class ConditionComponent { +export class ConditionComponent implements OnInit { + @Input() condition; + @Input() isFilter = false; conditionTree = []; showType = false; @ViewChild(TreeComponent) private tree: TreeComponent; @@ -27,7 +32,9 @@ export class ConditionComponent { animateAcceleration: 1.2 }; - constructor() { + ngOnInit(): void { + console.log('condition', this.condition); + this.conditionTree.push({ name: 'operator', level: 0, @@ -39,10 +46,23 @@ export class ConditionComponent { left: '', right: '', operator: null, - level: 1 + level: 1, + emptyIsAssigned: false }); + + if (this.condition) { + const condition = toJS(this.condition); + if (condition.name === 'condition') { + this.updateMode(true, condition); + } else { + const convertedCondition = this.convertConditionFromServer(condition); + this.updateMode(false, convertedCondition); + } + } } + constructor() {} + onInitialized(tree) { tree.treeModel.expandAll(); } @@ -58,7 +78,8 @@ export class ConditionComponent { left: data.left, right: data.right, operator: data.operator, - level: 1 + level: 1, + emptyIsAssigned: false }); this.showType = false; } else { @@ -82,7 +103,8 @@ export class ConditionComponent { left: '', right: '', operator: null, - level: tempLevel + level: tempLevel, + emptyIsAssigned: false }; selectedNode.data.children.push(conditionTemplate); tree.treeModel.update(); @@ -108,7 +130,8 @@ export class ConditionComponent { left: '', right: '', operator: null, - level: selectedNode.data.level + 2 + level: selectedNode.data.level + 2, + emptyIsAssigned: false }); } tree.treeModel.update(); @@ -149,6 +172,35 @@ export class ConditionComponent { } } + public 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; + } + + public convertConditionFromServer(condition) { + const temp = new Array(); + temp.push(condition); + const cloneCondition = cloneDeep(temp); + const conditionSetData = this.changeRightToArrayOrString( + cloneCondition, + false + ); + console.log('condition to server:', conditionSetData); + return conditionSetData; + } + private deleteNodeAndUpdateTreeView(selectedNode: any, tree: any) { selectedNode.parent.data.children.splice(selectedNode.index, 1); tree.treeModel.update(); |