diff options
| author |   YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:58:42 +0800 |
|---|---|---|
| committer | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:58:42 +0800 |
| commit | 59884c775c9d06e2195401a09e08650a5cf37b20 (patch) | |
| tree | 80a2db253939f7a3aeb6e7be45c517c87d748511 /sdc-workflow-designer-ui/src/app/components | |
| parent | 8261a4ea8091c27b61ac581a852e2e18283b3cdd (diff) | |
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 <yuan.hu1@zte.com.cn>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components')
52 files changed, 1965 insertions, 668 deletions
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 @@ <div #mainContainer id="canvas" class="canvas" (mousedown)="canvasMouseDown($event)"> <div id="node-selector" #nodeSelector></div> - <b4t-node *ngFor="let node of modelService.getNodes()" [node]="node" [rank]="10"></b4t-node> + <wfm-node *ngFor="let node of modelService.getNodes()" [node]="node" [rank]="10"></wfm-node> </div> -<b4t-properties></b4t-properties> +<wfm-properties></wfm-properties> -<b4t-sequence-flow></b4t-sequence-flow>
\ No newline at end of file +<wfm-sequence-flow></wfm-sequence-flow>
\ 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 @@ -<input class="edit pull-left" [ngModel]="name" (ngModelChange)="change($event)" (click)="startEdit()" (blur)="stopEdit()" - (mouseover)="showEditComponent(true)" (mouseout)="showEditComponent(false)"> -<button *ngIf="showEdit" type="button" class="btn blue1 pull-left" (click)="stopEdit();"> - <i class="fa fa-check"></i> -</button>
\ No newline at end of file +<!-- +/** + * 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="editable-content" (click)="preEdit()"> + <h3 class="editable-main" *ngIf="!editable" [title]="'BLUEPRINT.BP_PANE.RENAME' | translate"> + <div class="editable-field">{{value}}</div> + <span><i class="fa fa-pencil"></i></span> + </h3> + <wfm-text-input *ngIf="editable" #editInput [(ngModel)]="editValue" (blur)="afterEdit()" + isFocus="true" required> + </wfm-text-input> +</div>
\ 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<string>(); - - 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<string>(); + @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 @@ */ --> -<div class="btn-left"> - <p-splitButton [label]="getCurrentPlanName()" icon="fa-arrows" (onClick)="showWorkflows()" [model]="workflows"></p-splitButton> +<div> + <label class="wf-name">{{name}}</label> + <!-- <button type="button" class="btn white btn-right" (click)="showRestConfigModal()"> + <i class="fa fa-cog"></i>{{ 'WORKFLOW.SETTING' | translate:param }} + </button> --> + <button type="button" class="plx-btn btn-right" (click)="checkBack(confirmSave)"> + <i class="fa fa-arrow-left"></i>{{ 'WORKFLOW.BACK' | translate }} + </button> + <button type="button" class="plx-btn plx-btn-primary btn-right" (click)="save()" [disabled]="!(canSave && hasRight)"> + <i class="fa fa-save"></i>{{ 'WORKFLOW.SAVE' | translate }} + </button> </div> -<div class="btn-right"> - <button type="button" class="btn white" (click)="save()"> - <i class="fa fa-save"></i>Save - </button> - <button type="button" class="btn white" (click)="showMicroserviceModal()"> - <i class="fa fa-cog"></i>Setting - </button> - <button type="button" class="btn white" (click)="download()"> - <i class="fa fa-download"></i>Download - </button> - <!-- <button type="button" class="btn white" (click)="test()">test</button> --> -</div> -<b4t-rest-config></b4t-rest-config> -<b4t-workflows></b4t-workflows> + +<wfm-rest-config></wfm-rest-config> + +<template #confirmSave let-c="close" let-d="dismiss"> + <div class="modal-header"> + <h4 class="modal-title">{{ 'WORKFLOW.CONFIRM' | translate }}</h4> + <button type="button" class="close" (click)="d('Cross click')"> + <span class="plx-ico-close-16"></span> + </button> + </div> + <div class="modal-body"> + <div class="row alert-modal"> + <span class="tip-img warning"></span> + <div class="tip-info"> + <div class="alert-title">{{ 'WORKFLOW.CONFIRM_SAVE1' | translate }}</div> + <div class="alert-result">{{ 'WORKFLOW.CONFIRM_SAVE2' | translate }}</div> + </div> + </div> + </div> + <div class="modal-footer"> + <div class="form-group"> + <div class="btnGroup modal-btn"> + <button type="button" class="plx-btn plx-btn-guide" (click)="saveBack();">{{ 'WORKFLOW.CONFIRM_SAVE_BACK' | translate }}</button> + <button type="button" class="plx-btn" (click)="back();">{{ 'WORKFLOW.CONFIRM_BACK' | translate }}</button> + </div> + </div> + </div> +</template> 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 @@ +<!-- +/** + * 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-2 form-control-label text-md-right">Name</label> <div class="col-md-10"> <input class="form-control" [(ngModel)]="restConfig.name"> </div> </div> -<div class="form-group row"> +<!-- <div class="form-group row"> <label class="col-md-2 form-control-label text-md-right">BaseUrl</label> <div class="col-md-10"> - <input class="form-control" [(ngModel)]="restConfig.url"> + <input class="form-control" [(ngModel)]="restConfig.baseUrl"> </div> </div> <div class="form-group row"> @@ -31,5 +44,5 @@ <textarea class="form-control" [disabled]="restConfig.dynamic" rows="8" [ngModel]="detail" (ngModelChange)="onDetailChanged($event)"></textarea> </div> -</div> +</div> --> 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 @@ +<!-- +/** + * 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="scroll" style="overflow:hidden; max-height: 300px; height: 300px;"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> @@ -6,13 +19,13 @@ </div> <ul class="list-group"> - <li class="list-group-item d-flex justify-content-between align-items-center" + <!-- <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let restConfig of restService.getRestConfigs(); index as i"> <div (click)="onConfigSelected(restConfig)">{{restConfig.name}}</div> <div class="badge badge-danger badge-pill" (click)="deleteRestConfig(i)"> <i class="fa fa-minus"></i> </div> - </li> + </li> --> </ul> </div> </div> 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 @@ +<!-- +/** + * 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="modal fade" bsModal #restConfigModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> @@ -11,10 +24,10 @@ <div class="modal-body"> <div class="row"> <div class="col-sm-4"> - <b4t-rest-config-list (configSelected)="configSelected($event)"></b4t-rest-config-list> + <wfm-rest-config-list (configSelected)="configSelected($event)"></wfm-rest-config-list> </div> <div class="col-sm-8"> - <b4t-rest-config-detail [restConfig]="currentRestConfig"></b4t-rest-config-detail> + <wfm-rest-config-detail [restConfig]="currentRestConfig"></wfm-rest-config-detail> </div> </div> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts index 6a9c9c22..46ac3f90 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts @@ -21,7 +21,7 @@ import { RestConfigListComponent } from './rest-config-list/rest-config-list.com * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-rest-config', + selector: 'wfm-rest-config', templateUrl: 'rest-config.component.html', }) export class RestConfigComponent { diff --git a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html deleted file mode 100644 index 0f6c7ff2..00000000 --- a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.html +++ /dev/null @@ -1,41 +0,0 @@ -<!--
-/**
- * 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="modal fade" bsModal #workflowsModal="bs-modal" [config]="{backdrop: 'static'}"
-tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title pull-left">Workflows</h4>
- <button type="button" class="close pull-right" aria-label="Close" (click)="workflowsModal.hide()">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">
- <ul class="list-group">
- <li class="list-group-item d-flex justify-content-between align-items-center"
- *ngFor="let key of workflows?.keys()">
- <div style="width:380px"><input class="form-control" [(ngModel)]="workflows.get(key).planName"></div>
- <div class="badge badge-danger badge-pill" (click)="deleteWorkflow(key)">
- <i class="fa fa-minus"></i>
- </div>
- </li>
- </ul>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn over-grey" (click)="addWorkflow()">Add</button>
- <button type="button" class="btn over-grey" (click)="workflowsModal.hide()">close</button>
- </div>
- </div>
- </div>
-</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts deleted file mode 100644 index afacd602..00000000 --- a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/**
- * 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 { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { ModalDirective } from 'ngx-bootstrap/modal';
-
-import { WorkflowService } from "../../../services/workflow.service";
-import { PlanModel } from "../../../model/plan-model";
-
-/**
- * workflows component
- * open a model to set workflow info
- */
-@Component({
- selector: 'b4t-workflows',
- templateUrl: 'workflows.component.html',
-})
-export class WorkflowsComponent {
- @ViewChild('workflowsModal') public workflowsModal: ModalDirective;
-
- public workflows :Map<string, any>;
-
- constructor(private workflowService: WorkflowService) {
- }
-
- public show() {
- this.workflows = this.workflowService.getWorkflows();
- // this.workflowService.getWorkflows().forEach((value, key, map) => {
- // this.workflows.push({
- // "planName": value.planName,
- // "planId": key
- // });
- // });;
-
- this.workflowsModal.show();
- }
-
- public deleteWorkflow(planId: string) {
- this.workflowService.deleteWorkflow(planId);
- }
-
- public addWorkflow() {
- this.workflowService.addWorkflow();
- }
-
-}
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css deleted file mode 100644 index e69de29b..00000000 --- a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css +++ /dev/null diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html deleted file mode 100644 index 5c03dc05..00000000 --- a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html +++ /dev/null @@ -1,23 +0,0 @@ -<p-tree *ngIf="parameters.length > 0" [value]="parameters"> - <ng-template let-node pTemplate="default"> - <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="valueSource" [planItems]="planItems" - [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter> - </ng-template> - - <ng-template let-node pTemplate="array"> - <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems" - [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" - (insert)="addChildNode4ObjectArray(node)" (delete)="deleteTreeNode(node)"></b4t-parameter> - </ng-template> - - <ng-template let-node pTemplate="object"> - <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems" - [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter> - </ng-template> - - <ng-template let-node pTemplate="map"> - <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems" - [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" - (insert)="addChildNode4DynamicObject(node)" (delete)="deleteTreeNode(node)"></b4t-parameter> - </ng-template> -</p-tree>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/sdc-workflow-designer-ui/src/app/components/node/node.component.html index 1b9c4b1a..f0ade497 100644 --- a/sdc-workflow-designer-ui/src/app/components/node/node.component.html +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.html @@ -11,15 +11,21 @@ * ZTE - initial API and implementation and/or initial documentation */ --> -<div (click)="onClick($event)" (mousedown)="onMousedown()" (dblclick)="showProperties($event)" class="node" id="{{node.id}}" - (mouseover)="onMouseOver($event, $event.target.parentNode)" (mouseout)="onMouseOut($event, $event.target.parentNode)" [style.top]="node.position.top + 'px'" - [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'" #nodeItem> +<div #nodeItem class="node" [id]="node.id" [title]="node.id" + (click)="onClick($event)" (mousedown)="onMousedown()" (dblclick)="showProperties($event)" + (mouseover)="onMouseOver($event, $event.target.parentNode)" + (mouseout)="onMouseOut($event, $event.target.parentNode)" + [style.top]="node.position.top + 'px'" + [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'"> - <div class="name">{{node.name}}</div> + <div *ngIf="!isGatewayNodeType(node.type)" class="name"> + {{node.name}} + </div> - <div *ngIf="canHaveChildren()" b4tResizable class="node-icon" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'" - [class.active]="active"> - <b4t-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></b4t-node> + <div *ngIf="canHaveChildren()" wfmResizable class="node-icon" [style.width]="node.position.width + 'px'" + [style.height]="node.position.height + 'px'" + [class.active]="active"> + <wfm-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></wfm-node> <div class="anchor anchors anchor-left"> <span class="left"> <i class="left-arrow1"></i> @@ -35,19 +41,22 @@ </div> <div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active"> - <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'"> + <img *ngIf='node.icon && "" != node.icon' [src]='getImageUrl(node.icon)'/> + <svg *ngIf='!(node.icon && "" != node.icon)' version="1.1" xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" + [style.height]="node.position.height + 'px'"> <g [ngSwitch]="node.type"> <g *ngSwitchCase="nodeType[nodeType.startEvent]"> <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 - s15-6.7,15-15S23.3,0,15,0L15,0z" /> + s15-6.7,15-15S23.3,0,15,0L15,0z"/> </g> <g *ngSwitchCase="nodeType[nodeType.endEvent]"> <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 - s15-6.7,15-15S23.3,0,15,0L15,0z" /> + s15-6.7,15-15S23.3,0,15,0L15,0z"/> </g> <g *ngSwitchCase="nodeType[nodeType.errorStartEvent]"> <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2 - s13,5.8,13,13S22.2,28,15,28z" /> + s13,5.8,13,13S22.2,28,15,28z"/> <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16 c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0 c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6 @@ -56,26 +65,32 @@ </g> <g *ngSwitchCase="nodeType[nodeType.errorEndEvent]"> <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4 - s11,4.9,11,11S21.1,26,15,26z" /> + s11,4.9,11,11S21.1,26,15,26z"/> <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10 c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0 - c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" /> + c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z"/> </g> <g *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]"> <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3 - C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" /> - <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" /> - <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" /> - <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" /> + C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z"/> + <path class="st0" + d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z"/> + <path class="st0" + d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z"/> + <path class="st0" + d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z"/> <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1 - C25.7,15.5,25.2,15.1,24.7,15.1z" /> + C25.7,15.5,25.2,15.1,24.7,15.1z"/> </g> <g *ngSwitchCase="nodeType[nodeType.restTask]"> <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3 - C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" /> - <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" /> - <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" /> - <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" /> + C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z"/> + <path class="st0" + d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z"/> + <path class="st0" + d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z"/> + <path class="st0" + d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z"/> <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2 c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4 c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z" @@ -88,22 +103,22 @@ <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12 c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12 c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12 - c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" /> + c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z"/> </g> <g *ngSwitchCase="nodeType[nodeType.parallelGateway]"> <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1 - s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" /> + s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z"/> <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12 c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12 c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12 - c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" /> + c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z"/> </g> <g *ngSwitchCase="nodeType[nodeType.subProcess]"> <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4 v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4 - c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z" /> + c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z"/> <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5 - c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z" /> + c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z"/> </g> <g *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]"> <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26 @@ -111,7 +126,7 @@ c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z" /> <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9 - c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" /> + c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z"/> </g> <g *ngSwitchCase="nodeType[nodeType.scriptTask]"> <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4 @@ -123,13 +138,13 @@ c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3 c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0 l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5 - l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" /> + l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z"/> <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2 - l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" /> + l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z"/> <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2 - c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" /> + c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z"/> <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1 - c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" /> + c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z"/> </g> </g> </svg> diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts index 5fd2caef..5482758e 100644 --- a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts @@ -9,22 +9,20 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation */ -import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core'; - -import { Subscription } from 'rxjs/Subscription'; -import { SubProcess } from '../../model/workflow/sub-process'; -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 { NodeType } from '../../model/workflow/node-type.enum'; +import {AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild} from "@angular/core"; +import {Subscription} from "rxjs/Subscription"; +import {WorkflowNode} from "../../model/workflow/workflow-node"; +import {BroadcastService} from "../../services/broadcast.service"; +import {JsPlumbService} from "../../services/jsplumb.service"; +import {NodeType} from "../../model/workflow/node-type.enum"; +import {WorkflowUtil} from "../../util/workflow-util"; /** * node component represent a single workflow node. * every node would be rendered on the container component */ @Component({ - selector: 'b4t-node', + selector: 'wfm-node', styleUrls: ['./node.component.css'], templateUrl: 'node.component.html', }) @@ -39,8 +37,7 @@ export class NodeComponent implements AfterViewInit, OnDestroy { private isMoving = false; constructor(private jsPlumbService: JsPlumbService, - private modelService: ModelService, - private broadcastService: BroadcastService) { + private broadcastService: BroadcastService) { } public ngAfterViewInit() { @@ -106,8 +103,22 @@ export class NodeComponent implements AfterViewInit, OnDestroy { target.classList.add('hover'); } + public isGatewayNodeType(type: string): boolean { + if (type === this.nodeType[this.nodeType.exclusiveGateway] || type === this.nodeType[this.nodeType.parallelGateway]) { + return true; + } + return false; + } + public showProperties(event) { + if (this.isGatewayNodeType(this.node.type)) { + return; + } event.stopPropagation(); this.broadcastService.broadcast(this.broadcastService.showProperty, this.node); } + + public getImageUrl(name: string): string { + return WorkflowUtil.GetIconFullPath(name); + } } diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html index 50ec0449..1b91b426 100644 --- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html @@ -12,37 +12,49 @@ */ --> -<div class="form-group"> - <div *ngIf="showLabel" class="parameter-item" style="margin:0;"> - <label *ngIf="true === param.required" class="form-control-required">*</label> - <input *ngIf="canEditName" class="form-control form-control-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)"> - <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label> +<div *ngIf="param.show" class="parameter"> + <div *ngIf="currentShowLabel" class="parameter-section"> + <label *ngIf="true === param.required" class="parameter-required">*</label> + <input *ngIf="currentCanEditName" class="parameter-label plx-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)"> + <label *ngIf="!currentCanEditName" class="parameter-label">{{param.name}}</label> </div> - <div class="parameter-item"> - <div *ngIf="showValue" [ngSwitch]="param.valueSource" class="parameter-item"> - <input *ngSwitchCase="sourceEnum[sourceEnum.String]" class="form-control form-control-value" type="text" [ngModel]="param.value" - (ngModelChange)="valueChange($event)"> - <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" class="form-control form-control-value" type="text" [ngModel]="param.value" - (ngModelChange)="valueChange($event)"> - <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" style="vertical-align:top;" [items]="planOptions" childrenField="children" - #simpleSelect="ngModel" class="form-control-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select> - <select *ngSwitchCase="sourceEnum[sourceEnum.Topology]" class="form-control form-control-value" type="text" [ngModel]="param.value" - (ngModelChange)="valueChange($event)"> - <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}}</option> - </select> + <div *ngIf="currentShowValue" class="parameter-section"> + <div *ngIf="showValueValue" class="parameter-item"> + <div [ngSwitch]="param.valueSource" class="parameter-item"> + <input *ngSwitchCase="valueTypeEnum[valueTypeEnum.number]" class="parameter-value plx-input" type="text" [ngModel]="param.value" + (ngModelChange)="valueChange($event)" [disabled]="!currentCanEditValue"> + <select *ngSwitchCase="valueTypeEnum[valueTypeEnum.boolean]" class="parameter-value" type="text" [ngModel]="param.value" + (ngModelChange)="valueChange($event)" [disabled]="!currentCanEditValue"> + <option>true</option> + <option>false</option> + </select> + <tree-select *ngSwitchCase="valueSourceEnum[valueSourceEnum.Plan]" name="simpleSelect" [items]="planOptions" childrenField="children" + #simpleSelect="ngModel" class="parameter-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)" + [disabled]="!currentCanEditValue"></tree-select> + <select *ngSwitchCase="valueSourceEnum[valueSourceEnum.Topology]" class="parameter-value" type="text" [ngModel]="param.value" + (ngModelChange)="valueChange($event)" [disabled]="!currentCanEditValue"> + <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}} + </option> + </select> + <!--string, Variable--> + <input *ngSwitchDefault class="parameter-value plx-input" type="text" [ngModel]="param.value" (ngModelChange)="valueChange($event)" + [disabled]="!currentCanEditValue"> + </div> </div> - <select *ngIf="showValueSource" class="form-control parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource" - (ngModelChange)="valueSourceChange($event)"> - <option *ngFor="let sourceType of valueSource" value="{{sourceEnum[sourceType]}}">{{sourceEnum[sourceType]}}</option> + <select *ngIf="showValueSource" class="parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource" (ngModelChange)="valueSourceChange($event)" + [disabled]="!currentCanEditValue"> + <option *ngFor="let sourceItem of sourceItems" value="{{sourceItem.value}}"> + {{sourceItem.name}} + </option> </select> </div> - <div *ngIf="canInsert" class="parameter-item"> - <button type="button" class="btn blue1" (click)="insertParam()"> + <div *ngIf="currentCanInsert" class="parameter-section"> + <button type="button" class="plx-btn plx-btn-primary" (click)="insertParam()"> <i class="fa fa-plus"></i> </button> </div> - <div *ngIf="canDelete" class="parameter-item"> - <button type="button" class="btn oes-red-bg" (click)="deleteParam()"> + <div *ngIf="currentCanDelete" class="parameter-section"> + <button type="button" class="plx-btn plx-btn-error" (click)="deleteParam()"> <i class="fa fa-minus"></i> </button> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts index 8c614460..c208c1de 100644 --- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts @@ -10,97 +10,178 @@ * ZTE - initial API and implementation and/or initial documentation */ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; - -import { PlanTreeviewItem } from '../../model/plan-treeview-item'; -import { ValueSource } from '../../model/value-source.enum'; -import { Parameter } from '../../model/workflow/parameter'; -import { DataService } from '../../services/data/data.service'; +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from "@angular/core"; +import {PlanTreeviewItem} from "../../model/plan-treeview-item"; +import {ValueSource} from "../../model/value-source.enum"; +import {Parameter} from "../../model/workflow/parameter"; +import {ToscaService} from "../../services/tosca.service"; +import {ValueType} from "../../model/value-type.enum"; /** * this component contains in property component if the corresponding node has parameter properties * eg. task node have input and output params, start event node has input param */ @Component({ - selector: 'b4t-parameter', + selector: 'wfm-parameter', styleUrls: ['./parameter.component.css'], templateUrl: 'parameter.component.html', }) -export class ParameterComponent implements OnChanges, OnInit { +export class ParameterComponent implements OnInit { @Input() public param: Parameter; - @Input() public valueSource: ValueSource[]; + @Input() public valueSource: ValueSource[] = []; + @Input() public showLabel: boolean; + @Input() public showValue: boolean; @Input() public canEditName: boolean; - @Input() public showLabel = true; + @Input() public canEditValue: boolean; @Input() public canInsert: boolean; @Input() public canDelete: boolean; @Input() public planItems: PlanTreeviewItem[]; - @Output() public paramChange = new EventEmitter<Parameter>(); - @Output() insert: EventEmitter<Parameter> = new EventEmitter<Parameter>(); - @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>(); - - public sourceEnum = ValueSource; - public valueGroupClass; - public valueClass; - public valueSourceClass; + @Output() paramChange = new EventEmitter<Parameter>(); + @Output() insert = new EventEmitter<Parameter>(); + @Output() delete = new EventEmitter<Parameter>(); + + // Parameter setting + public currentShowLabel: boolean; + public currentShowValue: boolean; + public currentCanEditName: boolean; + public currentCanEditValue: boolean; + public currentCanInsert: boolean; + public currentCanDelete: boolean; + + public valueTypeEnum = ValueType; + public valueSourceEnum = ValueSource; + public sourceItems: { name: string, value: string }[] = []; public planOptions = []; public topologyOptions: { name: string, value: string }[] = []; - public showValue = true; + public showValueValue = true; public showValueSource = true; public planValue: any = {}; - constructor(private dataService: DataService) { } - - public ngOnChanges(changes: SimpleChanges): void { - // if (changes.canInsert && !changes.canInsert.isFirstChange()) { - // this.resetValueGroupClass(changes.canInsert.currentValue, this.canDelete); - // } - // if (changes.canDelete && !changes.canDelete.isFirstChange()) { - // this.resetValueGroupClass(this.canInsert, changes.canDelete.currentValue); - // } + constructor(private toscaService: ToscaService) { } public ngOnInit(): void { - // console.warn('Parameter OnInit, parameter name is:' + this.param.name); - if (1 === this.valueSource.length) { - this.showValueSource = false; + this.initSetting(); + this.topologyOptions = this.toscaService.getTopologyProperties(); + this.initSourceItems(); + this.initPlanValue(); + this.setValueSource(this.param.valueSource); + this.initPlanTreeViewItems(this.planItems); + } + + private initSetting():void{ + this.currentShowLabel = this.setDefaultValue(this.showLabel, true); + this.currentShowValue = this.setDefaultValue(this.showValue, true); + this.currentCanEditName = this.setDefaultValue(this.canEditName, false); + this.currentCanEditValue = this.setDefaultValue(this.canEditValue, true); + this.currentCanInsert = this.setDefaultValue(this.canInsert, false); + this.currentCanDelete = this.setDefaultValue(this.canDelete, false); + } + + private setDefaultValue(param: boolean, value: boolean): boolean { + return undefined === param ? value : param; + } + + private initSourceItems(): void { + this.sourceItems = []; + if (this.param.type !== ValueType[ValueType.object] && this.param.type !== ValueType[ValueType.array]) { + this.sourceItems = [{ + name: this.capitalizeFirstLetter(this.param.type), + value: this.param.type + }]; } - this.topologyOptions = this.dataService.getTopologyProperties(); - // this.valueClass = { - // 'col-md-7': this.showValueSource, - // 'col-md-12': !this.showValueSource - // }; - // this.resetValueGroupClass(this.canInsert, this.canDelete); - this.updateValueSource(this.param.valueSource); - // trans plan options to tree view items. - this.initPlanTreeviewItems(this.planItems); + this.valueSource.forEach(value => { + this.sourceItems.push({ + name: ValueSource[value], + value: ValueSource[value] + }); + }); + } + + private capitalizeFirstLetter(value: string): string { + const firstLetter = value.substring(0, 1); + const remainedLetter = value.substring(1); + return firstLetter.toUpperCase() + remainedLetter; + } + + private initPlanValue(): void { if (ValueSource[ValueSource.Plan] === this.param.valueSource) { - this.planValue = { id: this.param.value }; + this.planValue = {id: this.param.value}; + } + } + + private setValueSource(valueSource: string): void { + if (ValueSource[ValueSource.Definition] === valueSource) { + this.showValueValue = false; + } else { + this.showValueValue = true; } } + private initPlanTreeViewItems(planTreeviewItems: PlanTreeviewItem[]): void { + this.planOptions = this.getTreeViewChild(planTreeviewItems); + } + + private getTreeViewChild(planTreeviewItems: PlanTreeviewItem[]): any[] { + let treeviewItems = []; + if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) { + // todo: debug check if it need [] or undefined. + return treeviewItems; + } + planTreeviewItems.forEach(item => { + const treeviewItem = { + id: item.value, + name: item.name, + disabled: false, + // !item.canSelect, + children: this.getTreeViewChild(item.children) + }; + treeviewItems.push(treeviewItem); + }); + return treeviewItems; + } + public keyChange(key: string) { this.param.name = key; this.paramChange.emit(this.param); } + private formatValue(value: any) { + let result; + switch (this.param.valueSource) { + case ValueSource[ValueSource.boolean]: + result = value === "true" ? true : false; + break; + case ValueSource[ValueSource.integer]: + result = parseInt(value); + break; + case ValueSource[ValueSource.number]: + result = parseFloat(value); + break; + default: + result = value; + } + return result; + } + public valueChange(value: any) { if (ValueSource[ValueSource.Plan] === this.param.valueSource) { if ('object' === typeof (value)) { this.planValue = value; this.param.value = value.id; } else { - this.planValue = { id: '' }; + this.planValue = {id: ''}; this.param.value = ''; } } else { - this.param.value = value; + this.param.value = this.formatValue(value); } this.paramChange.emit(this.param); } public valueSourceChange(valueSource: string) { - this.updateValueSource(valueSource); this.param.valueSource = valueSource; + this.setValueSource(valueSource); this.valueChange(''); } @@ -111,44 +192,4 @@ export class ParameterComponent implements OnChanges, OnInit { public deleteParam(): void { this.delete.emit(); } - - private updateValueSource(valueSource: string):void{ - if(ValueSource[ValueSource.Definition] === valueSource){ - this.showValue = false; - }else{ - this.showValue = true; - } - // this.resetValueSourceClass(this.showValue); - } - - private resetValueGroupClass(canInsert: boolean, canDelete: boolean): void { - // this.valueGroupClass = { - // 'col-md-5': canInsert && canDelete, - // 'col-md-7': (canInsert && !canDelete) || (!canInsert && canDelete), - // 'col-md-9': !canInsert && !canDelete - // }; - } - - private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void { - this.planOptions = this.getTreeviewChild(planTreeviewItems); - } - - private getTreeviewChild(planTreeviewItems: PlanTreeviewItem[]): any[] { - let treeviewItems = []; - if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) { - // todo: debug check if it need [] or undefined. - return treeviewItems; - } - planTreeviewItems.forEach(item => { - const treeviewItem = { - id: item.value, - name: item.name, - disabled: false, - // !item.canSelect, - children: this.getTreeviewChild(item.children) - }; - treeviewItems.push(treeviewItem); - }); - return treeviewItems; - } } 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/node-parameters/node-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html index 04e81966..9d17374b 100644 --- a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html @@ -11,11 +11,13 @@ * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ --> -<b4t-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter> +<wfm-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> <hr *ngIf="pathParams.length > 0"> -<b4t-parameter *ngFor="let param of queryParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter> +<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> -<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="inputParams" [valueSource]="inputSources" - [planItems]="planItems"></b4t-parameter-tree> -<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="outputParams" [valueSource]="outputSources" - [planItems]="planItems"></b4t-parameter-tree> +<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/node-parameters/node-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts index 5e7b24c7..692661a7 100644 --- a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts @@ -13,13 +13,14 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { TreeNode } from 'primeng/primeng'; -import { PlanTreeviewItem } from '../../model/plan-treeview-item'; -import { Swagger, SwaggerResponse } 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 { 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. @@ -27,21 +28,22 @@ import { RestService } from "../../services/rest.service"; * it may load information dynamically. the content may be different for different node type. */ @Component({ - selector: 'b4t-node-parameters', + 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: SwaggerResponse[]; + @Input() public swaggerOutput: SwaggerResponseClass[]; @Input() public restConfigId: string; @Input() public planItems: PlanTreeviewItem[]; - public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; - public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan]; + public inputSources: ValueSource[] = [ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; + public outputSources: ValueSource[] = []; public valueSource = ValueSource; - public pathParams: any[] = []; - public queryParams: any[] = []; + public headerParams: RestParameter[] = []; + public pathParams: RestParameter[] = []; + public queryParams: RestParameter[] = []; public inputParams: TreeNode[] = []; public outputParams: TreeNode[] = []; @@ -65,16 +67,26 @@ export class NodeParametersComponent implements OnChanges { this.pathParams = []; this.queryParams = []; this.inputParams = []; + this.headerParams = []; parameters.forEach(param => { - if (param.position === 'path') { + if (SwaggerIn[SwaggerIn.path] === param.position) { this.pathParams.push(param); - } else if (param.position === 'query') { + } else if (SwaggerIn[SwaggerIn.query] === param.position) { this.queryParams.push(param); - } else if (param.position === 'body') { - const requestTreeNode = this.swaggerTreeConverterService - .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Request Param', param.schema, param.value); - param.value = requestTreeNode.value; + } 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 @@ -83,11 +95,14 @@ export class NodeParametersComponent implements OnChanges { }); } - public resetResponseParams(responses: SwaggerResponse[]) { + 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, {}); + 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/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 index e69de29b..e69de29b 100644 --- a/sdc-workflow-designer-ui/src/app/components/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 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/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 index b1f67d94..93c3b72e 100644 --- a/sdc-workflow-designer-ui/src/app/components/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 @@ -10,48 +10,52 @@ * ZTE - initial API and implementation and/or initial documentation */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core'; +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 { ValueType } from '../../../model/value-type.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"; +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: 'b4t-parameter-tree', + selector: 'wfm-parameter-tree', styleUrls: ['./parameter-tree.component.css'], templateUrl: 'parameter-tree.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) -export class ParameterTreeComponent implements OnChanges { +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 ngOnChanges(changes: SimpleChanges) { + 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; @@ -63,7 +67,7 @@ export class ParameterTreeComponent implements OnChanges { } if (node.parent) { node.parent.value.value[node.label] = node.value; - }else{ + } else { // this parameter is 'request param' or 'response param' } @@ -129,15 +133,19 @@ export class ParameterTreeComponent implements OnChanges { } } - public canInsert(node: any) { - if (node.value.valueSource !== ValueSource[ValueSource.Definition]) { - return false; + 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.isArrayObject(node) || this.isDynamicObject(node); + return this.canInsert } } - public canDelete(node: any) { + public getCanDelete(node: any) { const parent = node.parent; if (parent && (this.isArrayObject(parent) || this.isDynamicObject(parent))) { @@ -150,7 +158,7 @@ export class ParameterTreeComponent implements OnChanges { public getObjectValueSource(): ValueSource[] { const result = []; this.valueSource.forEach(source => { - if (ValueSource.String != source) { + if (ValueSource.string != source) { result.push(source); } }); 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; + }); + } + } + } + }); + } } diff --git a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html index e7096ab7..e9d4d22f 100644 --- a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html +++ b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html @@ -29,7 +29,7 @@ </div> </div> - <div class="form-group row"> + <!-- <div class="form-group row"> <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_SOURCE' | translate}}</label> <div class="col-md-9"> <input class="form-control" disabled type="text" [(ngModel)]="sequenceFlow.sourceRef"> @@ -41,9 +41,9 @@ <div class="col-md-9"> <input class="form-control" disabled type="text" [(ngModel)]="sequenceFlow.targetRef"> </div> - </div> + </div> --> - <div class="form-group row"> + <div *ngIf="showCondition(sequenceFlow.sourceRef)" class="form-group row"> <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_CONDITION' | translate}}</label> <div class="col-md-9"> <input class="form-control" type="text" [(ngModel)]="sequenceFlow.condition"> diff --git a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts index f132a07f..55d051f2 100644 --- a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts @@ -17,6 +17,7 @@ import { SequenceFlow } from '../../model/workflow/sequence-flow'; import { BroadcastService } from '../../services/broadcast.service'; import { JsPlumbService } from '../../services/jsplumb.service'; import { ModelService } from '../../services/model.service'; +import { NodeType } from '../../model/workflow/node-type.enum'; /** * property component presents information of a workflow node. @@ -24,7 +25,7 @@ import { ModelService } from '../../services/model.service'; * it may load information dynamically. the content may be different for different node type. */ @Component({ - selector: 'b4t-sequence-flow', + selector: 'wfm-sequence-flow', styleUrls: ['./sequence-flow.component.css'], templateUrl: 'sequence-flow.component.html', }) @@ -33,8 +34,8 @@ export class SequenceFlowComponent implements AfterViewInit { public show = false; constructor(private broadcastService: BroadcastService, - private modelService: ModelService, - private jsPlumbService: JsPlumbService) { + private modelService: ModelService, + private jsPlumbService: JsPlumbService) { } @@ -49,6 +50,19 @@ export class SequenceFlowComponent implements AfterViewInit { }); } + public showCondition(sourceRef: string): boolean { + if (sourceRef) { + let node = this.modelService.getNodeMap().get(sourceRef); + if (node && (NodeType[NodeType.parallelGateway] === node.type || NodeType[NodeType.exclusiveGateway] === node.type)) { + return true; + } else { + return false; + } + } else { + return false; + } + } + public nameChanged(name: string) { this.sequenceFlow.name = name; this.jsPlumbService.setLabel(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef, name); diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html new file mode 100644 index 00000000..790273d7 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html @@ -0,0 +1,28 @@ +<!--
+/**
+ * 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
+ */
+ -->
+<accordion-group *ngFor="let category of nodeCategories" [isOpen]="category.collapse" #group>
+ <div accordion-heading class="toolbar-head">
+ <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': group?.isOpen, 'fa-chevron-right': !group?.isOpen}"></i>
+ <i class="fa fa-th-list"></i>
+ <span>{{ getDisplayName(category) }}</span>
+ </div>
+ <div *ngFor="let nodeType of category.nodes">
+ <div *ngIf="(nodeType.type === nodeTypeEnum[nodeTypeEnum.restTask] && supportRest) || (nodeType.type !== nodeTypeEnum[nodeTypeEnum.restTask])"
+ [attr.name]="getDisplayName(nodeType)" [attr.nodeTypeId]="nodeType.id" [attr.nodeType]="nodeType.type"
+ class="item ui-draggable">
+ <img [src]="getImageUrl(nodeType)"/>
+ <span>{{ getDisplayName(nodeType) }}</span>
+ </div>
+ </div>
+</accordion-group>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts new file mode 100644 index 00000000..3e82687e --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts @@ -0,0 +1,128 @@ +/**
+ * 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, OnInit } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { NodeTypeService } from "../../../services/node-type.service";
+import { DisplayInfoService } from "../../../services/display-info.service";
+import { NodeDataType } from "../../../model/node-data-type/node-data-type";
+import { NodeType } from "../../../model/workflow/node-type.enum";
+import { JsPlumbService } from "../../../services/jsplumb.service";
+import { SettingService } from "../../../services/setting.service";
+import { WorkflowUtil } from "../../../util/workflow-util";
+
+@Component({
+ selector: 'wfm-toolbar-node',
+ templateUrl: 'toolbar-node.component.html',
+ styleUrls: ['../toolbar.component.css']
+})
+export class ToolbarNodeComponent implements OnInit {
+ public nodeCategories: any[] = [];
+ public nodeTypeEnum = NodeType;
+ public supportRest: boolean;
+
+ private needInitButton = false;
+
+ constructor(private nodeTypeService: NodeTypeService,
+ private displayInfoService: DisplayInfoService,
+ private jsPlumbService: JsPlumbService,
+ private settingService: SettingService,
+ public translate: TranslateService) {
+
+ }
+
+ public ngOnInit(): void {
+ this.settingService.getSetting().subscribe(setting => {
+ this.initSetting(setting);
+ this.displayInfoService.getDisplayInfo().subscribe(resp => {
+ this.initNodeCategories(resp);
+ this.needInitButton = true;
+ });
+ });
+ }
+
+ public ngAfterViewChecked(): void {
+ if (this.needInitButton) {
+ console.log('initJsPlumb');
+ this.initJsPlumb();
+ this.needInitButton = false;
+ }
+ }
+
+ private initSetting(setting: any): void {
+ this.supportRest = setting.supportRestNode;
+ }
+
+ private initJsPlumb(): void {
+ this.jsPlumbService.buttonDraggable();
+ this.jsPlumbService.buttonDroppable();
+ }
+
+ private initNodeCategories(displayInfo: any): void {
+ const defaultCategory = this.insertDefaultCategory();
+
+ const categoryData = displayInfo['categoryData'] || {};
+ for (let key in categoryData) {
+ const group = {
+ id: key,
+ displayName: categoryData[key].displayName,
+ collapse: categoryData[key].collapse || false,
+ nodes: []
+ };
+ this.nodeCategories.push(group);
+ }
+
+ const defaultNodes = displayInfo['nodes'] || {};
+ for (let nodeId in defaultNodes) {
+ const nodeType = this.nodeTypeService.getNodeDataTypeById(nodeId);
+ const node = defaultNodes[nodeId];
+ if (node && node.category) {
+ const nodeCategory = this.nodeCategories.find(category => category.id === node.category);
+ if (nodeCategory) {
+ nodeCategory.nodes.push(nodeType);
+ } else {
+ defaultCategory.nodes.push(nodeType);
+ }
+ } else {
+ defaultCategory.nodes.push(nodeType);
+ }
+ }
+ }
+
+ private insertDefaultCategory(): any {
+ this.nodeCategories = [];
+ const defaultCategory = {
+ id: 'default',
+ displayName: {
+ zh_CN: '任务',
+ en_US: 'Task'
+ },
+ collapse: true,
+ nodes: []
+ };
+ this.nodeCategories.push(defaultCategory);
+
+ return defaultCategory;
+ }
+
+ public getDisplayName(data: any): string {
+ let language = 'zh_CN';
+ if (this.translate.currentLang.indexOf('en') > -1) {
+ language = 'en_US';
+ }
+ return data.displayName ? data.displayName[language] : data.id;
+ }
+
+ public getImageUrl(nodeType: NodeDataType): string {
+ const name = nodeType && nodeType.icon ? nodeType.icon.name : '';
+ return WorkflowUtil.GetIconFullPath(name);
+ }
+}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html index 19df5efd..b8e0ae7a 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html @@ -18,7 +18,7 @@ <i class="fa fa-th-list"></i> <span>{{ 'WORKFLOW.BPMN_EVENT' | translate }}</span> </div> - <div nodeType="startEvent" class="item ui-draggable"> + <div [attr.name]="'WORKFLOW.START_EVENT' | translate" nodeType="startEvent" class="item ui-draggable"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> <g> <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 @@ -27,7 +27,7 @@ </svg> <span>{{ 'WORKFLOW.START_EVENT' | translate }}</span> </div> - <div nodeType="endEvent" class="item ui-draggable"> + <div [attr.name]="'WORKFLOW.END_EVENT' | translate" nodeType="endEvent" class="item ui-draggable"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> <g> <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 @@ -36,7 +36,7 @@ </svg> <span>{{ 'WORKFLOW.END_EVENT' | translate }}</span> </div> - <div nodeType="intermediateCatchEvent" class="item ui-draggable"> + <div [attr.name]="'WORKFLOW.TIMER_EVENT' | translate" nodeType="intermediateCatchEvent" class="item ui-draggable"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> <g> <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26 @@ -78,73 +78,13 @@ </div> --> </accordion-group> - <accordion-group [isOpen]="true" #task> - <div accordion-heading class="toolbar-head"> - <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': task?.isOpen, 'fa-chevron-right': !task?.isOpen}"></i> - <i class="fa fa-th-list"></i> - <span>{{ 'WORKFLOW.BPMN_TASK' | translate }}</span> - </div> - <div *ngIf="!isCatalog" nodeType="toscaNodeManagementTask" class="item ui-draggable"> - <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> - <g> - <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3 - C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" /> - <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" /> - <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" /> - <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" /> - <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1 - C25.7,15.5,25.2,15.1,24.7,15.1z" /> - </g> - </svg> - <span>{{ 'WORKFLOW.TOSCA_TASK' | translate }}</span> - </div> - <div *ngIf="isCatalog" nodeType="restTask" class="item ui-draggable"> - <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> - <g> - <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3 - C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" /> - <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" /> - <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" /> - <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" /> - <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2 - c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4 - c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z" - /> - </g> - </svg> - <span>{{ 'WORKFLOW.REST_TASK' | translate }}</span> - </div> - <div nodeType="scriptTask" class="item ui-draggable"> - <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> - <g> - <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4 - c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6 - c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4 - c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5 - C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3 - c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8 - c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3 - c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0 - l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5 - l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" /> - <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2 - l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" /> - <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2 - c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" /> - <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1 - c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" /> - </g> - </svg> - <span>{{ 'WORKFLOW.SCRIPT_TASK' | translate }}</span> - </div> - </accordion-group> <accordion-group [isOpen]="true" #getway> <div accordion-heading class="toolbar-head"> <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': getway?.isOpen, 'fa-chevron-right': !getway?.isOpen}"></i> <i class="fa fa-th-list"></i> <span>{{ 'WORKFLOW.BPMN_GETWAY' | translate }}</span> </div> - <div nodeType="exclusiveGateway" class="item ui-draggable"> + <div [attr.name]="'WORKFLOW.EXCLUSIVE_GATEWAY' | translate" nodeType="exclusiveGateway" class="item ui-draggable"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> <g> <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4 @@ -158,7 +98,7 @@ </svg> <span>{{ 'WORKFLOW.EXCLUSIVE_GATEWAY' | translate }}</span> </div> - <div nodeType="parallelGateway" class="item ui-draggable"> + <div [attr.name]="'WORKFLOW.PARALLEL_GATEWAY' | translate" nodeType="parallelGateway" class="item ui-draggable"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> <g> <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1 @@ -191,4 +131,5 @@ <span>{{ 'WORKFLOW.SUB_PROCESS' | translate }}</span> </div> </accordion-group> --> + <wfm-toolbar-node></wfm-toolbar-node> </accordion> diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts index 1242215c..bfc45094 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts @@ -12,7 +12,7 @@ import { AfterViewChecked, Component, OnInit } from '@angular/core'; -import { DataService } from '../../services/data/data.service'; +import { SettingService } from '../../services/setting.service'; import { BroadcastService } from '../../services/broadcast.service'; import { JsPlumbService } from '../../services/jsplumb.service'; @@ -21,29 +21,10 @@ import { JsPlumbService } from '../../services/jsplumb.service'; * The supported nodes can be dragged to container component. which will add a new node to the workflow. */ @Component({ - selector: 'b4t-toolbar', + selector: 'wfm-toolbar', templateUrl: 'toolbar.component.html', styleUrls: ['./toolbar.component.css'] }) -export class ToolbarComponent implements AfterViewChecked, OnInit { - public isCatalog = true; - private needInitButton = false; +export class ToolbarComponent { - constructor(private jsPlumbService: JsPlumbService, private broadcastService: BroadcastService, - private dataService: DataService) { } - - public ngOnInit() { - this.broadcastService.backendServiceReady$.subscribe(() => { - this.isCatalog = 'Catalog' === this.dataService.getBackendType(); - this.needInitButton = true; - }); - } - - public ngAfterViewChecked() { - if (this.needInitButton) { - this.jsPlumbService.buttonDraggable(); - this.jsPlumbService.buttonDroppable(); - this.needInitButton = false; - } - } } |