aboutsummaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/components/parameter
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/parameter')
-rw-r--r--sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html60
-rw-r--r--sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts209
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;
- }
}