From 59884c775c9d06e2195401a09e08650a5cf37b20 Mon Sep 17 00:00:00 2001 From: YuanHu Date: Tue, 27 Mar 2018 17:58:42 +0800 Subject: Display Extend Activities on WF Designer UI. Display Extend Activities on WF Designer UI. Use Extend Activities to Design Workflow and Save Issue-ID: SDC-1130,SDC-1131 Change-Id: Iea62eb0edafb2270deaac89b458015e78d961cd0 Signed-off-by: YuanHu --- .../components/parameter/parameter.component.html | 60 +++--- .../components/parameter/parameter.component.ts | 209 ++++++++++++--------- 2 files changed, 161 insertions(+), 108 deletions(-) (limited to 'sdc-workflow-designer-ui/src/app/components/parameter') 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 @@ */ --> -
-
- - - +
+
+ + +
-
-
- - - - +
+
+
+ + + + + + +
- +
-
-
-
-
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(); - @Output() insert: EventEmitter = new EventEmitter(); - @Output() delete: EventEmitter = new EventEmitter(); - - public sourceEnum = ValueSource; - public valueGroupClass; - public valueClass; - public valueSourceClass; + @Output() paramChange = new EventEmitter(); + @Output() insert = new EventEmitter(); + @Output() delete = new EventEmitter(); + + // 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; - } } -- cgit 1.2.3-korg