Display Extend Activities on WF Designer UI.

Display Extend Activities on WF Designer UI.
Use Extend Activities to Design Workflow and Save

Issue-ID: SDC-1130,SDC-1131

Change-Id: Iea62eb0edafb2270deaac89b458015e78d961cd0
Signed-off-by: YuanHu <yuan.hu1@zte.com.cn>

2 files changed, 63 insertions, 16 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
index d6aaafd8..f48a725b 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
@@ -11,15 +11,30 @@
  *     ZTE - initial API and implementation and/or initial documentation
  *******************************************************************************/
 -->
+<table cellpadding="10px">
+    <tr>
+        <th style="width:35%;" class="plx-table-th">{{ 'WORKFLOW.PROCESS_VARIABLE' | translate }}</th>
+        <th style="width:45%;" class="plx-table-th">{{ 'WORKFLOW.PROCESS_VARIABLE_DEFAULT' | translate }}</th>
+        <th style="width:20%;" class="plx-table-th">{{ 'WORKFLOW.PROCESS_VARIABLE_OPERATION' | translate }}</th>
+    </tr>
+    <tr *ngFor="let param of node.parameters; let i = index;" class="table-body">
+        <td>
+            <input [ngModel]="param.name" (ngModelChange)="checkKey($event, i)" class="plx-input"/>
+            <span *ngIf="param.errorMsg">{{param.errorMsg}}</span>
+        </td>
+        <td>
+            <input [(ngModel)]="param.value" class="plx-input" />
+            <span *ngIf="param.errorMsg">&nbsp;</span>
+        </td>
+        <td>
+            <i class="plx-ico-delete-16 delete-icon" (click)="delete(i)"></i>
+            <span *ngIf="param.errorMsg">&nbsp;</span>
+        </td>
+    </tr>
+</table>
 
-<div class="form-group row">
-    <div class="col-md-10"></div>
-    <div class="col-md-2">
-        <button (click)="create();" type="button" class="btn blue1 pull-right">
-            <i class="fa fa-plus"></i>
-        </button>
-    </div>
-</div>
-
-<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
-    [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file
+<button (click)="create();" type="button" class="plx-btn">
+    <i class="plx-ico-new-16"></i>{{ 'WORKFLOW.PROCESS_VARIABLE_CREATE' | translate }}
+</button>
+<!-- <wfm-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
+    [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></wfm-parameter> -->
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
index adef3297..0f721242 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
@@ -9,7 +9,7 @@
  * Contributors:
  *     ZTE - initial API and implementation and/or initial documentation
  *******************************************************************************/
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
 import { ValueSource } from '../../../model/value-source.enum';
@@ -17,20 +17,52 @@ import { Parameter } from '../../../model/workflow/parameter';
 import { StartEvent } from '../../../model/workflow/start-event';
 import { BroadcastService } from '../../../services/broadcast.service';
 import { WorkflowUtil } from '../../../util/workflow-util';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
-    selector: 'b4t-start-event',
+    selector: 'wfm-start-event',
+    styleUrls: ['./start-event.component.css'],
     templateUrl: 'start-event.component.html',
 })
-export class StartEventComponent {
+export class StartEventComponent implements OnInit {
     @Input() public node: StartEvent;
-    public sources: ValueSource[] = [ValueSource.String];
+    public sources: ValueSource[] = [ValueSource.string];
+
+    constructor(private translate: TranslateService) { }
+
+    ngOnInit() { }
 
     public create(): void {
-        this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String]));
+        let parameter = new Parameter('', '', ValueSource[ValueSource.string]);
+        this.node.parameters.push(parameter);
     }
 
     public delete(index: number): void {
         this.node.parameters.splice(index, 1);
     }
+
+    public checkKey(newName: string, index: number): void {
+        this.node.parameters[index].name = newName;
+        this.node.parameters.forEach(parameter => {
+            parameter.errorMsg = '';
+        });
+        if (!newName) {
+            this.translate.get('WORKFLOW.MSG.VARIABLE_EMPTY').subscribe((res: string) => {
+                this.node.parameters[index].errorMsg = res;
+            });
+        }
+        this.node.parameters.forEach((parameter, i) => {
+            if (i + 1 < this.node.parameters.length) {
+                for (let j = i + 1; j < this.node.parameters.length; j++) {
+                    let element = this.node.parameters[j];
+                    if (element.name && parameter.name === element.name) {
+                        this.translate.get('WORKFLOW.MSG.VARIABLE_SAME').subscribe((res: string) => {
+                            parameter.errorMsg = res;
+                            element.errorMsg = res;
+                        });
+                    }
+                }
+            }
+        });
+    }
 }