diff options
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components')
65 files changed, 4640 insertions, 0 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.css new file mode 100644 index 00000000..5ba672cc --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.css @@ -0,0 +1,35 @@ +/** + * 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 + */ + +.canvas { + -webkit-overflow-scrolling: touch; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + height: 100%; + position: relative; + overflow: auto; + z-index: 0; + background-color: white; +} + +#node-selector{ + /* display: none; */ + position: absolute; + border: 1px dashed black; + background-color: #00ABFF; + position: absolute; + opacity: 0.1; +}
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.html new file mode 100644 index 00000000..40cdf7fa --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.html @@ -0,0 +1,22 @@ +<!-- +/** + * 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 #mainContainer id="canvas" class="canvas" (mousedown)="canvasMouseDown($event)"> + <div id="node-selector" #nodeSelector></div> + <wfm-node *ngFor="let node of modelService.getNodes()" [node]="node" [rank]="10"></wfm-node> +</div> + +<wfm-properties></wfm-properties> + +<wfm-sequence-flow></wfm-sequence-flow>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.ts new file mode 100644 index 00000000..5f317cb8 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/container/container.component.ts @@ -0,0 +1,165 @@ +/** + * 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 { AfterViewChecked, AfterViewInit, Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild } from '@angular/core'; + +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 { InterfaceService } from '../../services/interface.service'; +import { JsPlumbService } from '../../services/jsplumb.service'; +import { ModelService } from '../../services/model.service'; + +/** + * main canvas, it contains two parts: canvas and node property component + * bpmn task nodes can be dropped into this canvas, and then the workflow can be edit + */ +@Component({ + selector: 'wfm-container', + templateUrl: 'container.component.html', + styleUrls: ['./container.component.css'] +}) +export class ContainerComponent implements AfterViewChecked, AfterViewInit, OnInit, OnDestroy { + public allNotes: WorkflowNode[]; + @ViewChild('nodeSelector') nodeSelector: ElementRef; + @ViewChild('mainContainer') mainContainer: ElementRef; + + private isSelecting = false; + private selectedElements: WorkflowElement[] = []; + private showProperties = false; + private needInitSequence = false; + + constructor(private broadcastService: BroadcastService, private jsPlumbService: JsPlumbService, + private interfaceService: InterfaceService, public modelService: ModelService) { + } + + @HostListener('window:keyup.delete', ['$event']) ondelete(event: KeyboardEvent) { + if (this.showProperties || 0 >= this.selectedElements.length) { + return; + } + this.selectedElements.forEach(element => { + if (this.modelService.isNode(element)) { + let selectNode = element as WorkflowNode; + const parentId = this.jsPlumbService.getParentNodeId(selectNode.id); + this.jsPlumbService.remove(selectNode); + this.modelService.deleteNode(parentId, selectNode.id); + } else { + let sequenceFlow = element as SequenceFlow; + this.modelService.deleteConnection(sequenceFlow.sourceRef, sequenceFlow.targetRef); + this.jsPlumbService.deleteConnect(sequenceFlow.sourceRef, sequenceFlow.targetRef); + } + }); + this.selectedElements = []; + } + + @HostListener('document:mouseup', ['$event']) onmouseup() { + if (this.isSelecting) { + this.nodeSelector.nativeElement.style.display = 'none'; + this.mainContainer.nativeElement.onmousemove = null; + this.isSelecting = false; + this.broadcastService.broadcast(this.broadcastService.showProperty, null); + this.broadcastService.broadcast(this.broadcastService.selectedElement, this.selectedElements); + } + } + + public ngOnInit() { + this.jsPlumbService.initJsPlumbInstance(this.modelService.rootNodeId); + this.broadcastService.initModel$.subscribe(() => { + this.needInitSequence = true; + }); + this.broadcastService.showProperty$.subscribe(element=>{ + this.showProperties = null !== element; + }); + } + + public ngAfterViewInit() { + this.jsPlumbService.canvasDroppable(); + this.broadcastService.selectedElement$.subscribe(elements => { + if (elements) { + this.selectedElements = elements; + } else { + this.selectedElements = []; + } + }); + } + + public ngAfterViewChecked() { + if (this.needInitSequence) { + this.needInitSequence = false; + // Add the connection + this.jsPlumbService.connectChildrenNodes(this.modelService.rootNodeId); + } + } + + public ngOnDestroy() { + if (this.mainContainer.nativeElement.onmousemove) { + this.mainContainer.nativeElement.document.onmousemove = null; + } + } + + public canvasMouseDown(event) { + this.selectedElements = []; + this.isSelecting = true; + let posx = event.clientX + this.mainContainer.nativeElement.scrollLeft; + posx = 220 > posx ? 0 : posx - 220; + let posy = event.clientY + this.mainContainer.nativeElement.scrollTop; + posy = 60 > posy ? 0 : posy - 60; + let element = this.nodeSelector.nativeElement; + element.style.left = posx + "px"; + element.style.top = posy + "px"; + element.style.width = '0px'; + element.style.height = '0px'; + element.style.display = 'block'; + let curThis = this; + this.mainContainer.nativeElement.onmousemove = function (moveEvent) { + let movePosx = moveEvent.clientX + curThis.mainContainer.nativeElement.scrollLeft; + movePosx = 220 > movePosx ? 0 : movePosx - 220; + let movePosy = moveEvent.clientY + curThis.mainContainer.nativeElement.scrollTop; + movePosy = 60 > movePosy ? 0 : movePosy - 60; + const left = Math.min(movePosx, posx); + const top = Math.min(movePosy, posy); + const width = Math.abs(posx - movePosx); + const height = Math.abs(posy - movePosy); + element.style.left = left + "px"; + element.style.top = top + "px"; + element.style.width = width + "px"; + element.style.height = height + "px"; + curThis.selectNodes(left, top, width, height); + }; + } + + private selectNodes(left: number, top: number, width: number, height: number) { + this.selectedElements = []; + const allNodes = this.modelService.getNodes(); + allNodes.forEach(node => { + const np = node.position; + let selected = false; + if (left < np.left) { + if ((top < np.top && left + width > np.left && top + height > np.top) + || (top >= np.top && top < np.top + np.height && left + width > np.left)) { + selected = true; + } + } else if (left < np.left + np.width) { + if ((top < np.top && top + height > np.top) + || (top >= np.top && top < np.top + np.height)) { + selected = true; + } + } + if (selected) { + this.selectedElements.push(node); + } + }); + this.broadcastService.broadcast(this.broadcastService.selectedElement, this.selectedElements); + } + +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css new file mode 100644 index 00000000..35d21fce --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css @@ -0,0 +1,61 @@ +/** + * 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 + */ + +.editable-content { + display: inline-block; + width: 300px; + visibility: visible; +} + +.editable-main { + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; + font-size: 24px; + min-height: 34px; + padding: 2px 20px 2px 2px; + position: relative; + word-wrap: break-word; +} + +.editable-main:hover { + border: 1px solid #ddd; +} + +.editable-main span { + background-color: #f0f0f0; + border-left: 1px solid #ddd; + display: none; + padding: 0 4px 0 4px; + height: 100%; + position: absolute; + right: 0; + top: 0; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 3px; + -webkit-border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 3px; +} + +.editable-main span i { + font-size: 16px; + color: #707070; +} + +.editable-main:hover span { + display: inline; +} + +.editable-field { + display: inline-block; + width: 100%; +}
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html new file mode 100644 index 00000000..eb59b3c4 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html @@ -0,0 +1,22 @@ +<!-- +/** + * 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts new file mode 100644 index 00000000..7f6ffbe2 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts @@ -0,0 +1,122 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import {Component, EventEmitter, Input, 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: 'wfm-editable-property', + templateUrl: 'editable-property.component.html', + styleUrls: ['./editable-property.component.css'] +}) +export class EditablePropertyComponent { + @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; + } + } + } + + /*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; + } + + 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); + }); + } + }); + } + + 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css new file mode 100644 index 00000000..06f3c090 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css @@ -0,0 +1,20 @@ +/** + * 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 + */ + +.alert-div{ + position: fixed; + top: 100px; + left: 0; + right: 0; + margin: auto; + width: 400px; +}
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html new file mode 100644 index 00000000..a23e25d4 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html @@ -0,0 +1,18 @@ +<!-- +/** + * 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="alert-div"> + <alert *ngFor="let notice of notices; let i = index;" [type]="noticeType[notice.type]" dismissible="true" + [dismissOnTimeout]="notice.timeout" (onClosed)="onClosed(i)">{{notice.content}}</alert> +</div>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts new file mode 100644 index 00000000..b4644d4d --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts @@ -0,0 +1,37 @@ +/** + * 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 { GlobalNoticeComponent } from './global-notice.component'; + +describe('GlobalNoticeComponent', () => { + let component: GlobalNoticeComponent; + let fixture: ComponentFixture<GlobalNoticeComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GlobalNoticeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GlobalNoticeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts new file mode 100644 index 00000000..35520683 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts @@ -0,0 +1,48 @@ +/** + * 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 { Notice } from '../../model/notice'; +import { NoticeType } from '../../model/notice-type.enum'; +import { NoticeService } from '../../services/notice.service'; + +@Component({ + selector: 'wfm-notice', + templateUrl: './global-notice.component.html', + styleUrls: ['./global-notice.component.css'] +}) +export class GlobalNoticeComponent implements OnInit { + public notices: Notice[] = []; + public noticeType = NoticeType; + + constructor(private noticeService: NoticeService) { } + + ngOnInit() { + // const t = new Notice(NoticeType.success, 'success'); + // const t1 = new Notice(NoticeType.info, 'info'); + // const t2 = new Notice(NoticeType.warning, 'warning'); + // const t3 = new Notice(NoticeType.danger, 'danger'); + // this.notices.push(t); + // this.notices.push(t1); + // this.notices.push(t2); + // this.notices.push(t3); + this.noticeService.showNotice$.subscribe(notice => { + this.notices.push(notice); + }); + } + + public onClosed(index: number): void { + this.notices.splice(index, 1); + } + +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css new file mode 100644 index 00000000..ac50221e --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css @@ -0,0 +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 + */ + +.wf-name{ + float: left; + font-size: 20px; + font-weight: bold; +} + +.btn-right{ + float: right; + margin-right: 5px; +} + +button i{ + padding-right: 3px; +}
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html new file mode 100644 index 00000000..9537bfd7 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html @@ -0,0 +1,54 @@ +<!-- +/** + * 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> + <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> + +<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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.spec.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.spec.ts new file mode 100644 index 00000000..6ac02fde --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.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 { MenusComponent } from './menus.component'; + +describe('MenusComponent', () => { + let component: MenusComponent; + let fixture: ComponentFixture<MenusComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MenusComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MenusComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts new file mode 100644 index 00000000..1c064f2c --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts @@ -0,0 +1,78 @@ +/** + * 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, ViewChild } from '@angular/core'; + +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'] +}) +export class MenusComponent implements OnInit { + @ViewChild(RestConfigComponent) public restConfigComponent: RestConfigComponent; + + public name = ''; + public canSave = true; + public hasRight = false; + + constructor(private activatedRoute: ActivatedRoute, private modelService: ModelService, + private broadcastService: BroadcastService, private authService: AuthService, + private plxModal: PlxModal) { } + + 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 save(): void { + this.modelService.save(); + } + + public back(): void { + history.back(); + } + + public checkBack(component: any): void { + if (this.modelService.isModify()) { + this.plxModal.open(component, { size: 'sm' }); + } else { + this.back(); + } + } + + public saveBack(): void { + this.modelService.save(this.back); + } + + public showRestConfigModal(): void { + this.restConfigComponent.show(); + } + +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html new file mode 100644 index 00000000..9550ed33 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html @@ -0,0 +1,48 @@ +<!-- +/** + * 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"> + <label class="col-md-2 form-control-label text-md-right">BaseUrl</label> + <div class="col-md-10"> + <input class="form-control" [(ngModel)]="restConfig.baseUrl"> + </div> +</div> +<div class="form-group row"> + <label class="col-md-2 form-control-label text-md-right">Definition</label> + <div class="col-md-10"> + <input class="form-control" [(ngModel)]="restConfig.definition"> + </div> +</div> +<div class="form-group row"> + <label class="col-md-2 form-control-label text-md-right">Dynamic</label> + <div class="col-md-10"> + <p-radioButton name="dynamic" [value]=true label="true" (ngModelChange)="toggleDynamic($event)" + [ngModel]="restConfig.dynamic"></p-radioButton> + <p-radioButton name="dynamic" [value]=false label="false" (ngModelChange)="toggleDynamic($event)" + [ngModel]="restConfig.dynamic"></p-radioButton> + </div> +</div> +<div class="form-group row"> + <label class="col-md-2 form-control-label text-md-right">Detail</label> + <div class="col-md-10"> + <textarea class="form-control" [disabled]="restConfig.dynamic" rows="8" [ngModel]="detail" + (ngModelChange)="onDetailChanged($event)"></textarea> + </div> +</div> --> + diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts new file mode 100644 index 00000000..e4d43d8c --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts @@ -0,0 +1,83 @@ +/** + * 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, OnChanges } from '@angular/core'; +import { ModalDirective } from 'ngx-bootstrap/modal'; + +import { Swagger } from '../../../../model/swagger'; +import { RestConfig } from '../../../../model/rest-config'; +import { RestService } from '../../../../services/rest.service'; + +/** + * toolbar component contains some basic operations(save) and all of the supported workflow nodes. + * The supported nodes can be dragged to container component. which will add a new node to the workflow. + */ +@Component({ + selector: 'wfm-rest-config-detail', + templateUrl: 'rest-config-detail.component.html', +}) +export class RestConfigDetailComponent implements OnChanges { + @Input() restConfig: RestConfig; + + public detail: string; + + constructor(private restService: RestService) { + } + + public ngOnChanges() { + if (this.restConfig == null) { + this.restConfig = new RestConfig('', '', '', ''); + } + this.parseSwagger2String(); + } + + private parseSwagger2String() { + if (this.restConfig.swagger) { + this.detail = JSON.stringify(this.restConfig.swagger); + } else { + this.detail = ''; + } + } + + public onDetailChanged(detail: string) { + this.detail = detail; + + let swagger: Swagger = null; + try { + swagger = new Swagger(JSON.parse(detail)); + console.log(swagger); + } catch (e) { + console.log('detail transfer error'); + console.error(e); + } + this.restConfig.swagger = swagger; + } + + public toggleDynamic(dynamic: boolean) { + // this.restConfig.dynamic = dynamic; + + // if (this.restConfig.dynamic && this.restConfig.definition) { + // this.restService.getDynamicSwaggerInfo(this.restConfig.definition) + // .subscribe(response => { + // try { + // this.restConfig.swagger = new Swagger(response); + // this.parseSwagger2String(); + // } catch (e) { + // console.log('detail transfer error'); + // console.error(e); + // } + + // }); + // } + } + +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.css new file mode 100644 index 00000000..f403890e --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.css @@ -0,0 +1,15 @@ +/** + * 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 + */ + + .swagger-list{ + overflow: auto; + }
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html new file mode 100644 index 00000000..f8d745c1 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html @@ -0,0 +1,32 @@ +<!-- +/** + * 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"> + <span>Config List</span> + <span class="badge badge-success badge-pill" (click)="addRestConfig()"><i class="fa fa-plus"></i></span> + </div> + + <ul class="list-group"> + <!-- <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> --> + </ul> + </div> +</div> + diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts new file mode 100644 index 00000000..8a84c476 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts @@ -0,0 +1,57 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ModalDirective } from 'ngx-bootstrap/modal'; + +import { Swagger } from '../../../../model/swagger'; +import { RestConfig } from '../../../../model/rest-config'; +import { RestService } from '../../../../services/rest.service'; + +/** + * toolbar component contains some basic operations(save) and all of the supported workflow nodes. + * The supported nodes can be dragged to container component. which will add a new node to the workflow. + */ +@Component({ + selector: 'wfm-rest-config-list', + templateUrl: 'rest-config-list.component.html', +}) +export class RestConfigListComponent { + @Output() configSelected = new EventEmitter<RestConfig>(); + + constructor(public restService: RestService) { + } + + public onConfigSelected(restConfig: RestConfig) { + this.configSelected.emit(restConfig); + } + + public addRestConfig() { + // const restConfig = this.restService.addRestConfig(); + + // this.onConfigSelected(restConfig); + } + + public deleteRestConfig(index: number) { + // this.restService.getRestConfigs().splice(index, 1); + + // let restConfig; + // if (this.restService.getRestConfigs().length > 0) { + // if (this.restService.getRestConfigs()[index]) { + // restConfig = this.restService.getRestConfigs()[index]; + // } else { + // restConfig = this.restService.getRestConfigs()[index - 1]; + // } + // } + // this.onConfigSelected(restConfig); + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html new file mode 100644 index 00000000..a858b0fe --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.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="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"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title pull-left">Rest Config Setting</h4> + <button type="button" class="close pull-right" aria-label="Close" (click)="restConfigModal.hide()"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div class="row"> + <div class="col-sm-4"> + <wfm-rest-config-list (configSelected)="configSelected($event)"></wfm-rest-config-list> + </div> + <div class="col-sm-8"> + <wfm-rest-config-detail [restConfig]="currentRestConfig"></wfm-rest-config-detail> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn over-grey" (click)="restConfigModal.hide()">close</button> + </div> + </div> + </div> +</div> diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts new file mode 100644 index 00000000..46ac3f90 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts @@ -0,0 +1,43 @@ +/** + * 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 { RestService } from '../../../services/rest.service'; +import { RestConfigListComponent } from './rest-config-list/rest-config-list.component'; + +/** + * toolbar component contains some basic operations(save) and all of the supported workflow nodes. + * The supported nodes can be dragged to container component. which will add a new node to the workflow. + */ +@Component({ + selector: 'wfm-rest-config', + templateUrl: 'rest-config.component.html', +}) +export class RestConfigComponent { + @ViewChild('restConfigModal') public restConfigModal: ModalDirective; + + public currentRestConfig: any = {}; + + constructor() { + } + + public configSelected(restConfig: any) { + this.currentRestConfig = restConfig; + } + + public show() { + this.restConfigModal.show(); + } + +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css new file mode 100644 index 00000000..f1fead94 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css @@ -0,0 +1,229 @@ +/** + * 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 + */ + +.node { + cursor: pointer; + display: inline-block; + position: absolute; + z-index: 2; +} + +.node-icon{ + position: relative; + border-radius: 4px; +} + +.node-icon svg{ + display: block; + fill: #00ABFF; +} + +.active { + outline: 1px solid #00ABFF; +} + +/** + * Anchors + */ +.anchors { + position: absolute; + border-radius: 1em; + display: none; + background-color: #2e6f9a; + width: 12px; + height: 12px; + cursor: pointer; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -webkit-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; +} + +.node-icon:hover > .anchors { + display: inline-block; +} + +.anchor-left { + left: -6px; + top: calc(50% - 6px); +} + +.anchor-right { + right: -6px; + top: calc(50% - 6px); +} + +.anchor-top { + top: -6px; + left: calc(50% - 6px); +} + +.anchor-bottom { + bottom: -6px; + left: calc(50% - 6px); +} + +/*right arrow*/ +.right { + width: 10px; + height: 10px; + position: absolute; + left: 4px; + top: 1px; + +} + +.right-arrow1, .right-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + border-top: 5px transparent dashed; + border-right: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-left: 5px #2e6f9a solid; + overflow: hidden; +} + +.right-arrow1 { + + border-left: 5px white solid; +} + +.right-arrow2 { + left: -2px; +} + +/*left arrow */ +.left { + width: 10px; + height: 10px; + position: absolute; + left: -2px; + top: 1px; + z-index: 2; +} + +.left-arrow1, .left-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; /*ie8-*/ + border-top: 5px transparent dashed; + border-left: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-right: 5px #2e6f9a solid; + overflow: hidden; +} + +.left-arrow1 { + border-right: 5px #fff solid; +} + +.left-arrow2 { + left: 2px; +} + +/*top arrow*/ +.top { + width: 10px; + height: 10px; + position: absolute; + left: 1px; + z-index: 2; +} + +.top-arrow1, .top-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px #2e6f9a solid; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px transparent dashed; + overflow: hidden; +} + +.top-arrow1 { + z-index: 6; +} + +.top-arrow2 { + top: -2px; + border-bottom: 5px white solid; +} + +/*bottom arrow*/ +.bottom { + width: 10px; + height: 10px; + position: absolute; + left: 1px; + top: 4px; + z-index: 2; +} + +.bottom-arrow1, .bottom-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px transparent dashed; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px #2e6f9a solid; + overflow: hidden; +} + +.bottom-arrow1 { + top: -2px; + z-index: 6; +} + +.bottom-arrow2 { + border-top: 5px white solid; +} +/** + * Anchors End + */ + +.node .name { + width: 55px; + height: 12px; + text-align: center; + white-space: nowrap; + color: #5c6d90; + line-height: 12px; + cursor: pointer; + font-family: Arial; + font-size: 12px; +} + +.resizeable { + background-color: darkolivegreen; + border:1px solid blue; + margin: 10px; +} + diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.html new file mode 100644 index 00000000..f0ade497 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.html @@ -0,0 +1,164 @@ +<!-- +/** + * 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 #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 *ngIf="!isGatewayNodeType(node.type)" class="name"> + {{node.name}} + </div> + + <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> + <i class="left-arrow2"></i> + </span> + </div> + <div class="anchor anchors anchor-right"> + <span class="right"> + <i class="right-arrow1"></i> + <i class="right-arrow2"></i> + </span> + </div> + </div> + + <div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active"> + <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"/> + </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"/> + </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"/> + <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 + c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z" + /> + </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"/> + <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"/> + </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"/> + <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> + <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"/> + <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> + <g *ngSwitchCase="nodeType[nodeType.exclusiveGateway]"> + <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 + l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z" + /> + <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"/> + </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"/> + <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"/> + </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"/> + <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"/> + </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 + c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4 + 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"/> + </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 + 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> + </g> + </svg> + <div class="anchor anchors anchor-left"> + <span class="left"> + <i class="left-arrow1"></i> + <i class="left-arrow2"></i> + </span> + </div> + <div class="anchor anchors anchor-right"> + <span class="right"> + <i class="right-arrow1"></i> + <i class="right-arrow2"></i> + </span> + </div> + </div> +</div>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.ts new file mode 100644 index 00000000..5482758e --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.ts @@ -0,0 +1,124 @@ +/** + * 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, 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: 'wfm-node', + styleUrls: ['./node.component.css'], + templateUrl: 'node.component.html', +}) +export class NodeComponent implements AfterViewInit, OnDestroy { + @Input() public node: WorkflowNode; + @Input() public rank: number; + @ViewChild('nodeItem') nodeItem: ElementRef; + + public nodeType = NodeType; + public active = false; + private currentWorkflowSubscription: Subscription; + private isMoving = false; + + constructor(private jsPlumbService: JsPlumbService, + private broadcastService: BroadcastService) { + } + + public ngAfterViewInit() { + this.jsPlumbService.initJsPlumbInstance(this.node.parentId); + this.jsPlumbService.initNode(this.node); + + if (this.canHaveChildren()) { + this.jsPlumbService.nodeDroppable(this.node, this.rank); + this.jsPlumbService.connectChildrenNodes(this.node.id); + } + + this.currentWorkflowSubscription = this.broadcastService.selectedElement$.subscribe(activeNodes => { + let active = false; + for (let index = 0; index < activeNodes.length; index++) { + let activeNode = activeNodes[index] as WorkflowNode; + if (activeNode.id === this.node.id) { + active = true; + break; + } + } + this.active = active; + }); + } + + public ngOnDestroy() { + this.currentWorkflowSubscription.unsubscribe(); + if (this.nodeItem.nativeElement.onmousemove) { + this.nodeItem.nativeElement.onmousemove = null; + } + } + + public onMousedown() { + let currentThis = this; + this.nodeItem.nativeElement.onmousemove = function () { + currentThis.isMoving = true; + }; + } + + public onClick(event) { + if (this.nodeItem.nativeElement.onmousemove) { + this.nodeItem.nativeElement.onmousemove = null; + } + if (this.isMoving && this.active) { + this.isMoving = false; + return; + } + event.stopPropagation(); + this.broadcastService.broadcast(this.broadcastService.showProperty, null); + this.broadcastService.broadcast(this.broadcastService.selectedElement, [this.node]); + } + + public canHaveChildren(): boolean { + return this.node.type === 'subProcess'; + } + + public onMouseOut(event, target) { + event.stopPropagation(); + target.classList.remove('hover'); + } + + public onMouseOver(event, target) { + event.stopPropagation(); + 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css new file mode 100644 index 00000000..4002997c --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css @@ -0,0 +1,50 @@ +/** + * 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 + */ + +.parameter{ + margin-bottom: 1rem; +} + +.parameter-section{ + display: inline; + margin-right: 5px; +} + +.parameter-item{ + display: inline; +} + +.parameter-required{ + color: red; +} + +.parameter-label{ + width: 100px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: bottom; + /* display: inline-table; */ +} + +.parameter-value{ + width: 160px; + vertical-align: baseline; +} + +.plx-input{ + vertical-align: baseline; +} + +.plx-btn{ + vertical-align: baseline; +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html new file mode 100644 index 00000000..1b91b426 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html @@ -0,0 +1,61 @@ +<!-- +/** + * 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="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 *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="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="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="currentCanDelete" class="parameter-section"> + <button type="button" class="plx-btn plx-btn-error" (click)="deleteParam()"> + <i class="fa fa-minus"></i> + </button> + </div> +</div>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts new file mode 100644 index 00000000..c208c1de --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts @@ -0,0 +1,195 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import {Component, EventEmitter, Input, OnChanges, 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: 'wfm-parameter', + styleUrls: ['./parameter.component.css'], + templateUrl: 'parameter.component.html', +}) +export class ParameterComponent implements OnInit { + @Input() public param: Parameter; + @Input() public valueSource: ValueSource[] = []; + @Input() public showLabel: boolean; + @Input() public showValue: boolean; + @Input() public canEditName: boolean; + @Input() public canEditValue: boolean; + @Input() public canInsert: boolean; + @Input() public canDelete: boolean; + @Input() public planItems: PlanTreeviewItem[]; + @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 showValueValue = true; + public showValueSource = true; + public planValue: any = {}; + + constructor(private toscaService: ToscaService) { + } + + public ngOnInit(): void { + 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.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}; + } + } + + 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.param.value = ''; + } + } else { + this.param.value = this.formatValue(value); + } + this.paramChange.emit(this.param); + } + + public valueSourceChange(valueSource: string) { + this.param.valueSource = valueSource; + this.setValueSource(valueSource); + this.valueChange(''); + } + + public insertParam(): void { + this.insert.emit(); + } + + public deleteParam(): void { + this.delete.emit(); + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html new file mode 100644 index 00000000..2384192e --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html @@ -0,0 +1,15 @@ +<!-- +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ +--> + +<wfm-parameter [param]="node.parameter" [valueSource]="sources"></wfm-parameter>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts new file mode 100644 index 00000000..ed11ba2d --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts @@ -0,0 +1,25 @@ +/******************************************************************************* + * 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 } from '@angular/core'; + +import { ValueSource } from '../../../model/value-source.enum'; +import { Parameter } from '../../../model/workflow/parameter'; +import { ErrorEvent } from '../../../model/workflow/error-event'; + +@Component({ + selector: 'wfm-error-event', + templateUrl: 'error-event.component.html', +}) +export class ErrorEventComponent { + @Input() public node: ErrorEvent; + public sources: ValueSource[] = [ValueSource.string]; +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html new file mode 100644 index 00000000..1c1e766b --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html @@ -0,0 +1,92 @@ +<!-- +/******************************************************************************* + * 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 + *******************************************************************************/ +--> +<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 *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 *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> +</form>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts new file mode 100644 index 00000000..d5f201f6 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts @@ -0,0 +1,155 @@ +/******************************************************************************* + * 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, 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: 'wfm-intermediate-catch-event', + templateUrl: 'intermediate-catch-event.component.html', +}) +export class IntermediateCatchEventComponent implements OnChanges, OnDestroy { + @Input() public node: IntermediateCatchEvent; + + 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html new file mode 100644 index 00000000..a7cef5a3 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html @@ -0,0 +1,49 @@ +<!-- +/** + * 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 text-md-right">{{'WORKFLOW.TOSCA_NODE' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" [ngModel]="node.template.id" + (ngModelChange)="node.template.id=$event; nodeTemplateChanged();"> + <option *ngFor="let template of nodeTemplates" value="{{template.id}}">{{template.name}}</option> + </select> + </div> +</div> + +<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_INTERFACE' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" [ngModel]="node.nodeInterface" + (ngModelChange)="nodeInterfaceChanged($event);"> + <option *ngFor="let interface of nodeInterfaces" value="{{interface}}">{{interface}}</option> + </select> + </div> +</div> + +<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_OPERATION' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" [ngModel]="node.operation" + (ngModelChange)="nodeOperationChanged($event)"> + <option *ngFor="let operation of nodeOperations" value="{{operation}}">{{operation}}</option> + </select> + </div> +</div> +<hr> + +<wfm-parameter *ngFor="let input of node.input" [param]="input" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> +<hr *ngIf="0 < node.input.length"> +<wfm-parameter *ngFor="let output of node.output" [param]="output" [valueSource]= "outputSources" [planItems]="planItems"></wfm-parameter> + diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts new file mode 100644 index 00000000..7fa9675f --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts @@ -0,0 +1,131 @@ +/** + * 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, Input } from '@angular/core'; +import { Subscription } from '../../../../../node_modules/rxjs/Subscription.d'; + +import { PlanTreeviewItem } from '../../../model/plan-treeview-item'; +import { NodeTemplate } from '../../../model/topology/node-template'; +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 { 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: '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 outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan]; + public nodeInterfaces: string[] = []; + public nodeOperations: any[] = []; + public nodeTemplates: NodeTemplate[] = []; + + constructor(private toscaService: ToscaService) { + } + + public ngAfterViewInit() { + this.nodeTemplates = this.toscaService.getNodeTemplate(); + + this.loadInterfaces(); + this.loadOperations(); + } + + public nodeTemplateChanged() { + this.setTemplateNamespace(); + + this.nodeInterfaceChanged(''); + + this.loadInterfaces(); + } + + public nodeInterfaceChanged(newInterface: string) { + this.node.nodeInterface = newInterface; + + this.nodeOperationChanged(''); + + this.loadOperations(); + } + + public nodeOperationChanged(operation: string) { + this.node.operation = operation; + + this.node.input = []; + this.node.output = []; + + this.loadParameters(); + } + + private setTemplateNamespace() { + const nodeTemplate = this.nodeTemplates.find( + tmpNodeTemplate => tmpNodeTemplate.id === this.node.template.id); + + if (nodeTemplate) { + this.node.template.namespace = nodeTemplate.namespace; + this.node.template.type = nodeTemplate.type; + } + } + + private loadInterfaces() { + if (this.node.template.id) { + this.toscaService.loadNodeTemplateInterfaces(this.node.template) + .subscribe(interfaces => { + this.nodeInterfaces = interfaces; + }); + } else { + this.nodeInterfaces = []; + } + } + + private loadOperations() { + if (this.node.nodeInterface) { + this.nodeOperations = []; + this.toscaService.loadNodeTemplateOperations( + this.node.template, + this.node.nodeInterface) + .subscribe(operations => this.nodeOperations = operations); + } else { + this.nodeOperations = []; + } + } + + private loadParameters() { + if (this.node.operation) { + this.toscaService.loadNodeTemplateOperationParameter( + this.node.template, + this.node.nodeInterface, + this.node.operation) + .subscribe(params => { + this.node.input = []; + this.node.output = []; + + params.input.forEach(param => { + const p = new Parameter(param, '', ValueSource[ValueSource.string]); + this.node.input.push(p); + }); + + params.output.forEach(param => { + const p = new Parameter(param, '', ValueSource[ValueSource.Definition]); + this.node.output.push(p); + }); + }); + } + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.css new file mode 100644 index 00000000..5189f551 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.css @@ -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 + */ + +.wm-properties-wrapper { + background-color: white; + position: fixed; + width: 500px; + height: 100%; + border-left: 1px solid #00aaff; + z-index: 2000; + right: 0; + top: 0; + bottom: 0; + padding-left: 20px; + margin-bottom: 0; + padding-right: 20px; + padding-top: 40px; + -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + border-radius: 0; + overflow: auto; +} + +.plx-btn{ + float: right; + margin-right: 0; +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.html new file mode 100644 index 00000000..a6d25e92 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.html @@ -0,0 +1,45 @@ +<!-- +/** + * 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="wm-properties-wrapper" *ngIf="show"> + <div class="form-group row"> + <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> + <!-- <hr> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right" for="nodeType">{{'WORKFLOW.NODE_TYPE' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" id="nodeType" [(ngModel)]="node.type"> + <option *ngFor="let t of nodeTypes" value="{{t}}">{{t}}</option> + </select> + </div> + </div> --> + + <hr> + <div [ngSwitch]="node.type"> + <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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts new file mode 100644 index 00000000..1b381c5d --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts @@ -0,0 +1,79 @@ +/** + * 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 {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. + * the presented information can be edit in this component. + * it may load information dynamically. the content may be different for different node type. + */ +@Component({ + selector: 'wfm-properties', + styleUrls: ['./properties.component.css'], + templateUrl: 'properties.component.html', +}) +export class PropertiesComponent implements OnInit { + public node: WorkflowNode; + public planTreeviewItems: PlanTreeviewItem[]; + public nodeType = NodeType; + // public nodeTypes: string[] = WorkflowNodeType; + public show = false; + public titleEditing = false; + public valueSource = [ValueSource.string]; + + constructor(private broadcastService: BroadcastService, + private modelService: ModelService, + private translate: TranslateService, + private noticeService: NoticeService, + private jsPlumbService: JsPlumbService) { + + } + + public ngOnInit() { + this.broadcastService.showProperty$.subscribe(element => { + if (element && this.modelService.isNode(element)) { + this.node = element as WorkflowNode; + // temporarily, if config info not exists then close the property panel + // 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; + } catch (error) { + this.show = false; + this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => { + this.noticeService.error(res); + }); + } + } else { + this.show = false; + } + }); + } + + public deleteNode() { + this.show = false; + const parentId = this.jsPlumbService.getParentNodeId(this.node.id); + this.jsPlumbService.remove(this.node); + this.modelService.deleteNode(parentId, this.node.id); + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.css diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html new file mode 100644 index 00000000..9d17374b --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.html @@ -0,0 +1,23 @@ +<!-- +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ +--> +<wfm-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> +<hr *ngIf="pathParams.length > 0"> +<wfm-parameter *ngFor="let param of queryParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> +<hr *ngIf="queryParams.length > 0"> +<wfm-parameter *ngFor="let param of headerParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></wfm-parameter> + +<wfm-parameter-tree [restConfigId]="restConfigId" [parameters]="inputParams" [valueSource]="inputSources" + [planItems]="planItems"></wfm-parameter-tree> +<wfm-parameter-tree [restConfigId]="restConfigId" [parameters]="outputParams" [valueSource]="outputSources" [showValue]="false" + [planItems]="planItems"></wfm-parameter-tree> diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts new file mode 100644 index 00000000..692661a7 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.ts @@ -0,0 +1,109 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { TreeNode } from 'primeng/primeng'; + +import { PlanTreeviewItem } from '../../../../model/plan-treeview-item'; +import { Swagger, SwaggerResponseClass } from '../../../../model/swagger'; +import { ValueSource } from '../../../../model/value-source.enum'; +import { RestParameter } from '../../../../model/workflow/rest-parameter'; +import { BroadcastService } from '../../../../services/broadcast.service'; +import { SwaggerTreeConverterService } from '../../../../services/swagger-tree-converter.service'; +import { RestService } from "../../../../services/rest.service"; +import { SwaggerIn } from '../../../../model/workflow/swagger/swagger-in.enum'; + +/** + * property component presents information of a workflow node. + * the presented information can be edit in this component. + * it may load information dynamically. the content may be different for different node type. + */ +@Component({ + selector: 'wfm-node-parameters', + styleUrls: ['./node-parameters.component.css'], + templateUrl: 'node-parameters.component.html', +}) +export class NodeParametersComponent implements OnChanges { + @Input() public swaggerInput: RestParameter[]; + @Input() public swaggerOutput: SwaggerResponseClass[]; + @Input() public restConfigId: string; + @Input() public planItems: PlanTreeviewItem[]; + + public inputSources: ValueSource[] = [ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; + public outputSources: ValueSource[] = []; + public valueSource = ValueSource; + public headerParams: RestParameter[] = []; + public pathParams: RestParameter[] = []; + public queryParams: RestParameter[] = []; + public inputParams: TreeNode[] = []; + public outputParams: TreeNode[] = []; + + private index = 1; + + constructor(private broadcastService: BroadcastService, + private restService: RestService, + private swaggerTreeConverterService: SwaggerTreeConverterService) { + } + + public ngOnChanges(changes: SimpleChanges): void { + if (changes.swaggerInput && changes.swaggerInput.currentValue) { + this.resetRequestParams(changes.swaggerInput.currentValue); + } + if (changes.swaggerOutput && changes.swaggerOutput.currentValue) { + this.resetResponseParams(changes.swaggerOutput.currentValue); + } + } + + public resetRequestParams(parameters: RestParameter[]) { + this.pathParams = []; + this.queryParams = []; + this.inputParams = []; + this.headerParams = []; + + parameters.forEach(param => { + if (SwaggerIn[SwaggerIn.path] === param.position) { + this.pathParams.push(param); + } else if (SwaggerIn[SwaggerIn.query] === param.position) { + this.queryParams.push(param); + } else if (SwaggerIn[SwaggerIn.header] === param.position) { + this.headerParams.push(param); + } else if (SwaggerIn[SwaggerIn.body] === param.position) { + let valueObject = undefined; + if (undefined !== param.value || undefined !== param.valueSource) { + valueObject = { value: param.value, valueSource: param.valueSource }; + } + const requestTreeNode = this.swaggerTreeConverterService.schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), + 'Request Param', param.schema, valueObject); + // console.log('requestTreeNode is :'); + // console.log(requestTreeNode.value); + param.value = requestTreeNode.value.value; + param.valueSource = requestTreeNode.value.valueSource; + this.inputParams.push(requestTreeNode); + } else { + // TODO others param types not supported + console.log('Unsupport parameter position(in):' + param.position); + } + }); + } + + public resetResponseParams(responses: SwaggerResponseClass[]) { + this.outputParams = []; + if (0 < responses.length && responses[0].schema) { + const treeNode = this.swaggerTreeConverterService.schema2TreeNode( + this.restService.getSwaggerInfo(this.restConfigId), + 'Response Params', + responses[0].schema, + { value: {}, valueSource: ValueSource[ValueSource.Definition] }); + this.outputParams.push(treeNode); + } + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.css diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.html b/deprecated-workflow-designer/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/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts new file mode 100644 index 00000000..93c3b72e --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/parameter-tree/parameter-tree.component.ts @@ -0,0 +1,176 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { ChangeDetectionStrategy, Component, Input, OnInit, Output } from '@angular/core'; +import { TreeNode } from 'primeng/primeng'; + +import { PlanTreeviewItem } from '../../../../../model/plan-treeview-item'; +import { ValueSource } from '../../../../../model/value-source.enum'; +import { Parameter } from '../../../../../model/workflow/parameter'; +import { SwaggerTreeConverterService } from '../../../../../services/swagger-tree-converter.service'; +import { WorkflowUtil } from '../../../../../util/workflow-util'; +import { Swagger } from "../../../../../model/swagger"; +import { RestService } from "../../../../../services/rest.service"; + +/** + * parameter tree presents parameter of task node's input or output parameters. + */ +@Component({ + selector: 'wfm-parameter-tree', + styleUrls: ['./parameter-tree.component.css'], + templateUrl: 'parameter-tree.component.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ParameterTreeComponent implements OnInit { + @Input() public parameters: TreeNode[]; + @Input() public showValue: boolean; + @Input() public canInsert: boolean; + @Input() public restConfigId: string; + @Input() public valueSource: ValueSource[]; + @Input() public planItems: PlanTreeviewItem[]; + + constructor(private restService: RestService, private swaggerTreeConverterService: SwaggerTreeConverterService) { } + + public ngOnInit() { + if (undefined === this.showValue) { + this.showValue = true; + } + } + + public getParameter(node: any): Parameter { + // console.log('Parameter init:' + node.label +'.'+ node.type+'.'+JSON.stringify(node.value.value)+'.'+node.value.valueSource); + + return new Parameter(node.label, node.value.value, node.value.valueSource, node.definition.type, node.definition.reqquired); + } + + + public paramChange(param: Parameter, node: any) { + // console.log('Parameter change:' + param.name + ', Node label is:' + node.label); + + node.value.valueSource = param.valueSource; + node.value.value = param.value; + + this.objectParameterChange(node); + + if (node.label !== param.name) { + delete node.parent.value.value[node.label]; + node.label = param.name; + } + if (node.parent) { + node.parent.value.value[node.label] = node.value; + } else { + // this parameter is 'request param' or 'response param' + } + + } + + private objectParameterChange(node: any) { + if (node.value.valueSource === ValueSource[ValueSource.Definition]) { // value will be set by node defintion + const treeNode = this.swaggerTreeConverterService.schema2TreeNode(this.getSwagger(), node.label, node.definition, node.value); + node.value = treeNode.value; + node.children = treeNode.children; + } else { // parameter value will be set by param + node.children = []; + } + } + + private getSwagger(): Swagger { + return this.restService.getSwaggerInfo(this.restConfigId); + } + + public addChildNode4DynamicObject(node: any) { + const copyItem = WorkflowUtil.deepClone(node.definition.additionalProperties); + const key = Object.keys(node.value.value).length; + + const childrenNode = this.swaggerTreeConverterService + .schema2TreeNode(this.getSwagger(), key, copyItem); + + childrenNode.keyEditable = true; + node.value.value[key] = childrenNode.value; + + node.children.push(childrenNode); + } + + public addChildNode4ObjectArray(node: any) { + const copyItem = WorkflowUtil.deepClone(node.definition.items); + + const childrenNode = this.swaggerTreeConverterService + .schema2TreeNode( + this.getSwagger(), + node.children.length, + copyItem); + + node.value.value.push(childrenNode.value); + node.children.push(childrenNode); + } + + public deleteTreeNode(node: any) { + if ('array' === node.parent.type) { + // delete data + node.parent.value.value.splice(node.label, 1); + node.parent.children.splice(node.label, 1); + + // update node index + node.parent.children.forEach((childNode, index) => childNode.label = index); + } else if ('map' === node.parent.type) { + delete node.parent.value.value[node.label]; + for (let index = 0; index < node.parent.children.length; index++) { + const element = node.parent.children[index]; + if (element.label === node.label) { + node.parent.children.splice(index, 1); + break; + } + } + } + } + + public getCanInsert(node: any) { + if (undefined === this.canInsert) { + if (node.value.valueSource !== ValueSource[ValueSource.Definition]) { + return false; + } else { + return this.isArrayObject(node) || this.isDynamicObject(node); + } + } else { + return this.canInsert + } + } + + public getCanDelete(node: any) { + const parent = node.parent; + if (parent && + (this.isArrayObject(parent) || this.isDynamicObject(parent))) { + return true; + } else { + return false; + } + } + + public getObjectValueSource(): ValueSource[] { + const result = []; + this.valueSource.forEach(source => { + if (ValueSource.string != source) { + result.push(source); + } + }); + result.push(ValueSource.Definition); + return result; + } + + private isArrayObject(node: any): boolean { + return node.type === 'array'; + } + + private isDynamicObject(node: any): boolean { + return node.type === 'map'; + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css new file mode 100644 index 00000000..a2dc6ff6 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css @@ -0,0 +1,11 @@ +/******************************************************************************* + * 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 + *******************************************************************************/
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.html b/deprecated-workflow-designer/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/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.spec.ts b/deprecated-workflow-designer/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/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.ts b/deprecated-workflow-designer/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/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html new file mode 100644 index 00000000..d3f41921 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html @@ -0,0 +1,54 @@ +<!-- +/******************************************************************************* + * 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 text-md-right">{{'WORKFLOW.REST_SERVICE' | translate}}</label> + <div class="col-md-9"> + <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 *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 *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 *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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts new file mode 100644 index 00000000..3def276f --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts @@ -0,0 +1,273 @@ +/******************************************************************************* + * 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 { Subscription } from 'rxjs/Subscription'; +import { TranslateService } from '@ngx-translate/core'; + +import { PlanTreeviewItem } from '../../../model/plan-treeview-item'; +import { ValueSource } from '../../../model/value-source.enum'; +import { ValueType } from '../../../model/value-type.enum'; +import { RestParameter } from '../../../model/workflow/rest-parameter'; +import { RestTask } from '../../../model/workflow/rest-task'; +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: '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 = []; + public restOperations = []; + public loadSwaggerByMSB = true; + // public dataTypeInput: SwaggerBaseParameter[] = []; + public dataTypeOutput: SwaggerResponse[] = []; + public definitions: SwaggerSchema; + private swagger: Swagger; + + constructor(private nodeTypeService: NodeTypeService, private broadcastService: BroadcastService, public restService: RestService, + private noticeService: NoticeService, private translate: TranslateService) { } + + public ngOnInit() { + 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) { + this.node.restConfigId = configId; + this.pathChanged(''); + this.loadInterfaces(); + } + + public pathChanged(path: string) { + this.node.path = path; + this.node.consumes = []; + this.node.produces = []; + this.methodChanged(''); + this.loadOperations(); + } + + public methodChanged(method: string) { + this.node.method = method; + this.node.parameters = []; + this.node.responses = []; + this.updateMethodInfo(); + } + + private loadInterfaces(): void { + if (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)) { + this.restInterfaces.push(key); + } + this.loadOperations(); + } else { + this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => { + this.noticeService.error(res); + }); + } + } + } + + private loadOperations(): void { + if (this.node.path) { + const swaggerPath: any = this.swagger.paths[this.node.path]; + + this.restOperations = []; + for (const key of Object.keys(swaggerPath)) { + this.restOperations.push(key); + } + } + } + + private updateMethodInfo(): void { + if (this.node.method) { + const path: any = this.swagger.paths[this.node.path]; + const method: SwaggerMethod = path[this.node.method]; + + this.node.consumes = WorkflowUtil.deepClone(method.consumes); + this.node.produces = WorkflowUtil.deepClone(method.produces); + + let tempParameters: RestParameter[] = []; + method.parameters.forEach(param => { + 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; + + const responseParams = this.restService.getResponseParameters( + this.swagger, this.node.path, this.node.method); + 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html new file mode 100644 index 00000000..26183210 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html @@ -0,0 +1,30 @@ +<!-- +/******************************************************************************* + * 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 text-md-right">{{'WORKFLOW.SCRIPT_FORMAT' | translate}}</label> + <div class="col-md-9"> + <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> + +<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT' | translate}}</label> + <div class="col-md-9"> + <textarea class="form-control" type="text" rows="20" [(ngModel)]="node.script"></textarea> + </div> +</div>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts new file mode 100644 index 00000000..a0f5fd93 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts @@ -0,0 +1,51 @@ +/******************************************************************************* + * 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 { ScriptTask } from "../../../model/workflow/script-task"; +import { NodeTypeService } from '../../../services/node-type.service'; + +@Component({ + selector: 'wfm-script-task', + templateUrl: 'script-task.component.html', +}) +export class ScriptTaskComponent implements OnInit { + @Input() public node: ScriptTask; + + 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css new file mode 100644 index 00000000..670c050a --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css @@ -0,0 +1,11 @@ +/** + * 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 + */
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.html new file mode 100644 index 00000000..d72914fd --- /dev/null +++ b/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.spec.ts b/deprecated-workflow-designer/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/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.ts new file mode 100644 index 00000000..48a4074f --- /dev/null +++ b/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css new file mode 100644 index 00000000..ac88051d --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css @@ -0,0 +1,44 @@ +/** + * 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 + */ +table{ + border: 1px solid #eceeef; + width: 100%; +} + +.table-body{ + background-color: #fff; +} + +th{ + background-color: #f5f5f5; +} + +td input{ + width: 100%; +} + +td span{ + color: #ff5b55; +} + +.delete-icon{ + color: #ff5b55; + font-size: 16px; +} + +.delete-icon:hover{ + cursor: pointer; +} + +.plx-btn{ + margin-top: 10px; +}
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html new file mode 100644 index 00000000..f48a725b --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html @@ -0,0 +1,40 @@ +<!-- +/******************************************************************************* + * 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 + *******************************************************************************/ +--> +<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> + +<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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts new file mode 100644 index 00000000..0f721242 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts @@ -0,0 +1,68 @@ +/******************************************************************************* + * 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 { Subscription } from 'rxjs/Subscription'; + +import { ValueSource } from '../../../model/value-source.enum'; +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: 'wfm-start-event', + styleUrls: ['./start-event.component.css'], + templateUrl: 'start-event.component.html', +}) +export class StartEventComponent implements OnInit { + @Input() public node: StartEvent; + public sources: ValueSource[] = [ValueSource.string]; + + constructor(private translate: TranslateService) { } + + ngOnInit() { } + + public create(): void { + 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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.css new file mode 100644 index 00000000..a2d481d4 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.css @@ -0,0 +1,43 @@ +/** + * 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 + */ + +.wm-sequence-flow-wrapper { + background-color: white; + position: fixed; + width: 500px; + height: 100%; + border-left: 1px solid #00aaff; + z-index: 2000; + right: 0; + top: 0; + bottom: 0; + padding-left: 20px; + margin-bottom: 0; + padding-right: 20px; + padding-top: 40px; + -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + border-radius: 0; + overflow-y: scroll; +} + +.edit { + display: none; +} + +.editing .view { + display: none; +} + +.editing .edit { + display: block; +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html new file mode 100644 index 00000000..e9d4d22f --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html @@ -0,0 +1,52 @@ +<!-- +/** + * 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="wm-sequence-flow-wrapper" *ngIf="show"> + <div class="form-group row"> + <div class="col-md-10"></div> + <div class="col-md-2 float-right"> + <button (click)="delete()" type="button" class="btn btn-danger"> + <i class="fa fa-trash" style="margin-right: 5px;"></i> + </button> + </div> + </div> + + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_NAME' | translate}}</label> + <div class="col-md-9"> + <input class="form-control" type="text" [(ngModel)]="sequenceFlow.name" (ngModelChange)="nameChanged($event)"> + </div> + </div> + + <!-- <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"> + </div> + </div> + + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_TARGET' | translate}}</label> + <div class="col-md-9"> + <input class="form-control" disabled type="text" [(ngModel)]="sequenceFlow.targetRef"> + </div> + </div> --> + + <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"> + </div> + </div> +</div>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts new file mode 100644 index 00000000..55d051f2 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts @@ -0,0 +1,76 @@ +/** + * 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 } from '@angular/core'; +import { TreeNode } from 'primeng/primeng'; + +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. + * the presented information can be edit in this component. + * it may load information dynamically. the content may be different for different node type. + */ +@Component({ + selector: 'wfm-sequence-flow', + styleUrls: ['./sequence-flow.component.css'], + templateUrl: 'sequence-flow.component.html', +}) +export class SequenceFlowComponent implements AfterViewInit { + public sequenceFlow: SequenceFlow; + public show = false; + + constructor(private broadcastService: BroadcastService, + private modelService: ModelService, + private jsPlumbService: JsPlumbService) { + + } + + public ngAfterViewInit() { + this.broadcastService.showProperty$.subscribe(element => { + if (element && !this.modelService.isNode(element)) { + this.sequenceFlow = element as SequenceFlow; + this.show = true; + } else { + this.show = false; + } + }); + } + + 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); + } + + public delete() { + this.show = false; + this.modelService.deleteConnection(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef); + this.jsPlumbService.deleteConnect(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef); + } +} diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html new file mode 100644 index 00000000..25ef2258 --- /dev/null +++ b/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts new file mode 100644 index 00000000..feb94579 --- /dev/null +++ b/deprecated-workflow-designer/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/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css new file mode 100644 index 00000000..6b0d5436 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css @@ -0,0 +1,69 @@ +/** + * 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 + */ +.toolbar-head { + color: #404040; + font-size: 14px; +} + +.toolbar-head:hover { + cursor: pointer; +} + +.fold-icon { + width: 15px; + font-size: 8px; + color: #00abff; +} + +.item { + width: 50px; + height: 50px; + text-align: center; + float: left; + margin-left: 6px; + margin-bottom: 10px; +} + +.item:hover { + cursor: pointer; +} + +.item svg { + width: 24px; + height: 24px; + margin: 4px 13px; + display: block; + /* fill: #A9B2BA; */ + fill: #00ABFF; +} + +.item img { + width: 24px; + height: 24px; + margin: 4px 13px; + display: block; +} + +.item span { + font-size: 12px; + color: #595959; + display: block; +} + +.getway { + padding-top: 5px; +} + +.getway div { + width: 30px !important; + height: 30px !important; +}
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html new file mode 100644 index 00000000..b8e0ae7a --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html @@ -0,0 +1,135 @@ +<!-- +/** + * 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> + <accordion-group [isOpen]="true" #event> + <div accordion-heading class="toolbar-head"> + <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': event?.isOpen, 'fa-chevron-right': !event?.isOpen}"></i> + <i class="fa fa-th-list"></i> + <span>{{ 'WORKFLOW.BPMN_EVENT' | translate }}</span> + </div> + <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 + s15-6.7,15-15S23.3,0,15,0L15,0z" /> + </g> + </svg> + <span>{{ 'WORKFLOW.START_EVENT' | translate }}</span> + </div> + <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 + s15-6.7,15-15S23.3,0,15,0L15,0z" /> + </g> + </svg> + <span>{{ 'WORKFLOW.END_EVENT' | translate }}</span> + </div> + <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 + c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4 + 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" /> + </g> + </svg> + <span>{{ 'WORKFLOW.TIMER_EVENT' | translate }}</span> + </div> + <!-- + <div nodeType="errorStartEvent" 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,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" /> + <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 + c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z" + /> + </g> + </svg> + <span>{{ 'WORKFLOW.ERROR_START_EVENT' | translate }}</span> + </div> + <div nodeType="errorEndEvent" 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,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" /> + <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" /> + </g> + </svg> + <span>{{ 'WORKFLOW.ERROR_END_EVENT' | 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 [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 + l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z" + /> + <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" /> + </g> + </svg> + <span>{{ 'WORKFLOW.EXCLUSIVE_GATEWAY' | translate }}</span> + </div> + <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 + 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" /> + </g> + </svg> + <span>{{ 'WORKFLOW.PARALLEL_GATEWAY' | translate }}</span> + </div> + </accordion-group> + <!-- <accordion-group [isOpen]="true" #structural> + <div accordion-heading class="toolbar-head"> + <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': structural?.isOpen, 'fa-chevron-right': !structural?.isOpen}"></i> + <i class="fa fa-th-list"></i> + <span>{{ 'WORKFLOW.BPMN_STRUCTURAL' | translate }}</span> + </div> + <div nodeType="subProcess" 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.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"/> + <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"/> + </g> + </svg> + <span>{{ 'WORKFLOW.SUB_PROCESS' | translate }}</span> + </div> + </accordion-group> --> + <wfm-toolbar-node></wfm-toolbar-node> +</accordion> diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts new file mode 100644 index 00000000..bfc45094 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts @@ -0,0 +1,30 @@ +/** + * 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 { AfterViewChecked, Component, OnInit } from '@angular/core'; + +import { SettingService } from '../../services/setting.service'; +import { BroadcastService } from '../../services/broadcast.service'; +import { JsPlumbService } from '../../services/jsplumb.service'; + +/** + * toolbar component contains some basic operations(save) and all of the supported workflow nodes. + * The supported nodes can be dragged to container component. which will add a new node to the workflow. + */ +@Component({ + selector: 'wfm-toolbar', + templateUrl: 'toolbar.component.html', + styleUrls: ['./toolbar.component.css'] +}) +export class ToolbarComponent { + +} |