summaryrefslogtreecommitdiffstats
path: root/public/src/app/rule-engine/from/from.component.html
blob: 835946a522eb71611e29b4626888c0220b797842 (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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<form #fromFrm="ngForm" novalidate>
  <!-- Copy template -->
  <div class="from" *ngIf="actionType === 'copy' || actionType === 'replace text' || actionType === 'log text'" data-tests-id="fromComponent">
    <div class="from-conatiner">
      <div style="display: flex; align-items: center; width: 100%;" class="label">
        <span class="label" style="padding: 0 5px; width: 50px;">From</span>
        <input class="input-text" name="copyFrom" required style="min-width: 190px;" (ngModelChange)="modelChange(from)" #copyFrom="ngModel"
          [(ngModel)]="from.value" type="text" data-tests-id="valueInput" [readonly]="store.viewOnly">
        <span class="label" (click)="showRegex(from)" [ngStyle]="from.state === 'open' ? { 'color': '#009FDB'} : {'color':'gray'}"
          style="padding: 0 5px; width: 50px; cursor: pointer; border: none" data-tests-id="btnFromRegex">Re/g</span>
      </div>
      <div [@state]="from.state" *ngIf="from.state === 'open'" style="display: flex; align-items: center; width: 80%;" class="label">
        <span class="label" style="padding: 0 3px; width: 54px; border-top: none; border-bottom: none;">regex</span>
        <input class="input-text" style="min-width: 192px;" (ngModelChange)="modelChange(from)" [(ngModel)]="from.regex" type="text"
          ngModel required name="RegexInput" [readonly]="store.viewOnly" data-tests-id="inputFromRegex">
      </div>
    </div>
  </div>
  <!-- Map template -->
  <div class="from" *ngIf="actionType === 'map'" data-tests-id="fromComponent">
    <div class="from-conatiner">
      <div style="display: flex; align-items: center; width: 100%;" class="label">
        <span class="label" style="padding: 0 5px; width: 50px;">From</span>
        <input class="input-text" ngModel required name="mapFromInput" (ngModelChange)="modelChange(from)" [(ngModel)]="from.value" [readonly]="store.viewOnly"
          type="text" data-tests-id="valueInput">
      </div>
    </div>
  </div>

  <!-- dateFormatter template -->
  <div class="from" *ngIf="actionType === 'date formatter'" data-tests-id="fromComponent">
    <div class="from-conatiner">
      <div style="display: flex; align-items: center; width: 100%;" class="label">
        <span class="label" style="padding: 0 5px; width: 50px;">From</span>
        <input class="input-text" ngModel required name="dateFormatterFromInput" (ngModelChange)="modelChange(from)" [(ngModel)]="from.value" [readonly]="store.viewOnly"
          type="text" data-tests-id="valueInput">
      </div>
    </div>
  </div>

  <!-- clear NSF template -->
  <div class="from" *ngIf="actionType === 'clear nsf'" ngModelGroup="clear-nsf" #clearFrom="ngModelGroup" style="padding-right: 0;">
    <div *ngFor="let input of from.values; let index = index;" data-tests-id="clearInputArrayFrom" (mouseleave)="hoveredIndex=-1"
      (mouseover)="hoveredIndex=index" class="from-conatiner" style="margin-bottom:1rem; display: flex; flex-direction: column; align-items: flex-start;"
      data-tests-id="fromComponent">
      <div style="display: flex; align-items: center; width: 100%;">
        <div style="display: flex; align-items: center; width: 100%;" class="label">
          <span class="label" style="padding: 0 5px; width: 50px;">From</span>
          <input class="input-text" (ngModelChange)="modelChange(from)" [(ngModel)]="input.value" type="text" data-tests-id="valueInput" [readonly]="store.viewOnly"
            ngModel required name="clear-nfs[{{index}}]">
        </div>

        <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
          *ngIf="from.values.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
                    [innerHTML]="'trash-2' | feather:20"></span>
        </button>
      </div>

    </div>
    <div style="display:flex; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
          data-tests-id="btnAddInput">
          <span style="padding-left: 2px; 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 input</span>
      </div>
    </div>
  </div>
  <!-- clear template -->
  <div class="from" *ngIf="actionType === 'clear'" ngModelGroup="clear" #clearFrom="ngModelGroup">
    <div *ngFor="let input of from.values; let index = index;" data-tests-id="clearInputArrayFrom" (mouseleave)="hoveredIndex=-1"
      (mouseover)="hoveredIndex=index" class="from-conatiner" style="margin-bottom:1rem; display: flex; flex-direction: column; align-items: flex-start;"
      data-tests-id="fromComponent">
      <div style="display: flex; align-items: center; width: 100%;">
        <div style="display: flex; align-items: center; width: 100%;" class="label">
          <span class="label" style="padding: 0 5px; width: 50px;">From</span>
          <input class="input-text" (ngModelChange)="modelChange(from)" [(ngModel)]="input.value" type="text" data-tests-id="valueInput" [readonly]="store.viewOnly"
            ngModel required name="clear[{{index}}]">
        </div>

        <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
          *ngIf="from.values.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
                    [innerHTML]="'trash-2' | feather:20"></span>
        </button>
      </div>

    </div>
    <div style="display:flex; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
          data-tests-id="btnAddInput">
          <span style="padding-left: 2px; 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 input</span>
      </div>
    </div>
  </div>


  <!-- Concat template -->
  <div class="from" *ngIf="actionType === 'concat'" ngModelGroup="concat" #concatFrom="ngModelGroup">
    <div *ngFor="let input of from.values; let index = index;" data-tests-id="concatInputArrayFrom" (mouseleave)="hoveredIndex=-1"
      (mouseover)="hoveredIndex=index" class="from-conatiner" style="margin-bottom:1rem; display: flex; flex-direction: column; align-items: flex-start;"
      data-tests-id="fromComponent">
      <div style="display: flex; align-items: center; width: 100%;">
        <div style="display: flex; align-items: center; width: 100%;" class="label">
          <span class="label" style="padding: 0 5px; width: 50px;">From</span>
          <input class="input-text" (ngModelChange)="modelChange(from)" [(ngModel)]="input.value" type="text" data-tests-id="valueInput" [readonly]="store.viewOnly"
            ngModel required name="concat[{{index}}]">
        </div>

        <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
          *ngIf="from.values.length > 2" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
                    [innerHTML]="'trash-2' | feather:20"></span>
        </button>
      </div>

    </div>
    <div style="display:flex; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
          data-tests-id="btnAddInput">
          <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
        </button>
        <span style="color: #009FDB; display: flex; justify-content: center; padding-top: 1px; padding-left: 6px;">Add input</span>
      </div>
    </div>
  </div>
</form>