support set parameter for workflow

support set input and output params for start event

Issue-ID: SDC-120

Change-Id: Ib5a87692e06817b2676b3f2f2223e1ced117b5c9
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>

10 files changed, 253 insertions, 40 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
index e1a40297..ee002963 100644
--- a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
@@ -17,7 +17,7 @@ import { JsPlumbService } from '../../services/jsplumb.service';
 import { ActivatedRoute } from "@angular/router";
 import { DataAccessService } from "../../services/data-access/data-access.service";
 import { WorkflowService } from "../../services/workflow.service";
-import { Workflow } from "../../model/workflow";
+import { Workflow } from "../../model/workflow/workflow";
 
 /**
  * main canvas, it contains two parts: canvas and node property component
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
index 24e657ca..08b7322d 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
@@ -1,10 +1,31 @@
+/**

+ * 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 {

-     position:absolute;

-     width: 100px;

-     height: 50px;

-     border: 2px solid black;

- }

+    border: 1px solid transparent;

+    cursor: pointer;

+    display: inline-block;

+    position: absolute;

+    z-index: 2;

+}

 

+.node:hover {

+    border: 1px solid #123456;

+    box-shadow: 2px 2px 19px #444;

+    -o-box-shadow: 2px 2px 19px #444;

+    -webkit-box-shadow: 2px 2px 19px #444;

+    -moz-box-shadow: 2px 2px 19px #fff;

+    opacity: 0.9;

+}

 

 /**

  * Anchors

@@ -53,7 +74,7 @@
     left: 40%;

 }

 

-/*右箭头*/

+/*right-arrow*/

 .right {

     width: 10px;

     height: 10px;

@@ -86,7 +107,7 @@
     left: -2px;

 }

 

-/*左箭头*/

+/*left-arrow*/

 .left {

     width: 10px;

     height: 10px;

@@ -103,7 +124,7 @@
     position: absolute;

     left: 0;

     top: 0;

-    z-index: 5; /*兼容ie8-*/

+    z-index: 5;

     border-top: 5px transparent dashed;

     border-left: 5px transparent dashed;

     border-bottom: 5px transparent dashed;

@@ -119,7 +140,7 @@
     left: 2px;

 }

 

-/*上箭头*/

+/*top-arrow*/

 .top {

     width: 9px;

     height: 9px;

@@ -152,7 +173,7 @@
     border-bottom: 4px white solid;

 }

 

-/*下箭头*/

+/*bottom-arrow*/

 .bottom {

     width: 9px;

     height: 9px;

@@ -185,3 +206,32 @@
 .bottom-arrow2 {

     border-top: 4px white solid;

 }

+

+

+.node .startEvent {

+    border-radius: 30px;

+    background-size: cover;

+    border: 1px solid rgb(0, 0, 0);

+    height: 30px;

+    width: 30px;

+}

+

+.node .endEvent {

+    border-radius: 30px;

+    background-size: cover;

+    border: 2px solid rgb(0, 0, 0);

+    height: 30px;

+    width: 30px;

+}

+

+.node .name {

+    padding: 10px 15px;

+}

+

+.node:hover {

+    border: 1px dotted #000;

+}

+

+.node.focus {

+    border: 1px dotted red;

+}

diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/sdc-workflow-designer-ui/src/app/components/node/node.component.html
index f875718d..090f324d 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.html
@@ -11,30 +11,34 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 -->

-<div class="node" id="{{node.id}}" (dblclick)="showProperties()" [style.top]="node.top + 'px'" [style.left]="node.left + 'px'">

-    <div>{{node.name}}</div>

-    <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 class="anchor anchors anchor-top">

-        <span class="top">

-            <i class="top-arrow1"></i>

-            <i class="top-arrow2"></i>

-        </span>

-    </div>

-    <div class="anchor anchors anchor-bottom">

-        <span class="bottom">

-            <i class="bottom-arrow1"></i>

-            <i class="bottom-arrow2"></i>

-        </span>

-    </div>

+

+<div (dblclick)="showProperties()" class="node" id="{{node.id}}" [style.top]="node.position.top + 'px'"

+[style.left]="node.position.left + 'px'">

+<div [class]="node.type">

+

+</div>

+<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 class="anchor anchors anchor-top">

+   <span class="top">

+       <i class="top-arrow1"></i>

+       <i class="top-arrow2"></i>

+   </span>

+</div>

+<div class="anchor anchors anchor-bottom">

+   <span class="bottom">

+       <i class="bottom-arrow1"></i>

+       <i class="bottom-arrow2"></i>

+   </span>

+</div>

 </div>

diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
index 24b784fe..676ba998 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
@@ -14,7 +14,7 @@ import { Component, AfterViewInit, Input } from '@angular/core';
 

 import { JsPlumbService } from '../../services/jsplumb.service';

 import { BroadcastService } from "../../services/broadcast.service";

-import { WorkflowNode } from "../../model/workflow-node";

+import { WorkflowNode } from "../../model/workflow/workflow-node";

 

 /**

  * workflow node component

diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
new file mode 100644
index 00000000..da7dfb1d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.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="form-group row">

+    <div *ngIf="showLabel" class="col-md-3 text-md-right">

+        <input *ngIf="canEditName" class="form-control" type="text" [(ngModel)]="param.name">

+        <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label>

+    </div>

+    <div [ngClass]="valueGroupClass">

+        <div [ngSwitch]="param.valueSource">

+            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" [ngClass]="valueClass" class="form-control"

+                type="text" [ngModel]="param.value" (ngModelChange)="modelChange($event)">

+            <!-- TODO add plan and Top parameters -->

+        </div>

+    </div>

+    <div *ngIf="canDelete" class="col-md-2">

+        <button type="button" class="btn oes-red-bg pull-right" (click)="deleteParam()">

+            <i class="fa fa-minus"></i>

+        </button>

+    </div>

+</div>

diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
new file mode 100644
index 00000000..f42caf66
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
@@ -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

+ */

+

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

+

+import { ValueSource } from '../../model/value-source.enum';

+import { Parameter } from '../../model/workflow/parameter';

+import { DataAccessService } from "../../services/data-access/data-access.service";

+

+/**

+ * this component contains in property component if the corresponding node has parameter properties

+ * eg. task node have input and output params, start event node has input param

+ */

+@Component({

+    selector: 'b4t-parameter',

+    templateUrl: 'parameter.component.html',

+})

+export class ParameterComponent implements OnInit {

+    @Input() public param: Parameter;

+    @Input() public valueSource: ValueSource[];

+    @Input() public canEditName: boolean;

+    @Input() public showLabel = true;

+    @Input() public canDelete: boolean;

+    @Output() public paramChange = new EventEmitter<Parameter>();

+    @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();

+

+    public sourceEnum = ValueSource;

+    public valueGroupClass;

+    public valueClass;

+    public showValueSource: boolean = true;

+

+    constructor(private dataAccessService: DataAccessService) { }

+

+    public ngOnInit(): void {

+        if (1 === this.valueSource.length) {

+            this.showValueSource = false;

+        }

+        this.valueClass = {

+            'col-md-9': this.showValueSource,

+            'col-md-12': !this.showValueSource

+        };

+

+        this.valueGroupClass = {

+            'col-md-7': this.canDelete,

+            'col-md-9': !this.canDelete

+        };

+    }

+

+    public deleteParam(): void {

+        this.delete.emit();

+    }

+

+    public modelChange(value: any) {

+        this.param.value = value;

+        this.paramChange.emit(this.param)

+    }

+

+}

diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
index 00aea176..d7a8500d 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
@@ -38,6 +38,6 @@
     </div>
 
     <!-- TODO  add property for different node types -->
-    <span>TODO: property for different node types</span>
 
+    <b4t-start-event-parameters *ngIf="'startEvent' == node.type" [node]="node"></b4t-start-event-parameters>
 </div>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
index bedf682f..0630f94b 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
@@ -12,7 +12,7 @@
 
 import { AfterViewInit, Component } from '@angular/core';
 
-import { WorkflowNode } from '../../model/workflow-node';
+import { WorkflowNode } from '../../model/workflow/workflow-node';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 import { WorkflowService } from '../../services/workflow.service';
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html
new file mode 100644
index 00000000..d6aaafd8
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html
@@ -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
+ *******************************************************************************/
+-->
+
+<div class="form-group row">
+    <div class="col-md-10"></div>
+    <div class="col-md-2">
+        <button (click)="create();" type="button" class="btn blue1 pull-right">
+            <i class="fa fa-plus"></i>
+        </button>
+    </div>
+</div>
+
+<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
+    [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts
new file mode 100644
index 00000000..65838792
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts
@@ -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
+ *******************************************************************************/
+import { Component, Input, ViewChild } 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';
+
+@Component({
+    selector: 'b4t-start-event-parameters',
+    templateUrl: 'start-event-parameters.component.html',
+})
+export class StartEventParametersComponent {
+    @Input() public node: StartEvent;
+    public sources: ValueSource[] = [ValueSource.String];
+
+    public create(): void {
+        this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String]));
+    }
+
+    public delete(index: number): void {
+        this.node.parameters.splice(index, 1);
+    }
+}