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/container/container.component.html | 6 +- .../components/container/container.component.ts | 11 +- .../editable-property.component.html | 27 +- .../editable-property.component.ts | 113 +++++-- .../global-notice/global-notice.component.ts | 2 +- .../src/app/components/menus/menus.component.html | 55 ++- .../src/app/components/menus/menus.component.ts | 106 +++--- .../rest-config-detail.component.html | 19 +- .../rest-config-detail.component.ts | 4 +- .../rest-config-list.component.html | 17 +- .../rest-config-list/rest-config-list.component.ts | 8 +- .../menus/rest-config/rest-config.component.html | 17 +- .../menus/rest-config/rest-config.component.ts | 2 +- .../menus/workflows/workflows.component.html | 41 --- .../menus/workflows/workflows.component.ts | 55 --- .../node-parameters/node-parameters.component.css | 0 .../node-parameters/node-parameters.component.html | 21 -- .../node-parameters/node-parameters.component.ts | 94 ------ .../parameter-tree/parameter-tree.component.css | 0 .../parameter-tree/parameter-tree.component.html | 23 -- .../parameter-tree/parameter-tree.component.ts | 168 ---------- .../src/app/components/node/node.component.html | 79 +++-- .../src/app/components/node/node.component.ts | 35 +- .../components/parameter/parameter.component.html | 60 ++-- .../components/parameter/parameter.component.ts | 209 +++++++----- .../error-event/error-event.component.html | 2 +- .../property/error-event/error-event.component.ts | 4 +- .../intermediate-catch-event.component.html | 105 ++++-- .../intermediate-catch-event.component.ts | 138 +++++++- .../node-template/node-template.component.html | 4 +- .../node-template/node-template.component.ts | 19 +- .../components/property/properties.component.html | 23 +- .../components/property/properties.component.ts | 47 ++- .../node-parameters/node-parameters.component.html | 23 ++ .../node-parameters/node-parameters.component.ts | 109 ++++++ .../parameter-tree/parameter-tree.component.css | 0 .../parameter-tree/parameter-tree.component.html | 36 ++ .../parameter-tree/parameter-tree.component.ts | 176 ++++++++++ .../rest-parameters/rest-parameters.component.html | 67 ++++ .../rest-parameters.component.spec.ts | 36 ++ .../rest-parameters/rest-parameters.component.ts | 367 +++++++++++++++++++++ .../property/rest-task/rest-task.component.html | 19 +- .../property/rest-task/rest-task.component.ts | 180 +++++++++- .../script-task/script-task.component.html | 10 +- .../property/script-task/script-task.component.ts | 35 +- .../service-task/service-task.component.html | 39 +++ .../service-task/service-task.component.spec.ts | 36 ++ .../service-task/service-task.component.ts | 97 ++++++ .../start-event/start-event.component.html | 37 ++- .../property/start-event/start-event.component.ts | 42 ++- .../sequence-flow/sequence-flow.component.html | 6 +- .../sequence-flow/sequence-flow.component.ts | 20 +- .../toolbar-node/toolbar-node.component.html | 28 ++ .../toolbar/toolbar-node/toolbar-node.component.ts | 128 +++++++ .../app/components/toolbar/toolbar.component.html | 71 +--- .../app/components/toolbar/toolbar.component.ts | 25 +- 56 files changed, 2199 insertions(+), 902 deletions(-) delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts delete mode 100644 sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css delete mode 100644 sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html delete mode 100644 sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts delete mode 100644 sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.css delete mode 100644 sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html delete mode 100644 sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.spec.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.spec.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts (limited to 'sdc-workflow-designer-ui/src/app/components') diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.html b/sdc-workflow-designer-ui/src/app/components/container/container.component.html index c40fbcda..40cdf7fa 100644 --- a/sdc-workflow-designer-ui/src/app/components/container/container.component.html +++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.html @@ -14,9 +14,9 @@
- +
- + - \ No newline at end of file + \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.ts b/sdc-workflow-designer-ui/src/app/components/container/container.component.ts index 63ea84d9..5f317cb8 100644 --- a/sdc-workflow-designer-ui/src/app/components/container/container.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.ts @@ -16,7 +16,7 @@ import { SequenceFlow } from '../../model/workflow/sequence-flow'; import { WorkflowElement } from '../../model/workflow/workflow-element'; import { WorkflowNode } from '../../model/workflow/workflow-node'; import { BroadcastService } from '../../services/broadcast.service'; -import { DataService } from '../../services/data/data.service'; +import { InterfaceService } from '../../services/interface.service'; import { JsPlumbService } from '../../services/jsplumb.service'; import { ModelService } from '../../services/model.service'; @@ -25,7 +25,7 @@ import { ModelService } from '../../services/model.service'; * bpmn task nodes can be dropped into this canvas, and then the workflow can be edit */ @Component({ - selector: 'b4t-container', + selector: 'wfm-container', templateUrl: 'container.component.html', styleUrls: ['./container.component.css'] }) @@ -40,7 +40,7 @@ export class ContainerComponent implements AfterViewChecked, AfterViewInit, OnIn private needInitSequence = false; constructor(private broadcastService: BroadcastService, private jsPlumbService: JsPlumbService, - private dataService: DataService, public modelService: ModelService) { + private interfaceService: InterfaceService, public modelService: ModelService) { } @HostListener('window:keyup.delete', ['$event']) ondelete(event: KeyboardEvent) { @@ -74,10 +74,7 @@ export class ContainerComponent implements AfterViewChecked, AfterViewInit, OnIn public ngOnInit() { this.jsPlumbService.initJsPlumbInstance(this.modelService.rootNodeId); - this.broadcastService.backendServiceReady$.subscribe(() => { - this.dataService.initData(); - }); - this.broadcastService.planModel$.subscribe(() => { + this.broadcastService.initModel$.subscribe(() => { this.needInitSequence = true; }); this.broadcastService.showProperty$.subscribe(element=>{ diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html index 3c804efb..eb59b3c4 100644 --- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html +++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html @@ -1,5 +1,22 @@ - - \ No newline at end of file + +
+

+
{{value}}
+ +

+ + +
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts index ea965755..7f6ffbe2 100644 --- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts @@ -10,44 +10,113 @@ * ZTE - initial API and implementation and/or initial documentation */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output, ViewChild} from "@angular/core"; +import {TranslateService} from "@ngx-translate/core"; +import {isArray, isObject} from "util"; +import {ModelService} from "../../services/model.service"; +import {NoticeService} from "../../services/notice.service"; +import {NodeType} from "../../model/workflow/node-type.enum"; +import {ValueSource} from "../../model/value-source.enum"; +import {JsPlumbService} from "../../services/jsplumb.service"; +import {WorkflowNode} from "../../model/workflow/workflow-node"; /** * node or workflow-line name */ @Component({ - selector: 'b4t-editable-property', + selector: 'wfm-editable-property', templateUrl: 'editable-property.component.html', styleUrls: ['./editable-property.component.css'] }) export class EditablePropertyComponent { - @Input() public name: string; - @Output() public nameChange = new EventEmitter(); - - public showEdit = false; - public isEditing = false; - - public showEditComponent(isShow: boolean): void { - if(isShow){ - this.showEdit = isShow; - }else{ - if(!this.isEditing){ - this.showEdit = false; + @Input() public value: string; + @Output() public valueChange = new EventEmitter(); + @ViewChild('editInput') private editInput: any; + + public editValue = ''; + public editable = false; + + public preEdit(): void { + if (!this.editable) { + this.editable = true; + this.editValue = this.value; + } + } + + public afterEdit(): void { + if (this.editable) { + this.editable = false; + if (this.value === this.editValue) { + return; + } + + if (this.editInput.wfInput.valid) { + this.value = this.editValue; + this.valueChange.emit(this.value); + } else { + this.editValue = this.value; } } } - public startEdit(): void { - this.isEditing = true; + /*private validate(): boolean { + const nodes = this.modelService.getNodes(); + const existNode = nodes.find(node => node.id === this.editValue); + if (existNode) { + this.translate.get('WORKFLOW.MSG.NODE_ID_SAME', {value: existNode.id}).subscribe((res: string) => { + this.notice.error(res, 10000); + }); + return false; + } + return true; } - public stopEdit(): void { - this.isEditing = false; - this.showEdit = false; + private changeReferencedValue(): void { + const newNodeConnections = []; + const nodes = this.modelService.getNodes(); + nodes.forEach((node: any) => { + this.changeConnectionReferencedValue(node, this.value, this.editValue); + + if (node.type === NodeType[NodeType.restTask]) { + const parameters = node.parameters || []; + parameters.forEach(param => { + this.changeRestTaskReferencedValue(param, this.value, this.editValue); + }); + } + }); } - public change(newName: string) { - this.name = newName; - this.nameChange.emit(this.name); + private changeConnectionReferencedValue(node: WorkflowNode, oldValue: string, newValue: string): void { + node.connection.forEach(connection => { + if (connection.sourceRef === oldValue) { + connection.sourceRef = newValue; + } else if (connection.targetRef === oldValue) { + connection.targetRef = newValue; + } + }); } + + // 当restTask类型的节点的属性中valueSource是Plan时，value的值为引用其他节点id + // value格式为[restTask_2].[responseBody].[name]，可能有更多层，当时第一个[]里面的值为被引用节点的id + private changeRestTaskReferencedValue(param: any, oldValue: string, newValue: string): void { + if (param.valueSource === ValueSource[ValueSource.Plan]) { + const value = param.value || ''; + const index = value.indexOf('].['); + if (index > -1) { + const nodeId = value.substring(1, index); + if (nodeId === oldValue) { + param.value = '[' + newValue + value.substring(index); + } + } + } else if (param.valueSource === ValueSource[ValueSource.Definition]) { + const value = param.value; + if (isArray(value)) { + value.forEach(subValue => { + this.changeRestTaskReferencedValue(subValue, oldValue, newValue); + }); + } else if (isObject(value)) { + this.changeRestTaskReferencedValue(value, oldValue, newValue); + } + } + }*/ } diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts index 8ed4e252..35520683 100644 --- a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts @@ -17,7 +17,7 @@ import { NoticeType } from '../../model/notice-type.enum'; import { NoticeService } from '../../services/notice.service'; @Component({ - selector: 'global-notice', + selector: 'wfm-notice', templateUrl: './global-notice.component.html', styleUrls: ['./global-notice.component.css'] }) diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html index ee758fea..9537bfd7 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html @@ -12,20 +12,43 @@ */ --> -
- +
+ + + +
-
- - - - -
- - + + + + diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts index b58ec089..1c064f2c 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts @@ -11,72 +11,68 @@ */ import { Component, OnInit, ViewChild } from '@angular/core'; -import { WorkflowService } from '../../services/workflow.service'; -import { WorkflowsComponent } from "./workflows/workflows.component"; -import { BroadcastService } from "../../services/broadcast.service"; -import { PlanModel } from "../../model/plan-model"; +import { BroadcastService } from '../../services/broadcast.service'; +import { ModelService } from '../../services/model.service'; import { RestConfigComponent } from './rest-config/rest-config.component'; +import { AuthService } from '../../services/auth.service'; +import { InterfaceService } from '../../services/interface.service'; +import { ActivatedRoute } from '@angular/router/'; +import { PlxModal } from "../../paletx/plx-modal/modal"; @Component({ - selector: 'menus', - templateUrl: './menus.component.html', - styleUrls: ['./menus.component.css'] + selector: 'menus', + templateUrl: './menus.component.html', + styleUrls: ['./menus.component.css'] }) -export class MenusComponent { - @ViewChild(RestConfigComponent) public microserviceComponent: RestConfigComponent; - @ViewChild(WorkflowsComponent) public workflowsComponent: WorkflowsComponent; - public currentWorkflowId : string; - public workflows = []; +export class MenusComponent implements OnInit { + @ViewChild(RestConfigComponent) public restConfigComponent: RestConfigComponent; - constructor(private broadcastService: BroadcastService, private workflowService: WorkflowService) { - this.broadcastService.workflows.subscribe(wfs => { - this.workflows.splice(0, this.workflows.length); - if(wfs) { - wfs.forEach((value, key, map) => { - this.workflows.push({label: value.planName, command: () => { - this.workflowSelected(key, value.plan); - }}); - }); - } - }); - } + public name = ''; + public canSave = true; + public hasRight = false; - public save(): void { - this.workflowService.save(); - } + constructor(private activatedRoute: ActivatedRoute, private modelService: ModelService, + private broadcastService: BroadcastService, private authService: AuthService, + private plxModal: PlxModal) { } - public showMicroserviceModal(): void { - this.microserviceComponent.show(); - } + ngOnInit() { + this.activatedRoute.queryParams.subscribe(queryParams => { + let operation: string = queryParams.operation; + // default value is 'modify', which means save button is enabled. + this.canSave = null == operation || 'view' != operation.toLowerCase(); + }); + this.broadcastService.initModel.subscribe(planModel => { + this.name = planModel.name; + }); + this.broadcastService.saveRight$.subscribe(saveRight => { + this.hasRight = saveRight; + }); + // checkRights + this.authService.checkRights(); + } - public test() { - } + public save(): void { + this.modelService.save(); + } - public showWorkflows() { - this.workflowsComponent.show(); - } + public back(): void { + history.back(); + } - public workflowSelected(planId: string, planModel: PlanModel) { - - this.broadcastService.broadcast(this.broadcastService.planModel, planModel); - this.broadcastService.broadcast(this.broadcastService.planId, planId); + public checkBack(component: any): void { + if (this.modelService.isModify()) { + this.plxModal.open(component, { size: 'sm' }); + } else { + this.back(); } + } - public getCurrentPlanName() { - let planName = this.workflowService.getPlanName(this.currentWorkflowId); - return planName ? planName : 'Workflows' - } + public saveBack(): void { + this.modelService.save(this.back); + } + + public showRestConfigModal(): void { + this.restConfigComponent.show(); + } - public download() { - const filename = this.getCurrentPlanName() + '.json'; - const content = JSON.stringify(this.workflowService.planModel); - var eleLink = document.createElement('a'); - eleLink.download = filename; - eleLink.style.display = 'none'; - var blob = new Blob([content]); - eleLink.href = URL.createObjectURL(blob); - document.body.appendChild(eleLink); - eleLink.click(); - document.body.removeChild(eleLink); - } } diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html index ea0d3c68..9550ed33 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html @@ -1,13 +1,26 @@ +
-
+ diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts index d99a9a10..e4d43d8c 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts @@ -22,7 +22,7 @@ import { RestService } from '../../../../services/rest.service'; * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-rest-config-detail', + selector: 'wfm-rest-config-detail', templateUrl: 'rest-config-detail.component.html', }) export class RestConfigDetailComponent implements OnChanges { @@ -35,7 +35,7 @@ export class RestConfigDetailComponent implements OnChanges { public ngOnChanges() { if (this.restConfig == null) { - this.restConfig = new RestConfig('', '', '', '', ''); + this.restConfig = new RestConfig('', '', '', ''); } this.parseSwagger2String(); } diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html index aa98bc80..f8d745c1 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html @@ -1,3 +1,16 @@ +
@@ -6,13 +19,13 @@
    -
  • {{restConfig.name}}
    -
    • + -->
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts index 43120e85..8a84c476 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts @@ -22,7 +22,7 @@ import { RestService } from '../../../../services/rest.service'; * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-rest-config-list', + selector: 'wfm-rest-config-list', templateUrl: 'rest-config-list.component.html', }) export class RestConfigListComponent { @@ -36,11 +36,9 @@ export class RestConfigListComponent { } public addRestConfig() { + // const restConfig = this.restService.addRestConfig(); - const restConfig = this.restService.newRestConfig(); - this.restService.addRestConfig(restConfig); - - this.onConfigSelected(restConfig); + // this.onConfigSelected(restConfig); } public deleteRestConfig(index: number) { diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html index 9bd5bfc0..a858b0fe 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html @@ -1,3 +1,16 @@ +