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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<form #actionListFrm="ngForm" class="wrapper" data-tests-id="popupRuleEditor">
<div class="header">
<div style="display: flex; justify-content: flex-end; align-items: center; margin-left: 20px;">
<a (click)="closeDialog()" data-tests-id="btnBackRule" style="cursor: pointer;text-decoration: none; color: #009fdb;">
<mat-icon fontSet="fontawesome" fontIcon="fa-angle-left" style="height: 22px; width: 22px; font-size: 22px; padding-right: 20px;"></mat-icon>
</a>
<span style="font-size: 18px;">{{title}}</span>
</div>
<div style="display: flex; justify-content: flex-end; align-items: center; padding: 10px;">
<button mat-icon-button [disabled]="actions.length === 0" (click)="saveRole()" data-tests-id="btnSave">
<span style="width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;" [innerHTML]="'save' | feather:22"></span>
</button>
<button mat-raised-button [disabled]="actions.length === 0" style="height: 35px; margin-left: 10px;" color="primary" data-tests-id="btnDone"
(click)="saveAndDone()">
Done
</button>
</div>
</div>
<!-- error container -->
<div *ngIf="error" data-tests-id="errorList" class="error-list">
<div *ngFor="let item of error">
{{ item }}
</div>
</div>
<div class="main-content">
<div>
<div class="required" style="padding-right: 1rem; width: 100%; padding-bottom: 0.5rem;">Description</div>
<input type="text" [(ngModel)]="description" ngModel required name="descInput" style="padding: 5px; width: 100%;" data-tests-id="inputDescription">
</div>
<div style="margin: 1.5rem 0;">
<div class="pretty p-svg" style="margin: 1rem 0rem;">
<input type="checkbox" name="isCondition" data-tests-id="isCondition" [checked]="ifStatement" (change)="ifStatement = !ifStatement"
/>
<div class="state">
<!-- svg path -->
<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>Conditional Action</label>
</div>
</div>
<div *ngIf="ifStatement">
<app-condition #condition (removeConditionCheck)="removeConditionCheck($event)" (onConditionChange)="updateCondition($event)"></app-condition>
</div>
</div>
<div>
<div class="required" style="padding-bottom: 0.5rem">
Action
</div>
<div style="display: flex;">
<select [(ngModel)]="selectedAction" name="selectedAction" style="height: 2rem; width: 150px; margin-right: 1rem;" data-tests-id="selectAction">
<option [ngValue]="null" disabled>Select Action</option>
<option value="copy">Copy</option>
<option value="concat">Concat</option>
<option value="map">Map</option>
<option value="date formatter">Date Formatter</option>
<option value="log text">Log Text</option>
<option value="log event">Log Event</option>
<option value="replace text">Replace Text</option>
<option value="clear">Clear</option>
</select>
<div style="display: flex; align-items: center;">
<button mat-mini-fab color="primary" style="height: 16px; width: 16px; display:flex; justify-content: center;" (click)="addAction2list(selectedAction)"
data-tests-id="btnAddAction">
<span style="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: 6px">Add Action</span>
</div>
</div>
<div>
<ul>
<li *ngFor="let action of actions; let index = index" style="list-style: none; margin: 1rem 0;" (mouseleave)="hoveredIndex=-1"
(mouseover)="hoveredIndex=index" data-tests-id="action">
<div style="display:flex;">
<app-action #actions style="width: 100%;" [action]="action"></app-action>
<div style="height: 45px; display: flex; align-items: center;">
<button mat-icon-button class='button-remove' (click)="removeAction(action)" data-tests-id="deleteAction">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</form>
|
