split element by type

split elements by type in toolbar

Issue-ID: SDC-895

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

3 files changed, 56 insertions, 47 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
new file mode 100644
index 00000000..78475cfa
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.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

+ */

+

+ .edit{

+    font-size: 24px;

+    width: 300px;

+    height: 30px;

+    border: 1px solid #fff;

+}

+

+.edit:hover{

+    border-color: #80bdff;

+}

+

+.edit:focus{

+    border-color: #80bdff;

+}

diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
index a2d9fd51..8dde9f1c 100644
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
@@ -1,25 +1,5 @@
-<!--
-/**
- * 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
- */
- -->
-<span *ngIf="!isEditing()">
-    <span (dblclick)="startEdit()">{{parameter.value}}</span>
-    <i class="fa fa-edit" (click)="startEdit()"></i>
-</span>
-<span class="row" *ngIf="isEditing()">
-    <span class="col-sm-10">
-        <b4t-parameter [param]="parameter" [showLabel]="showLabel" [valueSource]= "valueSource" [planItems]="planItems"></b4t-parameter>
-    </span>
-    <span class="col-sm-2">
-        <i class="fa fa-check" (click)="completeEdit()"></i>
-    </span>
-</span>
+<input class="edit pull-left" [ngModel]="name" (ngModelChange)="change($event)" (click)="startEdit()" (blur)="stopEdit()"
+(mouseover)="showEditComponent(true)" (mouseout)="showEditComponent(false)">
+<button *ngIf="showEdit" type="button" class="btn blue1 pull-left" (click)="stopEdit();">
+<i class="fa fa-check"></i>
+</button>
diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
index 719d2a60..ea965755 100644
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
@@ -10,41 +10,44 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
-import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { ValueSource } from '../../model/value-source.enum';
-import { ValueType } from '../../model/value-type.enum';
-import { Parameter} from '../../model/workflow/parameter';
-import { PlanTreeviewItem } from "../../model/plan-treeview-item";
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 /**
- * 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.
+ * node or workflow-line name
  */
 @Component({
     selector: 'b4t-editable-property',
     templateUrl: 'editable-property.component.html',
+    styleUrls: ['./editable-property.component.css']
 })
 export class EditablePropertyComponent {
-    @Input() public parameter: Parameter;
-    @Input() public planItems: PlanTreeviewItem[];
-    @Input() public showLabel: boolean;
-    @Input() public valueSource: ValueSource[];
-    @Output() public parameterChange = new EventEmitter<Parameter>();
+    @Input() public name: string;
+    @Output() public nameChange = new EventEmitter<string>();
+
+    public showEdit = false;
+    public isEditing = false;
 
-    private editing = false;
+    public showEditComponent(isShow: boolean): void {
+        if(isShow){
+            this.showEdit = isShow;
+        }else{
+            if(!this.isEditing){
+                this.showEdit = false;
+            }
+        }
+    }
 
-    public isEditing(): boolean {
-        return this.editing;
+    public startEdit(): void {
+        this.isEditing = true;
     }
 
-    public startEdit() {
-        this.editing = true;
+    public stopEdit(): void {
+        this.isEditing = false;
+        this.showEdit = false;
     }
 
-    public completeEdit() {
-        this.editing = false;
-        this.parameterChange.emit(this.parameter);
+    public change(newName: string) {
+        this.name = newName;
+        this.nameChange.emit(this.name);
     }
 }