support edit rest task properties

modify rest taks config info, and enable edit rest task properties.component.css

Issue-ID: SDC-897

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

3 files changed, 128 insertions, 44 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
new file mode 100644
index 00000000..fdcd38d7
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
@@ -0,0 +1,38 @@
+/**

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

+    margin-bottom: 0;

+    width: 100px;

+    vertical-align: middle;

+}

+

+.parameter-item{

+    display: inline;

+    margin-left: 5px;

+    vertical-align: middle;

+}

+

+.form-control-required{

+    color: red;

+    height: 30px;

+    line-height: 30px;

+}

+

+.form-control-input{

+    width: 120px;

+    vertical-align: middle;

+}

+

+.form-control-value{

+    width: 160px;

+    display: inline-block;

+}

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
index 3c9f1858..72e77990 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
@@ -12,29 +12,37 @@
  */

 -->

 

-<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">

+<div class="form-group">

+    <div *ngIf="showLabel" class="parameter-item" style="margin:0;">

+        <label *ngIf="true === param.required" class="form-control-required">*</label>

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

         <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)="valueChange($event)">

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

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

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

-            <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" [items]="planOptions"

-                childrenField="children" #simpleSelect="ngModel" [ngClass]="valueClass" class="tree-select-class"

-                [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select>

+    <div class="parameter-item">

+        <div *ngIf="showValue" [ngSwitch]="param.valueSource" class="parameter-item">

+            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" class="form-control form-control-value" type="text" [ngModel]="param.value"

+                (ngModelChange)="valueChange($event)">

+            <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" class="form-control form-control-value" type="text" [ngModel]="param.value"

+                (ngModelChange)="valueChange($event)">

+            <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" style="vertical-align:top;" [items]="planOptions" childrenField="children"

+                #simpleSelect="ngModel" class="form-control-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select>

+            <select *ngSwitchCase="sourceEnum[sourceEnum.Topology]" class="form-control form-control-value" type="text" [ngModel]="param.value"

+                (ngModelChange)="valueChange($event)">

+                <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}}</option>

+            </select>

         </div>

-        <select *ngIf="showValueSource" class="form-control col-md-4" type="text" [ngModel]="param.valueSource"

+        <select *ngIf="showValueSource" class="form-control parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource"

             (ngModelChange)="valueSourceChange($event)">

             <option *ngFor="let sourceType of valueSource" value="{{sourceEnum[sourceType]}}">{{sourceEnum[sourceType]}}</option>

         </select>

     </div>

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

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

+    <div *ngIf="canInsert" class="parameter-item">

+        <button type="button" class="btn blue1" (click)="insertParam()">

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

+        </button>

+    </div>

+    <div *ngIf="canDelete" class="parameter-item">

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

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

         </button>

     </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
index 9f4c6d1e..35dfbf1e 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
@@ -10,12 +10,11 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 

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

+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 { DataAccessService } from "../../services/data-access/data-access.service";

-import { PlanTreeviewItem } from "../../model/plan-treeview-item";

 

 /**

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

@@ -23,41 +22,53 @@ import { PlanTreeviewItem } from "../../model/plan-treeview-item";
  */

 @Component({

     selector: 'b4t-parameter',

+    styleUrls: ['./parameter.component.css'],

     templateUrl: 'parameter.component.html',

 })

-export class ParameterComponent implements OnInit {

+export class ParameterComponent implements OnChanges, OnInit {

     @Input() public param: Parameter;

     @Input() public valueSource: ValueSource[];

     @Input() public canEditName: boolean;

     @Input() public showLabel = true;

+    @Input() public canInsert: boolean;

     @Input() public canDelete: boolean;

     @Input() public planItems: PlanTreeviewItem[];

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

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

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

 

     public sourceEnum = ValueSource;

     public valueGroupClass;

     public valueClass;

-    public showValueSource: boolean = true;

-    public planValue: any = {};

+    public valueSourceClass;

     public planOptions = [];

+    public topologyOptions: { name: string, value: string }[] = [];

+    public showValue = true;

+    public showValueSource = true;

+    public planValue: any = {};

 

-    constructor(private dataAccessService: DataAccessService) { }

+    constructor() { }

+

+    public ngOnChanges(changes: SimpleChanges): void {

+        // if (changes.canInsert && !changes.canInsert.isFirstChange()) {

+        //     this.resetValueGroupClass(changes.canInsert.currentValue, this.canDelete);

+        // }

+        // if (changes.canDelete && !changes.canDelete.isFirstChange()) {

+        //     this.resetValueGroupClass(this.canInsert, changes.canDelete.currentValue);

+        // }

+    }

 

     public ngOnInit(): void {

+        // console.warn('Parameter OnInit, parameter name is:' + this.param.name);

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

             this.showValueSource = false;

         }

-        this.valueClass = {

-            'col-md-8': this.showValueSource,

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

-        };

-

-        this.valueGroupClass = {

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

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

-        };

-

+        // this.valueClass = {

+        //     'col-md-7': this.showValueSource,

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

+        // };

+        // this.resetValueGroupClass(this.canInsert, this.canDelete);

+        this.updateValueSource(this.param.valueSource);

         // trans plan options to tree view items.

         this.initPlanTreeviewItems(this.planItems);

         if (ValueSource[ValueSource.Plan] === this.param.valueSource) {

@@ -65,29 +76,57 @@ export class ParameterComponent implements OnInit {
         }

     }

 

-    public deleteParam(): void {

-        this.delete.emit();

-    }

-

-    public valueSourceChange(valueSource: string) {

-        this.param.valueSource = valueSource;

-        this.valueChange(null);

+    public keyChange(key: string) {

+        this.param.name = key;

+        this.paramChange.emit(this.param);

     }

 

     public valueChange(value: any) {

         if (ValueSource[ValueSource.Plan] === this.param.valueSource) {

-            if (value !== null && 'object' === typeof (value)) {

+            if ('object' === typeof (value)) {

                 this.planValue = value;

+                this.param.value = value.id;

             } else {

-                this.planValue = {};

+                this.planValue = { id: '' };

+                this.param.value = '';

             }

-            this.param.value = this.planValue.id;

         } else {

             this.param.value = value;

         }

         this.paramChange.emit(this.param);

     }

 

+    public valueSourceChange(valueSource: string) {

+        this.updateValueSource(valueSource);

+        this.param.valueSource = valueSource;

+        this.valueChange('');

+    }

+

+    public insertParam(): void {

+        this.insert.emit();

+    }

+

+    public deleteParam(): void {

+        this.delete.emit();

+    }

+

+    private updateValueSource(valueSource: string):void{

+        if(ValueSource[ValueSource.Definition] === valueSource){

+            this.showValue = false;

+        }else{

+            this.showValue = true;

+        }

+        // this.resetValueSourceClass(this.showValue);

+    }

+

+    private resetValueGroupClass(canInsert: boolean, canDelete: boolean): void {

+        // this.valueGroupClass = {

+        //     'col-md-5': canInsert && canDelete,

+        //     'col-md-7': (canInsert && !canDelete) || (!canInsert && canDelete),

+        //     'col-md-9': !canInsert && !canDelete

+        // };

+    }

+

     private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void {

         this.planOptions = this.getTreeviewChild(planTreeviewItems);

     }

@@ -110,5 +149,4 @@ export class ParameterComponent implements OnInit {
         });

         return treeviewItems;

     }

-

 }