diff options
Diffstat (limited to 'public/src/app/rule-engine/from/from.component.html')
| -rw-r--r-- | public/src/app/rule-engine/from/from.component.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/from/from.component.html b/public/src/app/rule-engine/from/from.component.html new file mode 100644 index 0000000..7af653d --- /dev/null +++ b/public/src/app/rule-engine/from/from.component.html @@ -0,0 +1,70 @@ +<form #fromFrm="ngForm" novalidate> + <!-- Copy template --> + <div class="from" *ngIf="actionType === 'copy'" 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"> + <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" 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" + 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" + type="text" data-tests-id="valueInput"> + </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" + 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"> + <mat-icon class="md-24">delete</mat-icon> + </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: 24px; width: 24px; display:flex" + data-tests-id="btnAddInput"> + <mat-icon>add</mat-icon> + </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add input</span> + </div> + </div> + </div> +</form> |