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>

4 files changed, 165 insertions, 87 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html
new file mode 100644
index 00000000..790273d7
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.html
@@ -0,0 +1,28 @@
+<!--

+/**

+ * Copyright (c) 2017 ZTE Corporation.

+ * All rights reserved. This program and the accompanying materials

+ * are made available under the terms of the Eclipse Public License v1.0

+ * and the Apache License 2.0 which both accompany this distribution,

+ * and are available at http://www.eclipse.org/legal/epl-v10.html

+ * and http://www.apache.org/licenses/LICENSE-2.0

+ *

+ * Contributors:

+ *     ZTE - initial API and implementation and/or initial documentation

+ */

+ -->

+<accordion-group *ngFor="let category of nodeCategories" [isOpen]="category.collapse" #group>

+    <div accordion-heading class="toolbar-head">

+        <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': group?.isOpen, 'fa-chevron-right': !group?.isOpen}"></i>

+        <i class="fa fa-th-list"></i>

+        <span>{{ getDisplayName(category) }}</span>

+    </div>

+    <div *ngFor="let nodeType of category.nodes">

+        <div *ngIf="(nodeType.type === nodeTypeEnum[nodeTypeEnum.restTask] && supportRest) || (nodeType.type !== nodeTypeEnum[nodeTypeEnum.restTask])"

+             [attr.name]="getDisplayName(nodeType)" [attr.nodeTypeId]="nodeType.id" [attr.nodeType]="nodeType.type"

+             class="item ui-draggable">

+            <img [src]="getImageUrl(nodeType)"/>

+            <span>{{ getDisplayName(nodeType) }}</span>

+        </div>

+    </div>

+</accordion-group>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts
new file mode 100644
index 00000000..3e82687e
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar-node/toolbar-node.component.ts
@@ -0,0 +1,128 @@
+/**

+ * Copyright (c) 2017 ZTE Corporation.

+ * All rights reserved. This program and the accompanying materials

+ * are made available under the terms of the Eclipse Public License v1.0

+ * and the Apache License 2.0 which both accompany this distribution,

+ * and are available at http://www.eclipse.org/legal/epl-v10.html

+ * and http://www.apache.org/licenses/LICENSE-2.0

+ *

+ * Contributors:

+ *     ZTE - initial API and implementation and/or initial documentation

+ */

+import { Component, OnInit } from "@angular/core";

+import { TranslateService } from "@ngx-translate/core";

+import { NodeTypeService } from "../../../services/node-type.service";

+import { DisplayInfoService } from "../../../services/display-info.service";

+import { NodeDataType } from "../../../model/node-data-type/node-data-type";

+import { NodeType } from "../../../model/workflow/node-type.enum";

+import { JsPlumbService } from "../../../services/jsplumb.service";

+import { SettingService } from "../../../services/setting.service";

+import { WorkflowUtil } from "../../../util/workflow-util";

+

+@Component({

+    selector: 'wfm-toolbar-node',

+    templateUrl: 'toolbar-node.component.html',

+    styleUrls: ['../toolbar.component.css']

+})

+export class ToolbarNodeComponent implements OnInit {

+    public nodeCategories: any[] = [];

+    public nodeTypeEnum = NodeType;

+    public supportRest: boolean;

+

+    private needInitButton = false;

+

+    constructor(private nodeTypeService: NodeTypeService,

+        private displayInfoService: DisplayInfoService,

+        private jsPlumbService: JsPlumbService,

+        private settingService: SettingService,

+        public translate: TranslateService) {

+

+    }

+

+    public ngOnInit(): void {

+        this.settingService.getSetting().subscribe(setting => {

+            this.initSetting(setting);

+            this.displayInfoService.getDisplayInfo().subscribe(resp => {

+                this.initNodeCategories(resp);

+                this.needInitButton = true;

+            });

+        });

+    }

+

+    public ngAfterViewChecked(): void {

+        if (this.needInitButton) {

+            console.log('initJsPlumb');

+            this.initJsPlumb();

+            this.needInitButton = false;

+        }

+    }

+

+    private initSetting(setting: any): void {

+        this.supportRest = setting.supportRestNode;

+    }

+

+    private initJsPlumb(): void {

+        this.jsPlumbService.buttonDraggable();

+        this.jsPlumbService.buttonDroppable();

+    }

+

+    private initNodeCategories(displayInfo: any): void {

+        const defaultCategory = this.insertDefaultCategory();

+

+        const categoryData = displayInfo['categoryData'] || {};

+        for (let key in categoryData) {

+            const group = {

+                id: key,

+                displayName: categoryData[key].displayName,

+                collapse: categoryData[key].collapse || false,

+                nodes: []

+            };

+            this.nodeCategories.push(group);

+        }

+

+        const defaultNodes = displayInfo['nodes'] || {};

+        for (let nodeId in defaultNodes) {

+            const nodeType = this.nodeTypeService.getNodeDataTypeById(nodeId);

+            const node = defaultNodes[nodeId];

+            if (node && node.category) {

+                const nodeCategory = this.nodeCategories.find(category => category.id === node.category);

+                if (nodeCategory) {

+                    nodeCategory.nodes.push(nodeType);

+                } else {

+                    defaultCategory.nodes.push(nodeType);

+                }

+            } else {

+                defaultCategory.nodes.push(nodeType);

+            }

+        }

+    }

+

+    private insertDefaultCategory(): any {

+        this.nodeCategories = [];

+        const defaultCategory = {

+            id: 'default',

+            displayName: {

+                zh_CN: '任务',

+                en_US: 'Task'

+            },

+            collapse: true,

+            nodes: []

+        };

+        this.nodeCategories.push(defaultCategory);

+

+        return defaultCategory;

+    }

+

+    public getDisplayName(data: any): string {

+        let language = 'zh_CN';

+        if (this.translate.currentLang.indexOf('en') > -1) {

+            language = 'en_US';

+        }

+        return data.displayName ? data.displayName[language] : data.id;

+    }

+

+    public getImageUrl(nodeType: NodeDataType): string {

+        const name = nodeType && nodeType.icon ? nodeType.icon.name : '';

+        return WorkflowUtil.GetIconFullPath(name);

+    }

+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
index 19df5efd..b8e0ae7a 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
@@ -18,7 +18,7 @@
             <i class="fa fa-th-list"></i>
             <span>{{ 'WORKFLOW.BPMN_EVENT' | translate }}</span>
         </div>
-        <div nodeType="startEvent" class="item ui-draggable">
+        <div [attr.name]="'WORKFLOW.START_EVENT' | translate" nodeType="startEvent" class="item ui-draggable">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                 <g>
                     <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
@@ -27,7 +27,7 @@
             </svg>
             <span>{{ 'WORKFLOW.START_EVENT' | translate }}</span>
         </div>
-        <div nodeType="endEvent" class="item ui-draggable">
+        <div [attr.name]="'WORKFLOW.END_EVENT' | translate" nodeType="endEvent" class="item ui-draggable">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                 <g>
                     <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
@@ -36,7 +36,7 @@
             </svg>
             <span>{{ 'WORKFLOW.END_EVENT' | translate }}</span>
         </div>
-        <div nodeType="intermediateCatchEvent" class="item ui-draggable">
+        <div [attr.name]="'WORKFLOW.TIMER_EVENT' | translate" nodeType="intermediateCatchEvent" class="item ui-draggable">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                 <g>
                     <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26
@@ -78,73 +78,13 @@
         </div>
       -->
     </accordion-group>
-    <accordion-group [isOpen]="true" #task>
-        <div accordion-heading class="toolbar-head">
-            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': task?.isOpen, 'fa-chevron-right': !task?.isOpen}"></i>
-            <i class="fa fa-th-list"></i>
-            <span>{{ 'WORKFLOW.BPMN_TASK' | translate }}</span>
-        </div>
-        <div *ngIf="!isCatalog" nodeType="toscaNodeManagementTask" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
-                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
-                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
-                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
-                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
-                    <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1
-                        C25.7,15.5,25.2,15.1,24.7,15.1z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.TOSCA_TASK' | translate }}</span>
-        </div>
-        <div *ngIf="isCatalog" nodeType="restTask" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
-                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
-                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
-                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
-                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
-                    <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2
-                        c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4
-                        c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"
-                    />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.REST_TASK' | translate }}</span>
-        </div>
-        <div nodeType="scriptTask" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4
-                        c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6
-                        c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4
-                        c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5
-                        C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3
-                        c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8
-                        c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3
-                        c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0
-                        l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5
-                        l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />
-                    <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
-                        l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />
-                    <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2
-                        c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />
-                    <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1
-                        c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.SCRIPT_TASK' | translate }}</span>
-        </div>
-    </accordion-group>
     <accordion-group [isOpen]="true" #getway>
         <div accordion-heading class="toolbar-head">
             <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': getway?.isOpen, 'fa-chevron-right': !getway?.isOpen}"></i>
             <i class="fa fa-th-list"></i>
             <span>{{ 'WORKFLOW.BPMN_GETWAY' | translate }}</span>
         </div>
-        <div nodeType="exclusiveGateway" class="item ui-draggable">
+        <div [attr.name]="'WORKFLOW.EXCLUSIVE_GATEWAY' | translate" nodeType="exclusiveGateway" class="item ui-draggable">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                 <g>
                     <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4
@@ -158,7 +98,7 @@
             </svg>
             <span>{{ 'WORKFLOW.EXCLUSIVE_GATEWAY' | translate }}</span>
         </div>
-        <div nodeType="parallelGateway" class="item ui-draggable">
+        <div [attr.name]="'WORKFLOW.PARALLEL_GATEWAY' | translate" nodeType="parallelGateway" class="item ui-draggable">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                 <g>
                     <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1
@@ -191,4 +131,5 @@
             <span>{{ 'WORKFLOW.SUB_PROCESS' | translate }}</span>
         </div>
     </accordion-group> -->
+    <wfm-toolbar-node></wfm-toolbar-node>
 </accordion>
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
index 1242215c..bfc45094 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
@@ -12,7 +12,7 @@
 
 import { AfterViewChecked, Component, OnInit } from '@angular/core';
 
-import { DataService } from '../../services/data/data.service';
+import { SettingService } from '../../services/setting.service';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 
@@ -21,29 +21,10 @@ import { JsPlumbService } from '../../services/jsplumb.service';
  * The supported nodes can be dragged to container component. which will add a new node to the workflow.
  */
 @Component({
-    selector: 'b4t-toolbar',
+    selector: 'wfm-toolbar',
     templateUrl: 'toolbar.component.html',
     styleUrls: ['./toolbar.component.css']
 })
-export class ToolbarComponent implements AfterViewChecked, OnInit {
-    public isCatalog = true;
-    private needInitButton = false;
+export class ToolbarComponent {
 
-    constructor(private jsPlumbService: JsPlumbService, private broadcastService: BroadcastService,
-        private dataService: DataService) { }
-
-    public ngOnInit() {
-        this.broadcastService.backendServiceReady$.subscribe(() => {
-            this.isCatalog = 'Catalog' === this.dataService.getBackendType();
-            this.needInitButton = true;
-        });
-    }
-
-    public ngAfterViewChecked() {
-        if (this.needInitButton) {
-            this.jsPlumbService.buttonDraggable();
-            this.jsPlumbService.buttonDroppable();
-            this.needInitButton = false;
-        }
-    }
 }