diff options
Diffstat (limited to 'public/src/app/rule-engine/from')
| -rw-r--r-- | public/src/app/rule-engine/from/from.component.html | 31 | ||||
| -rw-r--r-- | public/src/app/rule-engine/from/from.component.scss | 4 | ||||
| -rw-r--r-- | public/src/app/rule-engine/from/from.component.ts | 73 |
3 files changed, 73 insertions, 35 deletions
diff --git a/public/src/app/rule-engine/from/from.component.html b/public/src/app/rule-engine/from/from.component.html index df2c110..011f609 100644 --- a/public/src/app/rule-engine/from/from.component.html +++ b/public/src/app/rule-engine/from/from.component.html @@ -38,6 +38,35 @@ </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" + 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"> + <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: 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" @@ -62,8 +91,6 @@ <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> -<!-- - <mat-icon>add</mat-icon> --> </button> <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add input</span> </div> diff --git a/public/src/app/rule-engine/from/from.component.scss b/public/src/app/rule-engine/from/from.component.scss index 852984d..f5ec4cc 100644 --- a/public/src/app/rule-engine/from/from.component.scss +++ b/public/src/app/rule-engine/from/from.component.scss @@ -1,7 +1,8 @@ .from { display: flex; flex-direction: column; - padding: 0 10px; + // padding: 0 10px; + padding-right: 10px; .label { border: 1px solid #d2d2d2; @@ -55,6 +56,7 @@ } /deep/ .mat-button-wrapper { padding: 0; + display: flex; } .mat-icon { width: 18px; diff --git a/public/src/app/rule-engine/from/from.component.ts b/public/src/app/rule-engine/from/from.component.ts index bc1dedb..c526103 100644 --- a/public/src/app/rule-engine/from/from.component.ts +++ b/public/src/app/rule-engine/from/from.component.ts @@ -3,7 +3,9 @@ import { Input, Output, EventEmitter, - ViewChild + ViewChild, + AfterViewInit, + ChangeDetectorRef } from '@angular/core'; // import { From } from "../model"; import { Subject } from 'rxjs/Subject'; @@ -23,40 +25,27 @@ import { NgForm } from '@angular/forms'; styleUrls: ['./from.component.scss'], animations: [ trigger('state', [ - state( - 'open', - style({ - opacity: 1, - height: 'auto' - }) - ), + state('open', style({ opacity: 1, height: 'auto' })), transition('* => open', [ - animate( - 200, - keyframes([ - style({ - opacity: 1, - height: 'auto' - }) - ]) - ) + animate(200, keyframes([style({ opacity: 1, height: 'auto' })])) ]), - state( - 'closed', - style({ - opacity: 0, - height: 0 - }) - ) + state('closed', style({ opacity: 0, height: 0 })) ]) ] }) -export class FromComponent { +export class FromComponent implements AfterViewInit { from: any = { value: '', regex: '', state: 'closed', - values: [{ value: '' }, { value: '' }] + values: [ + { + value: '' + }, + { + value: '' + } + ] }; @Input() actionType; @Output() onFromChange = new EventEmitter(); @@ -64,10 +53,20 @@ export class FromComponent { hoveredIndex; // public keyUp = new BehaviorSubject<string>(null); - ngOnInit(): void { - if (this.actionType === 'clear') { - this.from.values = [{ value: '' }]; + constructor(private changeDetector: ChangeDetectorRef) {} + + ngAfterViewInit(): void { + if ( + (this.actionType === 'clear' || this.actionType === 'clear nsf') && + this.from.values[0].value === '' + ) { + this.from.values = [ + { + value: '' + } + ]; } + this.changeDetector.detectChanges(); } showRegex(item) { @@ -79,12 +78,22 @@ export class FromComponent { updateMode(fromData) { console.log(fromData); if (fromData) { - this.from = fromData; + if ( + (this.actionType === 'clear' || this.actionType === 'clear nsf') && + fromData.values[0].value === '' + ) { + this.from.values = [ + { + value: '' + } + ]; + } else { + this.from = fromData; + } } + this.changeDetector.detectChanges(); } - constructor() {} - modelChange(event) { this.onFromChange.emit(event); } |