blob: 0ff244bc9ae567121f47cd4448ca6545bac4fe61 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<tree-root #tree class="condition-tree" (initialized)="onInitialized(tree)" [nodes]="conditionTree" [options]="customTemplateStringOptions">
<ng-template #treeNodeTemplate let-node let-index="index">
<div>
<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">
<option value="ANY">ANY</option>
<option value="ALL">ALL</option>
</select>
<div style="display: flex; align-items: center; margin-left: 10px;">
of the following are true:
</div>
</div>
<div 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;">
<mat-icon class="material-icons md-18">add</mat-icon>
</button>
<span class="btn-label">Add Condition
</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: 24px; width: 24px; display:flex; box-shadow: none;">
<mat-icon class="material-icons md-18">add</mat-icon>
</button>
<span [style.color]="node.data.level === 2 ? '#a7a7a7' : '#009fdb' " [style.cursor]="node.data.level === 2 ? 'default' : 'pointer' "
class="btn-label">Add Condition Group
</span>
</div>
<div style="display: flex; align-items: center; padding: 0 5px; background: #FFFFFF;">
<button data-tests-id="removeConditionNode" mat-icon-button (click)="removeConditional(tree, node)" class="button-remove">
<mat-icon class="md-24">delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<div *ngIf="node.data.name === 'condition'">
<div class="from-conatiner" style="height:35px; ">
<div style="display: flex; width:90%;">
<div class="label" style="width:100%">
<span class="label" style="padding: 0 10px; border-left: none;">
Input
</span>
<input class="input-text" data-tests-id="left" [(ngModel)]="node.data.left" (ngModelChange)="modelChange($event)" ngDefaultControl
type="text">
</div>
<div style="margin: 0 1rem;">
<select style="height: 30px;" data-tests-id="selectOperator" [(ngModel)]="node.data.operator" (ngModelChange)="modelChange($event)"
ngDefaultControl>
<option [ngValue]="null" disabled>Select operator</option>
<option value="contains">Contains</option>
<option value="endsWith">Ends with</option>
<option value="startsWith">Starts with</option>
<option value="equals">Equals</option>
<option value="notEqual">Not equal</option>
</select>
</div>
<div class="label" style="width:100%">
<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>
<!-- 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>
</button>
</div>
</div>
</div>
</div>
</ng-template>
</tree-root>
|
