diff options
Diffstat (limited to 'public/src/app/rule-engine/action')
3 files changed, 281 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html new file mode 100644 index 0000000..b41ab82 --- /dev/null +++ b/public/src/app/rule-engine/action/action.component.html @@ -0,0 +1,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> diff --git a/public/src/app/rule-engine/action/action.component.scss b/public/src/app/rule-engine/action/action.component.scss new file mode 100644 index 0000000..f903db4 --- /dev/null +++ b/public/src/app/rule-engine/action/action.component.scss @@ -0,0 +1,116 @@ +.conatiner { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: space-between; + margin: 10px 0; + .black { + color: black; + } + .highlight { + color: #009fdb; + } + .center-content { + display: flex; + width: 100%; + .action-info { + background: #f2f2f2; + padding: 6px 12px; + border-radius: 5px; + height: 32px; + margin: 0 10px; + display: flex; + align-items: center; + justify-content: center; + min-width: 142px; + } + } + .map-container { + padding-left: 115px; + .default { + display: flex; + width: 100%; + margin: 1rem 0; + min-height: 35px; + .input-wrapper { + width: 100%; + display: flex; + .input { + height: 20px; + padding: 5px; + margin-left: 10px; + width: 100%; + border: 1px solid #d2d2d2; + } + } + } + .grid-container { + padding-bottom: 10px; + .layout { + display: grid; + grid-template-columns: 1fr 1fr 30px; + grid-gap: 1px; + .title { + background-color: #f3f3f3; + height: 30px; + padding-left: 10px; + display: flex; + align-items: center; + } + .text-wrapper { + height: 30px; + border: 1px solid #f3f3f3; + .input { + width: 97%; + height: 100%; + border: none; + padding: 0 5px; + } + } + .btn-container { + height: 30px; + display: flex; + align-items: baseline; + } + } + } + } +} + +.from { + display: flex; + flex-direction: column; + padding: 0 10px; + .from-conatiner { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + min-width: 350px; + .input-text { + border: none; + flex: 1; + width: 100%; + min-width: 250px; + padding: 5px 0 5px 5px; + margin: 0; + } + } + .label { + border: 1px solid #d2d2d2; + height: 30px; + justify-content: flex-start; + align-items: center; + display: flex; + } +} + +.button-remove { + display: flex; + justify-content: center; + color: #a7a7a7; + &:hover { + color: #009fdb; + } +} diff --git a/public/src/app/rule-engine/action/action.component.ts b/public/src/app/rule-engine/action/action.component.ts new file mode 100644 index 0000000..9c7023f --- /dev/null +++ b/public/src/app/rule-engine/action/action.component.ts @@ -0,0 +1,51 @@ +import { Component, Inject, Input, OnInit, ViewChild } from '@angular/core'; +// import { Copy } from "../model"; +import { Http, Response, Headers, RequestOptions } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/catch'; +import { Subject } from 'rxjs/Subject'; +import { NgForm } from '@angular/forms'; + +@Component({ + selector: 'app-action', + templateUrl: './action.component.html', + styleUrls: ['./action.component.scss'] +}) +export class ActionComponent implements OnInit { + @Input() action; + @ViewChild('from') fromInstance; + @ViewChild('target') targetInstance; + @ViewChild('actionFrm') actionFrm: NgForm; + highlight = 'black'; + hoveredIndex; + changeStyle($event) { + this.highlight = $event.type === 'mouseover' ? 'highlight' : 'black'; + } + ngOnInit(): void { + console.log(this.action.id); + if (this.action.from !== '') { + console.log('Action %o', this.action); + this.fromInstance.updateMode(this.action.from); + this.targetInstance.updateMode(this.action); + } + } + updateFrom(data) { + this.action.from = data; + } + updateTarget(data) { + this.action.selectedNode = data; + } + /* map functionality */ + addMapRow() { + this.action.map.values.push({ key: '', value: '' }); + } + removeMapRow(index) { + this.action.map.values.splice(index, 1); + } + + changeCheckbox() { + console.log(this.action.id); + return (this.action.map.haveDefault = !this.action.map.haveDefault); + } +} |