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
107
108
109
110
111
112
113
114
|
<form #actionFrm="ngForm" class="conatiner" id="{{action.id}}" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
<div>
<div class="center-content">
<!-- type info -->
<div class="action-info" [ngClass]="highlight">
{{action.actionType | uppercase}}
</div>
<!-- from component -->
<app-from #from style="width: 100%" [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
<!-- target component -->
<app-target #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
</app-target>
</div>
<!-- dateFormatter -->
<div *ngIf="action.actionType === 'date formatter'" style="display: flex; flex-direction: column; margin: 1em; align-items: flex-end;">
<div style="display: flex; margin: 0.5em 0;">
<div class="from">
<div class="from-conatiner">
<div style="display: flex; align-items: center;" class="label">
<span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
<input class="input-text" ngModel required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text">
</div>
</div>
</div>
<div class="from">
<div class="from-conatiner">
<div style="display: flex; align-items: center;" class="label">
<span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
<input class="input-text" ngModel required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text">
</div>
</div>
</div>
</div>
<div style="display: flex; margin: 0.5em 0;">
<div class="from">
<div class="from-conatiner">
<div style="display: flex; align-items: center;" class="label">
<span class="label" style="padding: 0 5px; width: 100px;">From Time-zone</span>
<input class="input-text" ngModel required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text">
</div>
</div>
</div>
<div class="from">
<div class="from-conatiner">
<div style="display: flex; align-items: center;" class="label">
<span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
<input class="input-text" ngModel required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text">
</div>
</div>
</div>
</div>
</div>
<!-- Map -->
<div *ngIf="action.actionType === 'map'" class="map-container">
<!-- Default checkbox and input -->
<div class="default" style="display: flex; align-items: center">
<div class="pretty p-svg">
<input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault" (change)="changeCheckbox()"
/>
<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>Default</label>
</div>
</div>
<div *ngIf="action.map.haveDefault" class="input-wrapper">
<input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
</div>
</div>
<table style="width: 100%; margin-bottom: 1rem;">
<thead style="background: #D2D2D2;">
<tr style="height: 30px;">
<th style="padding-left: 10px;">Key</th>
<th style="padding-left: 10px;">value</th>
</tr>
</thead>
<tbody ngModelGroup="mapKeyValue" #mapKeyValue="ngModelGroup">
<tr *ngFor="let item of action.map.values; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
<th style="height: 30px; border: 1px solid #F3F3F3;">
<input [(ngModel)]="item.key" ngModel required name="mapValue[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
</th>
<th style="height: 30px; border: 1px solid #F3F3F3;">
<input [(ngModel)]="item.value" ngModel required name="mapValue[{{index}}]" data-tests-id="value" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
</th>
<th style="height: 30px; display: flex; align-items: baseline;">
<button mat-icon-button [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" class="button-remove" (click)="removeMapRow(index)"
*ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
<mat-icon class="md-24">delete</mat-icon>
</button>
</th>
</tr>
</tbody>
</table>
<div style="display:flex; justify-content: space-between;">
<div style="display: flex; align-items: center;">
<button mat-mini-fab color="primary" (click)="addMapRow()" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
<mat-icon>add</mat-icon>
</button>
<span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
</div>
</div>
</div>
</div>
</form>
|
