diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/property')
25 files changed, 1520 insertions, 131 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html index 45abdd0f..2384192e 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html @@ -12,4 +12,4 @@ *******************************************************************************/ --> -<b4t-parameter [param]="node.parameter" [valueSource]="sources"></b4t-parameter>
\ No newline at end of file +<wfm-parameter [param]="node.parameter" [valueSource]="sources"></wfm-parameter>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts index f8a63a15..ed11ba2d 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts @@ -16,10 +16,10 @@ import { Parameter } from '../../../model/workflow/parameter'; import { ErrorEvent } from '../../../model/workflow/error-event'; @Component({ - selector: 'b4t-error-event', + selector: 'wfm-error-event', templateUrl: 'error-event.component.html', }) export class ErrorEventComponent { @Input() public node: ErrorEvent; - public sources: ValueSource[] = [ValueSource.String]; + public sources: ValueSource[] = [ValueSource.string]; } diff --git a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html index 3395a6ee..1c1e766b 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html @@ -11,39 +11,82 @@ * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ --> - -<div class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_TYPE' | translate}}</label> - <div class="col-md-9"> - <p-radioButton name="timeType" label="Duration" value="timeDuration" [ngModel]="node.timerEventDefinition.type" (ngModelChange)="timerTypeChange($event)">Duration</p-radioButton> - <p-radioButton name="timeType" label="Date" value="timeDate" [(ngModel)]="node.timerEventDefinition.type">Date</p-radioButton> - <p-radioButton name="timeType" label="Cycle" value="timeCycle" [(ngModel)]="node.timerEventDefinition.type">Cycle</p-radioButton> - </div> -</div> - -<div *ngIf="node.timerEventDefinition.type === 'timeDuration'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DURATION' | translate}}</label> - <div class="col-md-9"> - <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDuration"> - <label>eg: P1Y3M5DT6H7M30S</label> +<form class="form-horizontal"> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_TYPE' | translate}}</label> + <div class="col-md-9"> + <label class="plx-radio-container"> + <input type="radio" class="plx-radio" [checked]="checkedType === timeType[timeType.timeDuration]" + (click)="timeTypeChange(timeType[timeType.timeDuration])"> + <div class="radio-substitute"></div> + <span>{{'WORKFLOW.TIMER_CYCLE' | translate}}</span> + </label> + <label class="plx-radio-container"> + <input type="radio" class="plx-radio" [checked]="checkedType === timeType[timeType.timeDate]" + (click)="timeTypeChange(timeType[timeType.timeDate])"> + <div class="radio-substitute"></div> + <span>{{'WORKFLOW.TIMER_DATE' | translate}}</span> + </label> + </div> </div> -</div> -<div *ngIf="node.timerEventDefinition.type === 'timeDate'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DATE' | translate}}</label> - <div class="col-md-9"> - <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDate"> - <label>eg: 2007-04-05T12:30-02:00</label> - <!-- - <p-calendar [(ngModel)]="node.timerEventDefinition.timeDate" [showIcon]="true" [showTime]="true" [showSeconds]="true"></p-calendar> - --> + <div *ngIf="checkedType === timeType[timeType.timeDuration]"> + <!--<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_YEAR' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="year" min="0" width="336px" + [(ngModel)]="timeCycle.year" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div>--> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_MONTH' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="month" min="0" max="12" width="336px" + [(ngModel)]="timeDuration.month" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DAY' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="day" min="0" max="31" width="336px" + [(ngModel)]="timeDuration.day" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_HOUR' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="hour" min="0" max="23" width="336px" + [(ngModel)]="timeDuration.hour" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_MINUTE' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="minute" min="0" max="59" width="336px" + [(ngModel)]="timeDuration.minute" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_SECOND' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="second" min="0" max="59" width="336px" + [(ngModel)]="timeDuration.second" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <!--<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_CYCLE_INDEX' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="time" min="1" width="336px" + [(ngModel)]="timeCycle.time" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div>--> </div> -</div> -<div *ngIf="node.timerEventDefinition.type === 'timeCycle'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_CYCLE' | translate}}</label> - <div class="col-md-9"> - <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeCycle"> - <label>eg: R5/P1Y2M10DT2H30M</label> + <div *ngIf="checkedType === timeType[timeType.timeDate]" class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DATE' | translate}}</label> + <div class="col-md-9"> + <plx-datepicker name="date" [(ngModel)]="timeDate" [locale]="locale" (onConfirm)="timeDateChange()" showTime="true" + showSeconds='true' dateFormat="YYYY/MM/DD HH:mm:ss"></plx-datepicker> + </div> </div> -</div> +</form>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts index e8e2c780..d5f201f6 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts @@ -9,23 +9,147 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ -import { AfterViewInit, Component, Input } from '@angular/core'; -import { Subscription } from 'rxjs/Subscription'; - -import {IntermediateCatchEvent} from '../../../model/workflow/intermediate-catch-event'; +import {Component, Input, OnChanges, SimpleChanges, OnDestroy} from "@angular/core"; +import {IntermediateCatchEvent} from "../../../model/workflow/intermediate-catch-event"; +import {TimerEventDefinitionType} from "../../../model/workflow/timer-event-definition"; +import {TranslateService} from "@ngx-translate/core"; @Component({ - selector: 'b4t-intermediate-catch-event', + selector: 'wfm-intermediate-catch-event', templateUrl: 'intermediate-catch-event.component.html', }) -export class IntermediateCatchEventComponent { +export class IntermediateCatchEventComponent implements OnChanges, OnDestroy { @Input() public node: IntermediateCatchEvent; - public timerTypeChange(type: string) { + public checkedType: string; + public timeType = TimerEventDefinitionType; + public timeDate: string; + public timeDuration: any = { + year: 0, + month: 0, + day: 0, + hour: 0, + minute: 0, + second: 0 + }; + + public locale: any; + private localeZh: any = { + firstDayOfWeek: 0, + dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], + dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], + monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], + monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], + dateFns: null, + confirm: '确定' + }; + + constructor(private translate: TranslateService) { + this.locale = translate.currentLang.indexOf('zh') > -1 ? this.localeZh : undefined; + } + + public ngOnChanges(changes: SimpleChanges): void { + if (this.node && this.node.timerEventDefinition) { + this.checkedType = this.node.timerEventDefinition.type; + } + if (!this.checkedType) { + this.checkedType = this.timeType[this.timeType.timeDuration]; + } else if (this.checkedType === this.timeType[this.timeType.timeCycle]) { + // 兼容老数据，把timeCycle转为timeDuration + this.checkedType = this.node.timerEventDefinition.type = this.timeType[this.timeType.timeDuration]; + } + + if (this.node.timerEventDefinition.timeDuration) { + this.transformStringToTimeDuration(); + } else if (this.node.timerEventDefinition.timeCycle) { + // 兼容老数据，把timeCycle转为timeDuration + const timeCycleArray = this.node.timerEventDefinition.timeCycle.split('/'); + this.node.timerEventDefinition.timeDuration = timeCycleArray.length > 1 ? timeCycleArray[1] : timeCycleArray[0]; + this.node.timerEventDefinition.timeCycle = ''; + this.transformStringToTimeDuration(); + } else if (this.node.timerEventDefinition.timeDate) { + this.transformISOToDate(); + } + } + + public ngOnDestroy(): void { + if (this.checkedType === this.timeType[this.timeType.timeDuration]) { + this.transformTimeDurationToString(); + } else { + this.timeDateChange(); + } + } + + private transformStringToTimeDuration(): void { + // R5/P1Y2M10DT2H30M + // P1Y3M5DT6H7M30S + this.timeDuration.year = this.splitTimeDuration('P', 'Y'); + this.timeDuration.month = this.splitTimeDuration('Y', 'M'); + this.timeDuration.day = this.splitTimeDuration('M', 'D'); + this.timeDuration.hour = this.splitTimeDuration('D', 'H'); + this.timeDuration.minute = this.splitTimeDuration('H', 'M'); + this.timeDuration.second = this.splitTimeDuration('M', 'S'); + } + + private splitTimeDuration(startKey: string, endKey: string): number { + const timeDuration = this.node.timerEventDefinition.timeDuration; + let start = timeDuration.indexOf(startKey); + let end = timeDuration.indexOf(endKey); + if (startKey === 'H' || endKey === 'S') { + start = timeDuration.lastIndexOf(startKey); + end = timeDuration.lastIndexOf(endKey); + } + const result = parseInt(timeDuration.substring(start + 1, end)); + if (isNaN(result)) { + return 0; + } else { + return result; + } + } + + public timeTypeChange(type: string): void { + this.checkedType = type; const timer = this.node.timerEventDefinition; timer.type = type; timer.timeCycle = ''; timer.timeDate = ''; timer.timeDuration = ''; } + + public transformTimeDurationToString(): void { + // R5/P1Y2M10DT2H30M + this.node.timerEventDefinition.timeDuration = 'P' + + this.timeDuration.year + 'Y' + + this.timeDuration.month + 'M' + + this.timeDuration.day + 'D' + + 'T' + this.timeDuration.hour + 'H' + + this.timeDuration.minute + 'M' + + this.timeDuration.second + 'S'; + } + + private transformISOToDate(): void { + this.timeDate = new Date(this.node.timerEventDefinition.timeDate).toString(); + } + + private pad(value: number): string { + let result = value.toString(); + if (result.length === 1) { + result = '0' + result; + } + return result; + } + + private transformDateToISO(date: Date): string { + return date.getFullYear() + '-' + this.pad(date.getMonth() + 1) + '-' + this.pad(date.getDate()) + 'T' + + this.pad(date.getHours()) + ':' + this.pad(date.getMinutes()) + ':' + this.pad(date.getSeconds()); + } + + public timeDateChange(): void { + // 2007-04-05T12:30-02:00 + if (this.timeDate) { + const date = new Date(this.timeDate); + this.node.timerEventDefinition.timeDate = this.transformDateToISO(date); + console.log(this.node.timerEventDefinition.timeDate); + } + } } diff --git a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html index 5768c0b5..a7cef5a3 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html @@ -43,7 +43,7 @@ </div> <hr> -<b4t-parameter *ngFor="let input of node.input" [param]="input" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter> +<wfm-parameter *ngFor="let input of node.input" [param]="input" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> <hr *ngIf="0 < node.input.length"> -<b4t-parameter *ngFor="let output of node.output" [param]="output" [valueSource]= "outputSources" [planItems]="planItems"></b4t-parameter> +<wfm-parameter *ngFor="let output of node.output" [param]="output" [valueSource]= "outputSources" [planItems]="planItems"></wfm-parameter> diff --git a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts index 5d7339d0..7fa9675f 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts @@ -18,32 +18,31 @@ import { ValueSource } from '../../../model/value-source.enum'; import { Parameter } from '../../../model/workflow/parameter'; import { ToscaNodeTask } from '../../../model/workflow/tosca-node-task'; import { BroadcastService } from '../../../services/broadcast.service'; -import { DataService } from '../../../services/data/data.service'; +import { ToscaService } from '../../../services/tosca.service'; /** * node template component provides operations about tosca modules which saved in winery. * This component will be used in the property component while the corresponding workflow node is calling the node template's operation */ @Component({ - selector: 'b4t-node-template', + selector: 'wfm-node-template', templateUrl: 'node-template.component.html', }) export class NodeTemplateComponent implements AfterViewInit { @Input() public node: ToscaNodeTask; @Input() public planItems: PlanTreeviewItem[]; - public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; + public inputSources: ValueSource[] = [ValueSource.string, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan]; public nodeInterfaces: string[] = []; public nodeOperations: any[] = []; public nodeTemplates: NodeTemplate[] = []; - constructor(private dataService: DataService) { + constructor(private toscaService: ToscaService) { } public ngAfterViewInit() { - this.dataService.loadNodeTemplates() - .subscribe(nodeTemplates => this.nodeTemplates = nodeTemplates); + this.nodeTemplates = this.toscaService.getNodeTemplate(); this.loadInterfaces(); this.loadOperations(); @@ -86,7 +85,7 @@ export class NodeTemplateComponent implements AfterViewInit { private loadInterfaces() { if (this.node.template.id) { - this.dataService.loadNodeTemplateInterfaces(this.node.template) + this.toscaService.loadNodeTemplateInterfaces(this.node.template) .subscribe(interfaces => { this.nodeInterfaces = interfaces; }); @@ -98,7 +97,7 @@ export class NodeTemplateComponent implements AfterViewInit { private loadOperations() { if (this.node.nodeInterface) { this.nodeOperations = []; - this.dataService.loadNodeTemplateOperations( + this.toscaService.loadNodeTemplateOperations( this.node.template, this.node.nodeInterface) .subscribe(operations => this.nodeOperations = operations); @@ -109,7 +108,7 @@ export class NodeTemplateComponent implements AfterViewInit { private loadParameters() { if (this.node.operation) { - this.dataService.loadNodeTemplateOperationParameter( + this.toscaService.loadNodeTemplateOperationParameter( this.node.template, this.node.nodeInterface, this.node.operation) @@ -118,7 +117,7 @@ export class NodeTemplateComponent implements AfterViewInit { this.node.output = []; params.input.forEach(param => { - const p = new Parameter(param, '', ValueSource[ValueSource.String]); + const p = new Parameter(param, '', ValueSource[ValueSource.string]); this.node.input.push(p); }); diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html index 8aa912d7..a6d25e92 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html @@ -14,10 +14,10 @@ <div class="wm-properties-wrapper" *ngIf="show"> <div class="form-group row"> - <b4t-editable-property class="col-md-10" [(name)]="node.name"></b4t-editable-property> - <div class="col-md-2"> - <button (click)="deleteNode()" type="button" class="btn white"> - <i class="fa fa-trash" style="margin-right: 5px;"></i> + <wfm-editable-property class="col-md-9" [(value)]="node.name"></wfm-editable-property> + <div class="col-md-3"> + <button (click)="deleteNode()" type="button" class="plx-btn plx-btn-error"> + <i class="plx-ico-delete-16" style="margin-right: 5px;"></i>{{ 'WORKFLOW.DELETE' | translate }} </button> </div> </div> @@ -33,12 +33,13 @@ <hr> <div [ngSwitch]="node.type"> - <b4t-start-event *ngSwitchCase="nodeType[nodeType.startEvent]" [node]="node"></b4t-start-event> - <b4t-error-event *ngSwitchCase="nodeType[nodeType.errorStartEvent]" [node]="node"></b4t-error-event> - <b4t-error-event *ngSwitchCase="nodeType[nodeType.errorEndEvent]" [node]="node"></b4t-error-event> - <b4t-node-template *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]" [node]="node" [planItems]="planTreeviewItems"></b4t-node-template> - <b4t-rest-task *ngSwitchCase="nodeType[nodeType.restTask]" [node]="node" [planItems]="planTreeviewItems"></b4t-rest-task> - <b4t-intermediate-catch-event *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]" [node]="node"></b4t-intermediate-catch-event> - <b4t-script-task *ngSwitchCase="nodeType[nodeType.scriptTask]" [node]="node"></b4t-script-task> + <wfm-start-event *ngSwitchCase="nodeType[nodeType.startEvent]" [node]="node"></wfm-start-event> + <wfm-error-event *ngSwitchCase="nodeType[nodeType.errorStartEvent]" [node]="node"></wfm-error-event> + <wfm-error-event *ngSwitchCase="nodeType[nodeType.errorEndEvent]" [node]="node"></wfm-error-event> + <wfm-node-template *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]" [node]="node" [planItems]="planTreeviewItems"></wfm-node-template> + <wfm-rest-task *ngSwitchCase="nodeType[nodeType.restTask]" [node]="node" [planItems]="planTreeviewItems"></wfm-rest-task> + <wfm-intermediate-catch-event *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]" [node]="node"></wfm-intermediate-catch-event> + <wfm-service-task *ngSwitchCase="nodeType[nodeType.serviceTask]" [node]="node"></wfm-service-task> + <wfm-script-task *ngSwitchCase="nodeType[nodeType.scriptTask]" [node]="node"></wfm-script-task> </div> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts index 56db6583..1b381c5d 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts @@ -10,19 +10,16 @@ * ZTE - initial API and implementation and/or initial documentation */ -import { Component, OnInit } from '@angular/core'; -import { TreeNode } from 'primeng/primeng'; -import { TranslateService } from '@ngx-translate/core'; - -import { PlanTreeviewItem } from '../../model/plan-treeview-item'; -import { ValueSource } from '../../model/value-source.enum'; -import { NodeType } from '../../model/workflow/node-type.enum'; -import { Parameter } from '../../model/workflow/parameter'; -import { WorkflowNode } from '../../model/workflow/workflow-node'; -import { BroadcastService } from '../../services/broadcast.service'; -import { JsPlumbService } from '../../services/jsplumb.service'; -import { ModelService } from '../../services/model.service'; -import { NoticeService } from '../../services/notice.service'; +import {Component, OnInit} from "@angular/core"; +import {TranslateService} from "@ngx-translate/core"; +import {PlanTreeviewItem} from "../../model/plan-treeview-item"; +import {ValueSource} from "../../model/value-source.enum"; +import {NodeType} from "../../model/workflow/node-type.enum"; +import {WorkflowNode} from "../../model/workflow/workflow-node"; +import {BroadcastService} from "../../services/broadcast.service"; +import {JsPlumbService} from "../../services/jsplumb.service"; +import {ModelService} from "../../services/model.service"; +import {NoticeService} from "../../services/notice.service"; /** * property component presents information of a workflow node. @@ -30,7 +27,7 @@ import { NoticeService } from '../../services/notice.service'; * it may load information dynamically. the content may be different for different node type. */ @Component({ - selector: 'b4t-properties', + selector: 'wfm-properties', styleUrls: ['./properties.component.css'], templateUrl: 'properties.component.html', }) @@ -41,13 +38,13 @@ export class PropertiesComponent implements OnInit { // public nodeTypes: string[] = WorkflowNodeType; public show = false; public titleEditing = false; - public valueSource = [ValueSource.String]; + public valueSource = [ValueSource.string]; constructor(private broadcastService: BroadcastService, - private modelService: ModelService, - private translate: TranslateService, - private noticeService: NoticeService, - private jsPlumbService: JsPlumbService) { + private modelService: ModelService, + private translate: TranslateService, + private noticeService: NoticeService, + private jsPlumbService: JsPlumbService) { } @@ -59,13 +56,13 @@ export class PropertiesComponent implements OnInit { // TODOS: 1) save config info in case config info no exists on a different environment. // 2) display property panel even if config info not exists for it may be adjust. try { - this.planTreeviewItems = this.modelService.getPlanParameters(this.node.id); - this.show = true; + this.planTreeviewItems = this.modelService.getPlanParameters(this.node.id); + this.show = true; } catch (error) { - this.show = false; - this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => { - this.noticeService.error(res); - }); + this.show = false; + this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => { + this.noticeService.error(res); + }); } } else { this.show = false; diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html new file mode 100644 index 00000000..9d17374b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html @@ -0,0 +1,23 @@ +<!-- +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ +--> +<wfm-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> +<hr *ngIf="pathParams.length > 0"> +<wfm-parameter *ngFor="let param of queryParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> +<hr *ngIf="queryParams.length > 0"> +<wfm-parameter *ngFor="let param of headerParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> + +<wfm-parameter-tree [restConfigId]="restConfigId" [parameters]="inputParams" [valueSource]="inputSources" + [planItems]="planItems"></wfm-parameter-tree> +<wfm-parameter-tree [restConfigId]="restConfigId" [parameters]="outputParams" [valueSource]="outputSources" [showValue]="false" + [planItems]="planItems"></wfm-parameter-tree> diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts new file mode 100644 index 00000000..692661a7 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts @@ -0,0 +1,109 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { TreeNode } from 'primeng/primeng'; + +import { PlanTreeviewItem } from '../../../../model/plan-treeview-item'; +import { Swagger, SwaggerResponseClass } from '../../../../model/swagger'; +import { ValueSource } from '../../../../model/value-source.enum'; +import { RestParameter } from '../../../../model/workflow/rest-parameter'; +import { BroadcastService } from '../../../../services/broadcast.service'; +import { SwaggerTreeConverterService } from '../../../../services/swagger-tree-converter.service'; +import { RestService } from "../../../../services/rest.service"; +import { SwaggerIn } from '../../../../model/workflow/swagger/swagger-in.enum'; + +/** + * property component presents information of a workflow node. + * the presented information can be edit in this component. + * it may load information dynamically. the content may be different for different node type. + */ +@Component({ + selector: 'wfm-node-parameters', + styleUrls: ['./node-parameters.component.css'], + templateUrl: 'node-parameters.component.html', +}) +export class NodeParametersComponent implements OnChanges { + @Input() public swaggerInput: RestParameter[]; + @Input() public swaggerOutput: SwaggerResponseClass[]; + @Input() public restConfigId: string; + @Input() public planItems: PlanTreeviewItem[]; + + public inputSources: ValueSource[] = [ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; + public outputSources: ValueSource[] = []; + public valueSource = ValueSource; + public headerParams: RestParameter[] = []; + public pathParams: RestParameter[] = []; + public queryParams: RestParameter[] = []; + public inputParams: TreeNode[] = []; + public outputParams: TreeNode[] = []; + + private index = 1; + + constructor(private broadcastService: BroadcastService, + private restService: RestService, + private swaggerTreeConverterService: SwaggerTreeConverterService) { + } + + public ngOnChanges(changes: SimpleChanges): void { + if (changes.swaggerInput && changes.swaggerInput.currentValue) { + this.resetRequestParams(changes.swaggerInput.currentValue); + } + if (changes.swaggerOutput && changes.swaggerOutput.currentValue) { + this.resetResponseParams(changes.swaggerOutput.currentValue); + } + } + + public resetRequestParams(parameters: RestParameter[]) { + this.pathParams = []; + this.queryParams = []; + this.inputParams = []; + this.headerParams = []; + + parameters.forEach(param => { + if (SwaggerIn[SwaggerIn.path] === param.position) { + this.pathParams.push(param); + } else if (SwaggerIn[SwaggerIn.query] === param.position) { + this.queryParams.push(param); + } else if (SwaggerIn[SwaggerIn.header] === param.position) { + this.headerParams.push(param); + } else if (SwaggerIn[SwaggerIn.body] === param.position) { + let valueObject = undefined; + if (undefined !== param.value || undefined !== param.valueSource) { + valueObject = { value: param.value, valueSource: param.valueSource }; + } + const requestTreeNode = this.swaggerTreeConverterService.schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), + 'Request Param', param.schema, valueObject); + // console.log('requestTreeNode is :'); + // console.log(requestTreeNode.value); + param.value = requestTreeNode.value.value; + param.valueSource = requestTreeNode.value.valueSource; + this.inputParams.push(requestTreeNode); + } else { + // TODO others param types not supported + console.log('Unsupport parameter position(in):' + param.position); + } + }); + } + + public resetResponseParams(responses: SwaggerResponseClass[]) { + this.outputParams = []; + if (0 < responses.length && responses[0].schema) { + const treeNode = this.swaggerTreeConverterService.schema2TreeNode( + this.restService.getSwaggerInfo(this.restConfigId), + 'Response Params', + responses[0].schema, + { value: {}, valueSource: ValueSource[ValueSource.Definition] }); + this.outputParams.push(treeNode); + } + } +} diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.html new file mode 100644 index 00000000..bc14295d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.html @@ -0,0 +1,36 @@ +<!-- +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +--> +<p-tree class="ui-fluid" *ngIf="parameters.length > 0" [value]="parameters"> + <ng-template let-node pTemplate="default"> + <wfm-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [showValue]="showValue" [valueSource]="valueSource" + [planItems]="planItems" [canDelete]="getCanDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></wfm-parameter> + </ng-template> + + <ng-template let-node pTemplate="array"> + <wfm-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [showValue]="showValue" [valueSource]="getObjectValueSource()" + [planItems]="planItems" [canInsert]="getCanInsert(node)" [canDelete]="getCanDelete(node)" (paramChange)="paramChange($event, node)" + (insert)="addChildNode4ObjectArray(node)" (delete)="deleteTreeNode(node)"></wfm-parameter> + </ng-template> + + <ng-template let-node pTemplate="object"> + <wfm-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [showValue]="showValue" [valueSource]="getObjectValueSource()" + [planItems]="planItems" [canDelete]="getCanDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></wfm-parameter> + </ng-template> + + <ng-template let-node pTemplate="map"> + <wfm-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [showValue]="showValue" [valueSource]="getObjectValueSource()" + [planItems]="planItems" [canInsert]="getCanInsert(node)" [canDelete]="getCanDelete(node)" (paramChange)="paramChange($event, node)" + (insert)="addChildNode4DynamicObject(node)" (delete)="deleteTreeNode(node)"></wfm-parameter> + </ng-template> +</p-tree>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts new file mode 100644 index 00000000..93c3b72e --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts @@ -0,0 +1,176 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { ChangeDetectionStrategy, Component, Input, OnInit, Output } from '@angular/core'; +import { TreeNode } from 'primeng/primeng'; + +import { PlanTreeviewItem } from '../../../../../model/plan-treeview-item'; +import { ValueSource } from '../../../../../model/value-source.enum'; +import { Parameter } from '../../../../../model/workflow/parameter'; +import { SwaggerTreeConverterService } from '../../../../../services/swagger-tree-converter.service'; +import { WorkflowUtil } from '../../../../../util/workflow-util'; +import { Swagger } from "../../../../../model/swagger"; +import { RestService } from "../../../../../services/rest.service"; + +/** + * parameter tree presents parameter of task node's input or output parameters. + */ +@Component({ + selector: 'wfm-parameter-tree', + styleUrls: ['./parameter-tree.component.css'], + templateUrl: 'parameter-tree.component.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ParameterTreeComponent implements OnInit { + @Input() public parameters: TreeNode[]; + @Input() public showValue: boolean; + @Input() public canInsert: boolean; + @Input() public restConfigId: string; + @Input() public valueSource: ValueSource[]; + @Input() public planItems: PlanTreeviewItem[]; + + constructor(private restService: RestService, private swaggerTreeConverterService: SwaggerTreeConverterService) { } + + public ngOnInit() { + if (undefined === this.showValue) { + this.showValue = true; + } + } + + public getParameter(node: any): Parameter { + // console.log('Parameter init:' + node.label +'.'+ node.type+'.'+JSON.stringify(node.value.value)+'.'+node.value.valueSource); + + return new Parameter(node.label, node.value.value, node.value.valueSource, node.definition.type, node.definition.reqquired); + } + + + public paramChange(param: Parameter, node: any) { + // console.log('Parameter change:' + param.name + ', Node label is:' + node.label); + + node.value.valueSource = param.valueSource; + node.value.value = param.value; + + this.objectParameterChange(node); + + if (node.label !== param.name) { + delete node.parent.value.value[node.label]; + node.label = param.name; + } + if (node.parent) { + node.parent.value.value[node.label] = node.value; + } else { + // this parameter is 'request param' or 'response param' + } + + } + + private objectParameterChange(node: any) { + if (node.value.valueSource === ValueSource[ValueSource.Definition]) { // value will be set by node defintion + const treeNode = this.swaggerTreeConverterService.schema2TreeNode(this.getSwagger(), node.label, node.definition, node.value); + node.value = treeNode.value; + node.children = treeNode.children; + } else { // parameter value will be set by param + node.children = []; + } + } + + private getSwagger(): Swagger { + return this.restService.getSwaggerInfo(this.restConfigId); + } + + public addChildNode4DynamicObject(node: any) { + const copyItem = WorkflowUtil.deepClone(node.definition.additionalProperties); + const key = Object.keys(node.value.value).length; + + const childrenNode = this.swaggerTreeConverterService + .schema2TreeNode(this.getSwagger(), key, copyItem); + + childrenNode.keyEditable = true; + node.value.value[key] = childrenNode.value; + + node.children.push(childrenNode); + } + + public addChildNode4ObjectArray(node: any) { + const copyItem = WorkflowUtil.deepClone(node.definition.items); + + const childrenNode = this.swaggerTreeConverterService + .schema2TreeNode( + this.getSwagger(), + node.children.length, + copyItem); + + node.value.value.push(childrenNode.value); + node.children.push(childrenNode); + } + + public deleteTreeNode(node: any) { + if ('array' === node.parent.type) { + // delete data + node.parent.value.value.splice(node.label, 1); + node.parent.children.splice(node.label, 1); + + // update node index + node.parent.children.forEach((childNode, index) => childNode.label = index); + } else if ('map' === node.parent.type) { + delete node.parent.value.value[node.label]; + for (let index = 0; index < node.parent.children.length; index++) { + const element = node.parent.children[index]; + if (element.label === node.label) { + node.parent.children.splice(index, 1); + break; + } + } + } + } + + public getCanInsert(node: any) { + if (undefined === this.canInsert) { + if (node.value.valueSource !== ValueSource[ValueSource.Definition]) { + return false; + } else { + return this.isArrayObject(node) || this.isDynamicObject(node); + } + } else { + return this.canInsert + } + } + + public getCanDelete(node: any) { + const parent = node.parent; + if (parent && + (this.isArrayObject(parent) || this.isDynamicObject(parent))) { + return true; + } else { + return false; + } + } + + public getObjectValueSource(): ValueSource[] { + const result = []; + this.valueSource.forEach(source => { + if (ValueSource.string != source) { + result.push(source); + } + }); + result.push(ValueSource.Definition); + return result; + } + + private isArrayObject(node: any): boolean { + return node.type === 'array'; + } + + private isDynamicObject(node: any): boolean { + return node.type === 'map'; + } +} diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.html new file mode 100644 index 00000000..1d3f87a8 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.html @@ -0,0 +1,67 @@ +<!-- +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ +--> +<div *ngIf="0 < queryParams.length"> + <div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.REST_INPUT_QUERY' | translate}}</label> + <div class="col-md-9"></div> + </div> + <wfm-parameter *ngFor="let query of queryParams; let i = index;" [param]="query" (paramChange)="onParamChange(query)" [valueSource]="inputValueSource" [planItems]="planItems"></wfm-parameter> + <hr> +</div> + +<div *ngIf="0 < headerParams.length"> + <div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.REST_INPUT_HEADER' | translate}}</label> + <div class="col-md-9"></div> + </div> + <wfm-parameter *ngFor="let header of headerParams; let i = index;" [param]="header" (paramChange)="onParamChange(header)" [valueSource]="inputValueSource" [planItems]="planItems"></wfm-parameter> + <hr> +</div> + +<div *ngIf="0 < pathParams.length"> + <div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.REST_INPUT_PATH' | translate}}</label> + <div class="col-md-9"></div> + </div> + <wfm-parameter *ngFor="let path of pathParams; let i = index;" [param]="path" (paramChange)="onParamChange(path)" [valueSource]="inputValueSource" [planItems]="planItems"></wfm-parameter> + <hr> +</div> + +<div *ngIf="0 < formDataParams.length"> + <div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.REST_INPUT_FORMDATA' | translate}}</label> + <div class="col-md-9"></div> + </div> + <wfm-parameter *ngFor="let formData of formDataParams; let i = index;" [param]="formData" (paramChange)="onParamChange(formData)" [valueSource]="inputValueSource" + [planItems]="planItems"></wfm-parameter> + <hr> +</div> + +<div *ngIf="0 < bodyParams.length"> + <div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.REST_INPUT_BODY' | translate}}</label> + <div class="col-md-9"></div> + </div> + <wfm-parameter-tree [parameters]="bodyParams" [valueSource]="inputValueSource" [planItems]="planItems"></wfm-parameter-tree> + <hr> +</div> + +<div *ngIf="0 < responseParams.length"> + <div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.REST_OUTPUT' | translate}}</label> + <div class="col-md-9"></div> + </div> + <wfm-parameter-tree [parameters]="responseParams" [valueSource]="outputValueSource" [showValue]="false" [canInsert]="false"></wfm-parameter-tree> + <hr> +</div>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.spec.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.spec.ts new file mode 100644 index 00000000..f0154f2b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.spec.ts @@ -0,0 +1,36 @@ +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RestParametersComponent } from './rest-parameters.component'; + +describe('RestParametersComponent', () => { + let component: RestParametersComponent; + let fixture: ComponentFixture<RestParametersComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RestParametersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RestParametersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.ts new file mode 100644 index 00000000..d24486d1 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.ts @@ -0,0 +1,367 @@ +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ +import { Component, Input, OnInit } from '@angular/core'; +import { PlanTreeviewItem } from '../../../../model/plan-treeview-item'; +import { SwaggerBaseParameter } from '../../../../model/workflow/swagger/swagger-base-parameter'; +import { SwaggerResponse } from '../../../../model/workflow/swagger/swagger-response'; +import { TreeNode } from 'primeng/components/common/treenode'; +import { ValueSource } from '../../../../model/value-source.enum'; +import { SwaggerIn } from '../../../../model/workflow/swagger/swagger-in.enum'; +import { SwaggerBodyParameter } from '../../../../model/workflow/swagger/swagger-body-parameter'; +import { SwaggerTreeConverterService } from '../../../../services/swagger-tree-converter.service'; +import { SwaggerSchema } from '../../../../model/workflow/swagger/swagger-schema'; +import { WorkflowUtil } from '../../../../util/workflow-util'; +import { Parameter } from '../../../../model/workflow/parameter'; +import { SwaggerNormalParameter } from '../../../../model/workflow/swagger/swagger-normal-parameter'; +import { ValueType } from '../../../../model/value-type.enum'; +import { ValueObject } from '../../../../model/value-object'; + +@Component({ + selector: 'wfm-rest-parameters', + templateUrl: './rest-parameters.component.html', + styleUrls: ['./rest-parameters.component.css'] +}) +export class RestParametersComponent implements OnInit { + @Input() public dataTypeInput: SwaggerBaseParameter[]; + @Input() public dataTypeOutput: SwaggerResponse[]; + @Input() public definitions: any; + @Input() public planItems: PlanTreeviewItem[]; + public queryParams: Parameter[] = []; + public headerParams: Parameter[] = []; + public pathParams: Parameter[] = []; + public formDataParams: Parameter[] = []; + public bodyParams: TreeNode[] = []; + public responseParams: TreeNode[] = []; + + public inputValueSource = [ValueSource.Variable, ValueSource.Plan, ValueSource.Topology]; + public outputValueSource = []; + constructor() { } + + ngOnInit() { + if (this.dataTypeInput) { + this.dataTypeInput.forEach(input => { + switch (input.in) { + case SwaggerIn[SwaggerIn.query]: + let query = this.normal2Parameter(input as SwaggerNormalParameter); + input.value = query.value; + input.valueSource = query.valueSource; + this.queryParams.push(query); + break; + case SwaggerIn[SwaggerIn.header]: + let header = this.normal2Parameter(input as SwaggerNormalParameter); + input.value = header.value; + input.valueSource = header.valueSource; + this.headerParams.push(header); + break; + case SwaggerIn[SwaggerIn.path]: + let path = this.normal2Parameter(input as SwaggerNormalParameter); + input.value = path.value; + input.valueSource = path.valueSource; + this.pathParams.push(path); + break; + case SwaggerIn[SwaggerIn.formData]: + let formData = this.normal2Parameter(input as SwaggerNormalParameter); + input.value = formData.value; + input.valueSource = formData.valueSource; + this.formDataParams.push(formData); + break; + case SwaggerIn[SwaggerIn.body]: + let body = this.body2TreeNode(input as SwaggerBodyParameter); + input.value = body.value.value; + input.valueSource = body.value.valueSource; + this.bodyParams.push(body); + break; + default: + console.warn(`Not support this parameters in:${input.in}`); + break; + } + }); + } + this.responseParams.push(this.parameter2TreeNode('status', + { type: ValueType[ValueType.number], editable: false }, { value: '', valueSource: ValueSource.string })); + if (this.dataTypeOutput) { + this.dataTypeOutput.forEach(output => { + const treeNode = this.swaggerResponse2TreeNode(output as SwaggerResponse); + if (treeNode) { + this.responseParams.push(treeNode); + } + }); + } + } + + public onParamChange(param: Parameter) { + this.dataTypeInput.forEach(input => { + if (input.name === param.name) { + input.value = param.value; + input.valueSource = param.valueSource; + } + }); + } + + private normal2Parameter(normalParam: SwaggerNormalParameter): Parameter { + let finalValue; + let finalValueSource; + if (normalParam.value && normalParam.value && normalParam.valueSource) { + finalValue = normalParam.value; + finalValueSource = normalParam.valueSource; + } else { + finalValue = normalParam.default; + finalValueSource = ValueSource[ValueSource.string]; + } + let parameter = new Parameter(normalParam.name, finalValue, finalValueSource, normalParam.type, normalParam.required, normalParam.show); + return parameter; + } + + private body2TreeNode(bodyParam: SwaggerBodyParameter) { + return this.swaggerSchema2TreeNode(bodyParam.name, bodyParam.schema, bodyParam); + } + + private swaggerResponse2TreeNode(responseParam: SwaggerResponse): TreeNode { + if (responseParam.$ref) { + return this.swaggerRef2TreeNode(responseParam.name, responseParam.$ref); + } else if (responseParam.schema) { + return this.swaggerSchema2TreeNode(responseParam.name, responseParam.schema); + } else { + console.log(`Unsupport response parameter:${responseParam.name}`); + return null; + } + } + + private swaggerSchema2TreeNode(name: string | number, schema: SwaggerSchema, value?: any) { + if (schema.$ref) { + return this.swaggerRef2TreeNode(name as string, schema.$ref); + } else { + value = this.getInitValue4Param(schema, value); + return this.parameter2TreeNode(name, schema, value); + } + } + + private swaggerRef2TreeNode(name: string, ref: string, value?: any) { + let definition = this.definitions[ref]; + let refTreeNode = { + label: 'Unsupport Ref Parameter', + type: this.getTreeNodeType(ref), + required: definition.required, + children: [], + definition: definition, + value: value, + }; + + // if (value.valueSource === ValueSource[ValueSource.Definition]) { + // if (definition.type === 'object') { + // refTreeNode.children = this.getPropertyFromObject(definition, value.value); + // } else if (definition.type === 'array') { + // refTreeNode.children = this.setChildrenForArray(definition, value.value); + // } + // } + return refTreeNode; + } + + private getInitValue4Param(schema: SwaggerSchema, value: any) { + let definition = schema; + if (schema.$ref) { + definition = this.definitions[schema.$ref]; + } + let valueObject: ValueObject = { valueSource: ValueSource[ValueSource.string] }; + if (undefined == value) { + valueObject.value = definition.default; + if (ValueType[ValueType.array] === definition.type || ValueType[ValueType.object] === definition.type) { + valueObject.valueSource = ValueSource[ValueSource.Definition]; + } else { + valueObject.valueSource = definition.type; + } + } else { + if('object' != typeof(value)){ + console.error('Param value is not object!, param definition is:' + definition); + } + valueObject.valueSource = value.valueSource; + valueObject.value = undefined === value.value ? definition.default : value.value; + } + if (ValueType[ValueType.object] === definition.type) { + return this.getInitValue4Object(valueObject); + } else if (ValueType[ValueType.array] === definition.type) { + // if (undefined == value) { + // valueObject.value = definition.default; + // if (ValueType[ValueType.array] === definition.type || ValueType[ValueType.object] === definition.type) { + // valueObject.valueSource = ValueSource[ValueSource.Definition]; + // } else { + // valueObject.valueSource = definition.type; + // } + // } else { + // valueObject.valueSource = value.valueSource; + // valueObject.value = undefined === value.value ? definition.default : value.value; + // } + return this.getInitValue4Array(valueObject); + } else { // primary type + // valueObject.value = undefined === value ? definition.default : value; + // valueObject.valueSource = definition.type; + return this.getInitValue4Primary(valueObject); + } + } + + + private getInitValue4Object(value: any) { + const newValue = { + value: {}, + valueSource: ValueSource[ValueSource.Definition] + }; + + if (!value || '' === value) { + return newValue; + } else { + if (value.valueSource !== ValueSource[ValueSource.Definition]) { + return value; + } else { + if (typeof value.value !== 'object') { + value.value = {}; + } + return value; + } + } + } + + private getInitValue4Array(value: any) { + const newValue = { + value: [], + valueSource: ValueSource[ValueSource.Definition] + }; + + if (!value || '' === value) { + return newValue; + } else { + if (value.valueSource !== ValueSource[ValueSource.Definition]) { + return value; + } else { + if (!(value.value instanceof Array)) { + value.value = []; + } + return value; + } + } + } + + private getInitValue4Primary(value: any) { + const newValue = { + value: '', + valueSource: ValueSource[ValueSource.string] + }; + + if (!value) { + return newValue; + } else { + if (typeof value.value === 'object') { + value.value = ''; + } + return value; + } + } + + private parameter2TreeNode(name: string | number, definition: any, value: any): any { + const nodeType = this.getTreeNodeType(definition); + + const node = { + label: name, + type: nodeType, + required: definition.required, + children: [], + definition: definition, + value: value + }; + + if (value.valueSource === ValueSource[ValueSource.Definition]) { + if (ValueType[ValueType.object] === definition.type) { + node.children = this.getPropertyFromObject(definition, value.value); + } else if (ValueType[ValueType.array] === definition.type) { + node.children = this.getItemsFromArray(definition, value.value); + } + } + + return node; + } + + private getTreeNodeType(param: any): string { + const type = param.type; + if (ValueType[ValueType.array] === type) { + return 'array'; + } else if (ValueType[ValueType.object] === type) { + if (param.additionalProperties) { + return 'map'; + } else { + return 'object'; + } + } else { + return 'default'; + } + } + + private getPropertyFromObject(schema: SwaggerSchema, value: any): TreeNode[] { + if (schema.properties) { + const required = schema.required as string[]; + return this.getPropertyFromSimpleObject(schema.properties, value, required); + } else if (schema.additionalProperties) { + return this.getPropertyFromMapOrDictionary(schema.additionalProperties, value); + } else { + console.warn('getPropertyFromObject() return [], param is:' + JSON.stringify(schema)); + return []; + } + + } + + private getPropertyFromSimpleObject(properties: any, objectValue: any, required: string[]): TreeNode[] { + const treeNodes: TreeNode[] = []; + for (const key in properties) { + let property = properties[key]; + // init required property + property.required = false; + if (Array.isArray(required)) { + for (let index = 0; index < required.length; index++) { + if (required[index] === key) { + property.required = true; + break; + } + } + } + + objectValue[key] = this.getInitValue4Param(property, objectValue[key]); + + const treeNode = this.swaggerSchema2TreeNode(key, property, objectValue[key]); + treeNodes.push(treeNode); + } + return treeNodes; + } + + private getPropertyFromMapOrDictionary(additionalProperties: any, mapOrDictionary: any): TreeNode[] { + const treeNodes: TreeNode[] = []; + for (const key in mapOrDictionary) { + const propertyCopy = WorkflowUtil.deepClone(additionalProperties); + propertyCopy.value = mapOrDictionary[key]; + const treeNode = this.swaggerSchema2TreeNode(key, propertyCopy, propertyCopy.value); + treeNode.keyEditable = true; + treeNodes.push(treeNode); + if (mapOrDictionary[key] !== propertyCopy.value) { + mapOrDictionary[key] = propertyCopy.value; + } + } + return treeNodes; + } + + private getItemsFromArray(definition: any, value: any[]): any[] { + const children = []; + value.forEach((itemValue, index) => { + const itemCopy = WorkflowUtil.deepClone(definition.items); + children.push(this.swaggerSchema2TreeNode(index, itemCopy, itemValue)); + }); + + return children; + } + +} diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html index e0d368d6..d3f41921 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html @@ -15,31 +15,40 @@ <div class="form-group row"> <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_SERVICE' | translate}}</label> <div class="col-md-9"> - <select class="form-control" [ngModel]="node.restConfigId" (ngModelChange)="serviceChanged($event)"> + <select *ngIf="loadSwaggerByMSB" class="form-control" [ngModel]="node.restConfigId" (ngModelChange)="serviceChanged($event)"> <option *ngFor="let restConfig of restService.getRestConfigs()" value="{{restConfig.id}}">{{restConfig.id}}</option> </select> + <input *ngIf="!loadSwaggerByMSB" class="form-control" [ngModel]="node.restConfigId" disabled /> </div> </div> <div class="form-group row"> <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_PATH' | translate}}</label> <div class="col-md-9"> - <select class="form-control" [ngModel]="node.path" (ngModelChange)="pathChanged($event)"> + <select *ngIf="loadSwaggerByMSB" class="form-control" [ngModel]="node.path" (ngModelChange)="pathChanged($event)"> <option *ngFor="let interface of restInterfaces" value="{{interface}}">{{interface}}</option> </select> + <input *ngIf="!loadSwaggerByMSB" class="form-control" [ngModel]="node.path" disabled /> </div> </div> <div class="form-group row"> <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_METHOD' | translate}}</label> <div class="col-md-9"> - <select class="form-control" [ngModel]="node.method" (ngModelChange)="methodChanged($event)"> + <select *ngIf="loadSwaggerByMSB" class="form-control" [ngModel]="node.method" (ngModelChange)="methodChanged($event)"> <option *ngFor="let operation of restOperations" value="{{operation}}">{{operation}}</option> </select> + <input *ngIf="!loadSwaggerByMSB" class="form-control" [ngModel]="node.method" disabled /> </div> </div> <hr> -<div class="ui-fluid"> - <b4t-node-parameters [restConfigId]="this.node.restConfigId" [swaggerInput]="this.node.parameters" [swaggerOutput]="this.node.responses" [planItems]="planItems"></b4t-node-parameters> +<div *ngIf="loadSwaggerByMSB"> + <wfm-node-parameters [restConfigId]="node.restConfigId" [swaggerInput]="node.parameters" [swaggerOutput]="node.responses" + [planItems]="planItems"></wfm-node-parameters> +</div> + +<div *ngIf="!loadSwaggerByMSB"> + <wfm-rest-parameters [dataTypeInput]="node.parameters" [dataTypeOutput]="dataTypeOutput" [definitions]="definitions" + [planItems]="planItems"></wfm-rest-parameters> </div>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts index 0dccee1e..3def276f 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts @@ -14,7 +14,6 @@ import { Subscription } from 'rxjs/Subscription'; import { TranslateService } from '@ngx-translate/core'; import { PlanTreeviewItem } from '../../../model/plan-treeview-item'; -import { Swagger, SwaggerMethod, SwaggerParameter, SwaggerResponse } from '../../../model/swagger'; import { ValueSource } from '../../../model/value-source.enum'; import { ValueType } from '../../../model/value-type.enum'; import { RestParameter } from '../../../model/workflow/rest-parameter'; @@ -23,24 +22,49 @@ import { BroadcastService } from '../../../services/broadcast.service'; import { NoticeService } from '../../../services/notice.service'; import { RestService } from '../../../services/rest.service'; import { WorkflowUtil } from '../../../util/workflow-util'; +import { NodeTypeService } from '../../../services/node-type.service'; +import { NodeDataType } from '../../../model/node-data-type/node-data-type'; +import { SwaggerBaseParameter } from "../../../model/workflow/swagger/swagger-base-parameter"; +import { SwaggerResponse } from "../../../model/workflow/swagger/swagger-response"; +import { Swagger, SwaggerMethod } from '../../../model/swagger'; +import { SwaggerBodyParameter } from '../../../model/workflow/swagger/swagger-body-parameter'; +import { SwaggerNormalParameter } from '../../../model/workflow/swagger/swagger-normal-parameter'; +import { SwaggerSchema } from '../../../model/workflow/swagger/swagger-schema'; +import { SwaggerIn } from '../../../model/workflow/swagger/swagger-in.enum'; @Component({ - selector: 'b4t-rest-task', + selector: 'wfm-rest-task', templateUrl: 'rest-task.component.html', }) export class RestTaskComponent implements OnInit { @Input() public node: RestTask; @Input() public planItems: PlanTreeviewItem[]; + public swaggerJson: any = {}; - public restInterfaces: any[]; - public restOperations: any = []; + public restInterfaces = []; + public restOperations = []; + public loadSwaggerByMSB = true; + // public dataTypeInput: SwaggerBaseParameter[] = []; + public dataTypeOutput: SwaggerResponse[] = []; + public definitions: SwaggerSchema; private swagger: Swagger; - constructor(private broadcastService: BroadcastService, public restService: RestService, + constructor(private nodeTypeService: NodeTypeService, private broadcastService: BroadcastService, public restService: RestService, private noticeService: NoticeService, private translate: TranslateService) { } public ngOnInit() { - this.loadInterfaces(); + const nodeDataType = this.nodeTypeService.getNodeDataTypeById(this.node.typeId); + // if (nodeDataType.content && nodeDataType.content.baseUrl && nodeDataType.content.serviceName && nodeDataType.content.version + // && nodeDataType.content.path && nodeDataType.content.method && nodeDataType.content.consumes) { + if (nodeDataType && nodeDataType.content && nodeDataType.content.baseUrl && nodeDataType.content.serviceName + && nodeDataType.content.serviceVersion && nodeDataType.content.path && nodeDataType.content.method) { + this.loadSwaggerByMSB = false; + } + if (this.loadSwaggerByMSB) { + this.loadInterfaces(); + } else { + this.setParametersByDataType(nodeDataType); + } } public serviceChanged(configId: string) { @@ -64,10 +88,15 @@ export class RestTaskComponent implements OnInit { this.updateMethodInfo(); } - private loadInterfaces() { + private loadInterfaces(): void { if (this.node.restConfigId) { - this.swagger = this.restService.getSwaggerInfo(this.node.restConfigId); + // this.swagger = this.restService.getSwaggerInfo(this.node.restConfigId); + let restConfig = this.restService.getRestConfig(this.node.restConfigId); + this.node.baseUrl = restConfig.url; + this.node.serviceName = restConfig.name; + this.node.serviceVersion = restConfig.version; + this.swagger = restConfig.swagger; if (this.swagger) { this.restInterfaces = []; for (const key of Object.keys(this.swagger.paths)) { @@ -82,7 +111,7 @@ export class RestTaskComponent implements OnInit { } } - private loadOperations() { + private loadOperations(): void { if (this.node.path) { const swaggerPath: any = this.swagger.paths[this.node.path]; @@ -93,7 +122,7 @@ export class RestTaskComponent implements OnInit { } } - private updateMethodInfo() { + private updateMethodInfo(): void { if (this.node.method) { const path: any = this.swagger.paths[this.node.path]; const method: SwaggerMethod = path[this.node.method]; @@ -103,8 +132,10 @@ export class RestTaskComponent implements OnInit { let tempParameters: RestParameter[] = []; method.parameters.forEach(param => { - const nodeParam = new RestParameter(param.name, '', ValueSource[ValueSource.String], - ValueType[ValueType.String], param.position, param.schema, param.required); + let defaultType = SwaggerIn[SwaggerIn.body] === param.position ? ValueType[ValueType.object] : ValueType[ValueType.string]; + const type = param.type ? param.type : defaultType; + const nodeParam = new RestParameter(param.name, undefined, ValueSource[ValueSource.string], + type, param.position, param.schema, param.required); tempParameters.push(WorkflowUtil.deepClone(nodeParam)); }); this.node.parameters = tempParameters; @@ -114,4 +145,129 @@ export class RestTaskComponent implements OnInit { this.node.responses = responseParams.map(param => WorkflowUtil.deepClone(param)); } } + + private setParametersByDataType(nodeDataType: NodeDataType): void { + this.node.serviceName = nodeDataType.content.serviceName; + this.node.serviceVersion = nodeDataType.content.serviceVersion; + this.node.restConfigId = this.node.serviceName; + if (this.node.serviceVersion) { + this.node.restConfigId += ('.' + this.node.serviceVersion); + } + this.node.baseUrl = nodeDataType.content.baseUrl; + this.node.path = nodeDataType.content.path; + this.node.method = nodeDataType.content.method; + this.node.consumes = nodeDataType.content.consumes; + this.node.produces = nodeDataType.content.produces; + this.definitions = nodeDataType.definitions; + if (nodeDataType.content.inputs) { + for (const key in nodeDataType.content.inputs) { + if (nodeDataType.content.inputs.hasOwnProperty(key)) { + // Set default value of dataType + const element = nodeDataType.content.inputs[key]; + let param: SwaggerBaseParameter = this.getParameterByDataType(element, key); + if (param) { + // Set exist value + let found = false; + if (this.node.parameters) { + for (let p = 0; p < this.node.parameters.length; p++) { + if (param.name === this.node.parameters[p].name) { + found = true; + let value = this.node.parameters[p].value; + let valueSource = this.node.parameters[p].valueSource; + param.value = value; + param.valueSource = valueSource; + this.node.parameters[p] = param; + break; + } + } + } else { + this.node.parameters = []; + } + if (!found) { + this.node.parameters.push(param); + } + } + } + } + } + if (nodeDataType.content.outputs) { + for (const key in nodeDataType.content.outputs) { + if (nodeDataType.content.outputs.hasOwnProperty(key)) { + // Set default value of dataType + const element = nodeDataType.content.outputs[key]; + this.dataTypeOutput.push(this.getResponseByDataType(element, key)); + } + } + } + } + + private getParameterByDataType(dataTypeParameter: SwaggerBaseParameter, name: string): SwaggerBaseParameter { + if (!dataTypeParameter.name) { + dataTypeParameter.name = name; + } + if (SwaggerIn[SwaggerIn.body] === dataTypeParameter.in) { + return this.initBodyParam(dataTypeParameter as SwaggerBodyParameter); + } else { + return this.initNormalParam(dataTypeParameter as SwaggerNormalParameter); + } + } + + private getResponseByDataType(dataTypeResponse: SwaggerResponse, name: string): SwaggerResponse { + let responseParam = dataTypeResponse; + if (!responseParam.name) { + responseParam.name = name; + } + return this.initResponseParam(responseParam); + } + + private initNormalParam(normalParam: SwaggerNormalParameter): SwaggerNormalParameter { + let normal = WorkflowUtil.deepClone(normalParam); + // Set default value of dataType + if (undefined === normalParam.show) { + normal.show = true; + } + if ('path' === normalParam.in) { + normal.required = true; + } else if (undefined === normalParam.required) { + normal.required = false; + } + if (undefined === normalParam.allowEmptyValue) { + normal.allowEmptyValue = false; + } + if (undefined === normalParam.collectionFormat) { + normal.collectionFormat = 'csv'; + } + if (undefined === normalParam.type) { + normal.type == ValueType[ValueType.string]; + } + // editable not support + return normal; + } + + private initBodyParam(bodyParam: SwaggerBodyParameter): SwaggerBodyParameter { + let body = WorkflowUtil.deepClone(bodyParam); + // Set default value of dataType + if (undefined === bodyParam.show) { + body.show = true; + } + if (undefined === bodyParam.required) { + body.required = false; + } + if (undefined === bodyParam.valueSource) { + body.valueSource = ValueSource[ValueSource.Definition]; + } + if (undefined === bodyParam.schema.type) { + body.schema.type == ValueType[ValueType.string]; + } + // $ref not support + if (bodyParam.$ref) { + console.warn('Do not support body parameter $ref.'); + } + return body; + } + + private initResponseParam(responseParam: SwaggerResponse): SwaggerResponse { + let response = responseParam; + return response; + } } diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html index ee1ac4d4..26183210 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html @@ -15,9 +15,10 @@ <div class="form-group row"> <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT_FORMAT' | translate}}</label> <div class="col-md-9"> - <select class="form-control" [(ngModel)]="node.scriptFormat"> - <option *ngFor="let script of scriptOperations" value="{{script}}">{{script}}</option> - </select> + <input *ngIf='!canChangeFormat' disabled class="form-control" [(ngModel)]="node.scriptFormat" /> + <select *ngIf='canChangeFormat' class="form-control" [(ngModel)]="node.scriptFormat"> + <option *ngFor="let script of scriptOperations" value="{{script}}">{{script}}</option> + </select> </div> </div> @@ -26,5 +27,4 @@ <div class="col-md-9"> <textarea class="form-control" type="text" rows="20" [(ngModel)]="node.script"></textarea> </div> -</div> - +</div>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts index 145768fa..a0f5fd93 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts @@ -9,16 +9,43 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ -import { AfterViewInit, Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { ScriptTask } from "../../../model/workflow/script-task"; +import { NodeTypeService } from '../../../services/node-type.service'; @Component({ - selector: 'b4t-script-task', + selector: 'wfm-script-task', templateUrl: 'script-task.component.html', }) -export class ScriptTaskComponent { +export class ScriptTaskComponent implements OnInit { @Input() public node: ScriptTask; - public scriptOperations = ['JavaScript']; + public canChangeFormat = true; + public scriptOperations = ['JavaScript', 'Groovy']; + + constructor(private nodeTypeService: NodeTypeService) { } + + public ngOnInit() { + const nodeDataType = this.nodeTypeService.getNodeDataTypeById(this.node.typeId); + let scriptFormat = nodeDataType.content.scriptFormat; + // scriptFormat is not support, reset it as null; + if (undefined === this.scriptOperations.find(format => format == scriptFormat)) { + scriptFormat = null; + } + // Defined scriptFormat value, use it as default and can not change. + if (scriptFormat && '' != scriptFormat) { + this.canChangeFormat = false; + if (!this.node.scriptFormat || '' == this.node.scriptFormat) { + this.node.scriptFormat = scriptFormat; + this.node.script = nodeDataType.content.script; + } + } else { + // Default scriptFormat value should be 'JavaScript' + if (!this.node.scriptFormat || '' == this.node.scriptFormat) { + this.node.scriptFormat = 'JavaScript'; + this.node.script = ''; + } + } + } } diff --git a/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.html new file mode 100644 index 00000000..d72914fd --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.html @@ -0,0 +1,39 @@ +<!-- +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + --> +<div class="form-group row"> + <label class="col-md-3 form-control-label" style="text-align:right;">{{'WORKFLOW.SERVICE_CLASS' | translate}}</label> + <div class="col-md-9"> + <input class="form-control" [(ngModel)]="node.className" [disabled]="!canEdit" /> + </div> +</div> +<hr> + +<div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.SERVICE_INPUT' | translate}}</label> +</div> +<wfm-parameter *ngFor="let in of node.inputs; let i = index;" [param]="in" [valueSource]="inputValueSource" [canEditName]="canEdit" + [canEditValue]="node.editable" [canDelete]="canEdit" (delete)="deleteInput(i)"></wfm-parameter> +<button *ngIf="canEdit" type="button" class="plx-btn" (click)="createInput();"> + <i class="plx-ico-new-16"></i>{{ 'WORKFLOW.CREATE' | translate }} +</button> +<hr> + +<div class="form-group row"> + <label class="col-md-3 form-control-label">{{'WORKFLOW.SERVICE_OUTPUT' | translate}}</label> +</div> +<wfm-parameter *ngFor="let out of node.outputs; let i = index;" [param]="out" [valueSource]="outputValueSource" [canEditName]="canEdit" + [canDelete]="canEdit" [showValue]="false" (delete)="deleteOutput(i)"></wfm-parameter> +<button *ngIf="canEdit" type="button" class="plx-btn" (click)="createOutput();" style="margin-bottom:10px;"> + <i class="plx-ico-new-16"></i>{{ 'WORKFLOW.CREATE' | translate }} +</button>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.spec.ts b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.spec.ts new file mode 100644 index 00000000..498adf66 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.spec.ts @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServiceTaskComponent } from './service-task.component'; + +describe('ServiceTaskComponent', () => { + let component: ServiceTaskComponent; + let fixture: ComponentFixture<ServiceTaskComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServiceTaskComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServiceTaskComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.ts new file mode 100644 index 00000000..48a4074f --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.ts @@ -0,0 +1,97 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +import { Component, Input, OnInit } from '@angular/core'; +import { ServiceTask } from '../../../model/workflow/service-task'; +import { NodeTypeService } from '../../../services/node-type.service'; +import { Parameter } from '../../../model/workflow/parameter'; +import { ValueSource } from '../../../model/value-source.enum'; + +@Component({ + selector: 'wfm-service-task', + templateUrl: './service-task.component.html', + styleUrls: ['./service-task.component.css'] +}) +export class ServiceTaskComponent implements OnInit { + @Input() public node: ServiceTask; + public canEdit = true; + public inputValueSource = [ValueSource.Variable]; + public outputValueSource = []; + constructor(private nodeTypeService: NodeTypeService) { } + + public ngOnInit() { + const nodeDataType = this.nodeTypeService.getNodeDataTypeById(this.node.typeId); + if (nodeDataType.content && nodeDataType.content.class && '' != nodeDataType.content.class) { + this.canEdit = false; + } + if (!this.node.className) { + this.node.className = ''; + if (nodeDataType.content.class) { + this.node.className = nodeDataType.content.class; + } + } + + let inputs = nodeDataType.content.inputs; + if (!this.node.inputs) { + // Set default value + this.node.inputs = []; + if (inputs) { + for (const key in inputs) { + if (inputs.hasOwnProperty(key)) { + const element = inputs[key]; + this.node.inputs.push(new Parameter(key, element.default, ValueSource[ValueSource.string], + element.type, element.required, element.show)); + } + } + } + } else { + // Load parameter value + // todo: + } + + let outputs = nodeDataType.content.outputs; + if (!this.node.outputs) { + // Set default value + this.node.outputs = []; + if (outputs) { + for (const key in outputs) { + if (outputs.hasOwnProperty(key)) { + const element = outputs[key]; + this.node.outputs.push(new Parameter(key, element.default, ValueSource[ValueSource.string], + element.type, element.required)); + } + } + } + } else { + // Load parameter value + // todo: + } + } + + public createInput(): void { + this.node.inputs.push(new Parameter('', '', ValueSource[ValueSource.string])); + } + + public deleteInput(index: number): void { + this.node.inputs.splice(index, 1); + } + public createOutput(): void { + this.node.outputs.push(new Parameter('', '', ValueSource[ValueSource.string])); + } + + public deleteOutput(index: number): void { + this.node.outputs.splice(index, 1); + } + + private getParameters() { + + } +} diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html index d6aaafd8..f48a725b 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html @@ -11,15 +11,30 @@ * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ --> +<table cellpadding="10px"> + <tr> + <th style="width:35%;" class="plx-table-th">{{ 'WORKFLOW.PROCESS_VARIABLE' | translate }}</th> + <th style="width:45%;" class="plx-table-th">{{ 'WORKFLOW.PROCESS_VARIABLE_DEFAULT' | translate }}</th> + <th style="width:20%;" class="plx-table-th">{{ 'WORKFLOW.PROCESS_VARIABLE_OPERATION' | translate }}</th> + </tr> + <tr *ngFor="let param of node.parameters; let i = index;" class="table-body"> + <td> + <input [ngModel]="param.name" (ngModelChange)="checkKey($event, i)" class="plx-input"/> + <span *ngIf="param.errorMsg">{{param.errorMsg}}</span> + </td> + <td> + <input [(ngModel)]="param.value" class="plx-input" /> + <span *ngIf="param.errorMsg"> </span> + </td> + <td> + <i class="plx-ico-delete-16 delete-icon" (click)="delete(i)"></i> + <span *ngIf="param.errorMsg"> </span> + </td> + </tr> +</table> -<div class="form-group row"> - <div class="col-md-10"></div> - <div class="col-md-2"> - <button (click)="create();" type="button" class="btn blue1 pull-right"> - <i class="fa fa-plus"></i> - </button> - </div> -</div> - -<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true" - [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file +<button (click)="create();" type="button" class="plx-btn"> + <i class="plx-ico-new-16"></i>{{ 'WORKFLOW.PROCESS_VARIABLE_CREATE' | translate }} +</button> +<!-- <wfm-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true" + [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></wfm-parameter> -->
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts index adef3297..0f721242 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts @@ -9,7 +9,7 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { ValueSource } from '../../../model/value-source.enum'; @@ -17,20 +17,52 @@ import { Parameter } from '../../../model/workflow/parameter'; import { StartEvent } from '../../../model/workflow/start-event'; import { BroadcastService } from '../../../services/broadcast.service'; import { WorkflowUtil } from '../../../util/workflow-util'; +import { TranslateService } from '@ngx-translate/core'; @Component({ - selector: 'b4t-start-event', + selector: 'wfm-start-event', + styleUrls: ['./start-event.component.css'], templateUrl: 'start-event.component.html', }) -export class StartEventComponent { +export class StartEventComponent implements OnInit { @Input() public node: StartEvent; - public sources: ValueSource[] = [ValueSource.String]; + public sources: ValueSource[] = [ValueSource.string]; + + constructor(private translate: TranslateService) { } + + ngOnInit() { } public create(): void { - this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String])); + let parameter = new Parameter('', '', ValueSource[ValueSource.string]); + this.node.parameters.push(parameter); } public delete(index: number): void { this.node.parameters.splice(index, 1); } + + public checkKey(newName: string, index: number): void { + this.node.parameters[index].name = newName; + this.node.parameters.forEach(parameter => { + parameter.errorMsg = ''; + }); + if (!newName) { + this.translate.get('WORKFLOW.MSG.VARIABLE_EMPTY').subscribe((res: string) => { + this.node.parameters[index].errorMsg = res; + }); + } + this.node.parameters.forEach((parameter, i) => { + if (i + 1 < this.node.parameters.length) { + for (let j = i + 1; j < this.node.parameters.length; j++) { + let element = this.node.parameters[j]; + if (element.name && parameter.name === element.name) { + this.translate.get('WORKFLOW.MSG.VARIABLE_SAME').subscribe((res: string) => { + parameter.errorMsg = res; + element.errorMsg = res; + }); + } + } + } + }); + } } |