diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/parameter')
| -rw-r--r-- | sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html | 60 | ||||
| -rw-r--r-- | sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts | 209 |
2 files changed, 161 insertions, 108 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html index 50ec0449..1b91b426 100644 --- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html @@ -12,37 +12,49 @@ */ --> -<div class="form-group"> - <div *ngIf="showLabel" class="parameter-item" style="margin:0;"> - <label *ngIf="true === param.required" class="form-control-required">*</label> - <input *ngIf="canEditName" class="form-control form-control-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)"> - <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label> +<div *ngIf="param.show" class="parameter"> + <div *ngIf="currentShowLabel" class="parameter-section"> + <label *ngIf="true === param.required" class="parameter-required">*</label> + <input *ngIf="currentCanEditName" class="parameter-label plx-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)"> + <label *ngIf="!currentCanEditName" class="parameter-label">{{param.name}}</label> </div> - <div class="parameter-item"> - <div *ngIf="showValue" [ngSwitch]="param.valueSource" class="parameter-item"> - <input *ngSwitchCase="sourceEnum[sourceEnum.String]" class="form-control form-control-value" type="text" [ngModel]="param.value" - (ngModelChange)="valueChange($event)"> - <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" class="form-control form-control-value" type="text" [ngModel]="param.value" - (ngModelChange)="valueChange($event)"> - <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" style="vertical-align:top;" [items]="planOptions" childrenField="children" - #simpleSelect="ngModel" class="form-control-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select> - <select *ngSwitchCase="sourceEnum[sourceEnum.Topology]" class="form-control form-control-value" type="text" [ngModel]="param.value" - (ngModelChange)="valueChange($event)"> - <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}}</option> - </select> + <div *ngIf="currentShowValue" class="parameter-section"> + <div *ngIf="showValueValue" class="parameter-item"> + <div [ngSwitch]="param.valueSource" class="parameter-item"> + <input *ngSwitchCase="valueTypeEnum[valueTypeEnum.number]" class="parameter-value plx-input" type="text" [ngModel]="param.value" + (ngModelChange)="valueChange($event)" [disabled]="!currentCanEditValue"> + <select *ngSwitchCase="valueTypeEnum[valueTypeEnum.boolean]" class="parameter-value" type="text" [ngModel]="param.value" + (ngModelChange)="valueChange($event)" [disabled]="!currentCanEditValue"> + <option>true</option> + <option>false</option> + </select> + <tree-select *ngSwitchCase="valueSourceEnum[valueSourceEnum.Plan]" name="simpleSelect" [items]="planOptions" childrenField="children" + #simpleSelect="ngModel" class="parameter-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)" + [disabled]="!currentCanEditValue"></tree-select> + <select *ngSwitchCase="valueSourceEnum[valueSourceEnum.Topology]" class="parameter-value" type="text" [ngModel]="param.value" + (ngModelChange)="valueChange($event)" [disabled]="!currentCanEditValue"> + <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}} + </option> + </select> + <!--string, Variable--> + <input *ngSwitchDefault class="parameter-value plx-input" type="text" [ngModel]="param.value" (ngModelChange)="valueChange($event)" + [disabled]="!currentCanEditValue"> + </div> </div> - <select *ngIf="showValueSource" class="form-control parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource" - (ngModelChange)="valueSourceChange($event)"> - <option *ngFor="let sourceType of valueSource" value="{{sourceEnum[sourceType]}}">{{sourceEnum[sourceType]}}</option> + <select *ngIf="showValueSource" class="parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource" (ngModelChange)="valueSourceChange($event)" + [disabled]="!currentCanEditValue"> + <option *ngFor="let sourceItem of sourceItems" value="{{sourceItem.value}}"> + {{sourceItem.name}} + </option> </select> </div> - <div *ngIf="canInsert" class="parameter-item"> - <button type="button" class="btn blue1" (click)="insertParam()"> + <div *ngIf="currentCanInsert" class="parameter-section"> + <button type="button" class="plx-btn plx-btn-primary" (click)="insertParam()"> <i class="fa fa-plus"></i> </button> </div> - <div *ngIf="canDelete" class="parameter-item"> - <button type="button" class="btn oes-red-bg" (click)="deleteParam()"> + <div *ngIf="currentCanDelete" class="parameter-section"> + <button type="button" class="plx-btn plx-btn-error" (click)="deleteParam()"> <i class="fa fa-minus"></i> </button> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts index 8c614460..c208c1de 100644 --- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts @@ -10,97 +10,178 @@ * ZTE - initial API and implementation and/or initial documentation */ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; - -import { PlanTreeviewItem } from '../../model/plan-treeview-item'; -import { ValueSource } from '../../model/value-source.enum'; -import { Parameter } from '../../model/workflow/parameter'; -import { DataService } from '../../services/data/data.service'; +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from "@angular/core"; +import {PlanTreeviewItem} from "../../model/plan-treeview-item"; +import {ValueSource} from "../../model/value-source.enum"; +import {Parameter} from "../../model/workflow/parameter"; +import {ToscaService} from "../../services/tosca.service"; +import {ValueType} from "../../model/value-type.enum"; /** * this component contains in property component if the corresponding node has parameter properties * eg. task node have input and output params, start event node has input param */ @Component({ - selector: 'b4t-parameter', + selector: 'wfm-parameter', styleUrls: ['./parameter.component.css'], templateUrl: 'parameter.component.html', }) -export class ParameterComponent implements OnChanges, OnInit { +export class ParameterComponent implements OnInit { @Input() public param: Parameter; - @Input() public valueSource: ValueSource[]; + @Input() public valueSource: ValueSource[] = []; + @Input() public showLabel: boolean; + @Input() public showValue: boolean; @Input() public canEditName: boolean; - @Input() public showLabel = true; + @Input() public canEditValue: boolean; @Input() public canInsert: boolean; @Input() public canDelete: boolean; @Input() public planItems: PlanTreeviewItem[]; - @Output() public paramChange = new EventEmitter<Parameter>(); - @Output() insert: EventEmitter<Parameter> = new EventEmitter<Parameter>(); - @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>(); - - public sourceEnum = ValueSource; - public valueGroupClass; - public valueClass; - public valueSourceClass; + @Output() paramChange = new EventEmitter<Parameter>(); + @Output() insert = new EventEmitter<Parameter>(); + @Output() delete = new EventEmitter<Parameter>(); + + // Parameter setting + public currentShowLabel: boolean; + public currentShowValue: boolean; + public currentCanEditName: boolean; + public currentCanEditValue: boolean; + public currentCanInsert: boolean; + public currentCanDelete: boolean; + + public valueTypeEnum = ValueType; + public valueSourceEnum = ValueSource; + public sourceItems: { name: string, value: string }[] = []; public planOptions = []; public topologyOptions: { name: string, value: string }[] = []; - public showValue = true; + public showValueValue = true; public showValueSource = true; public planValue: any = {}; - constructor(private dataService: DataService) { } - - public ngOnChanges(changes: SimpleChanges): void { - // if (changes.canInsert && !changes.canInsert.isFirstChange()) { - // this.resetValueGroupClass(changes.canInsert.currentValue, this.canDelete); - // } - // if (changes.canDelete && !changes.canDelete.isFirstChange()) { - // this.resetValueGroupClass(this.canInsert, changes.canDelete.currentValue); - // } + constructor(private toscaService: ToscaService) { } public ngOnInit(): void { - // console.warn('Parameter OnInit, parameter name is:' + this.param.name); - if (1 === this.valueSource.length) { - this.showValueSource = false; + this.initSetting(); + this.topologyOptions = this.toscaService.getTopologyProperties(); + this.initSourceItems(); + this.initPlanValue(); + this.setValueSource(this.param.valueSource); + this.initPlanTreeViewItems(this.planItems); + } + + private initSetting():void{ + this.currentShowLabel = this.setDefaultValue(this.showLabel, true); + this.currentShowValue = this.setDefaultValue(this.showValue, true); + this.currentCanEditName = this.setDefaultValue(this.canEditName, false); + this.currentCanEditValue = this.setDefaultValue(this.canEditValue, true); + this.currentCanInsert = this.setDefaultValue(this.canInsert, false); + this.currentCanDelete = this.setDefaultValue(this.canDelete, false); + } + + private setDefaultValue(param: boolean, value: boolean): boolean { + return undefined === param ? value : param; + } + + private initSourceItems(): void { + this.sourceItems = []; + if (this.param.type !== ValueType[ValueType.object] && this.param.type !== ValueType[ValueType.array]) { + this.sourceItems = [{ + name: this.capitalizeFirstLetter(this.param.type), + value: this.param.type + }]; } - this.topologyOptions = this.dataService.getTopologyProperties(); - // this.valueClass = { - // 'col-md-7': this.showValueSource, - // 'col-md-12': !this.showValueSource - // }; - // this.resetValueGroupClass(this.canInsert, this.canDelete); - this.updateValueSource(this.param.valueSource); - // trans plan options to tree view items. - this.initPlanTreeviewItems(this.planItems); + this.valueSource.forEach(value => { + this.sourceItems.push({ + name: ValueSource[value], + value: ValueSource[value] + }); + }); + } + + private capitalizeFirstLetter(value: string): string { + const firstLetter = value.substring(0, 1); + const remainedLetter = value.substring(1); + return firstLetter.toUpperCase() + remainedLetter; + } + + private initPlanValue(): void { if (ValueSource[ValueSource.Plan] === this.param.valueSource) { - this.planValue = { id: this.param.value }; + this.planValue = {id: this.param.value}; + } + } + + private setValueSource(valueSource: string): void { + if (ValueSource[ValueSource.Definition] === valueSource) { + this.showValueValue = false; + } else { + this.showValueValue = true; } } + private initPlanTreeViewItems(planTreeviewItems: PlanTreeviewItem[]): void { + this.planOptions = this.getTreeViewChild(planTreeviewItems); + } + + private getTreeViewChild(planTreeviewItems: PlanTreeviewItem[]): any[] { + let treeviewItems = []; + if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) { + // todo: debug check if it need [] or undefined. + return treeviewItems; + } + planTreeviewItems.forEach(item => { + const treeviewItem = { + id: item.value, + name: item.name, + disabled: false, + // !item.canSelect, + children: this.getTreeViewChild(item.children) + }; + treeviewItems.push(treeviewItem); + }); + return treeviewItems; + } + public keyChange(key: string) { this.param.name = key; this.paramChange.emit(this.param); } + private formatValue(value: any) { + let result; + switch (this.param.valueSource) { + case ValueSource[ValueSource.boolean]: + result = value === "true" ? true : false; + break; + case ValueSource[ValueSource.integer]: + result = parseInt(value); + break; + case ValueSource[ValueSource.number]: + result = parseFloat(value); + break; + default: + result = value; + } + return result; + } + public valueChange(value: any) { if (ValueSource[ValueSource.Plan] === this.param.valueSource) { if ('object' === typeof (value)) { this.planValue = value; this.param.value = value.id; } else { - this.planValue = { id: '' }; + this.planValue = {id: ''}; this.param.value = ''; } } else { - this.param.value = value; + this.param.value = this.formatValue(value); } this.paramChange.emit(this.param); } public valueSourceChange(valueSource: string) { - this.updateValueSource(valueSource); this.param.valueSource = valueSource; + this.setValueSource(valueSource); this.valueChange(''); } @@ -111,44 +192,4 @@ export class ParameterComponent implements OnChanges, OnInit { public deleteParam(): void { this.delete.emit(); } - - private updateValueSource(valueSource: string):void{ - if(ValueSource[ValueSource.Definition] === valueSource){ - this.showValue = false; - }else{ - this.showValue = true; - } - // this.resetValueSourceClass(this.showValue); - } - - private resetValueGroupClass(canInsert: boolean, canDelete: boolean): void { - // this.valueGroupClass = { - // 'col-md-5': canInsert && canDelete, - // 'col-md-7': (canInsert && !canDelete) || (!canInsert && canDelete), - // 'col-md-9': !canInsert && !canDelete - // }; - } - - private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void { - this.planOptions = this.getTreeviewChild(planTreeviewItems); - } - - private getTreeviewChild(planTreeviewItems: PlanTreeviewItem[]): any[] { - let treeviewItems = []; - if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) { - // todo: debug check if it need [] or undefined. - return treeviewItems; - } - planTreeviewItems.forEach(item => { - const treeviewItem = { - id: item.value, - name: item.name, - disabled: false, - // !item.canSelect, - children: this.getTreeviewChild(item.children) - }; - treeviewItems.push(treeviewItem); - }); - return treeviewItems; - } } |