summaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components')
-rw-r--r--sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html25
-rw-r--r--sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts48
-rw-r--r--sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.css14
-rw-r--r--sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html54
-rw-r--r--sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts230
-rw-r--r--sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html4
-rw-r--r--sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts9
-rw-r--r--sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html4
8 files changed, 384 insertions, 4 deletions
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
new file mode 100644
index 00000000..080a4350
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.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
+ */
+ -->
+<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"></b4t-parameter>
+ </span>
+ <span class="col-sm-2">
+ <i class="fa fa-check" (click)="completeEdit()"></i>
+ </span>
+</span>
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
new file mode 100644
index 00000000..577a8f18
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
@@ -0,0 +1,48 @@
+/**
+ * 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 { 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';
+
+/**
+ * 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.
+ */
+@Component({
+ selector: 'b4t-editable-property',
+ templateUrl: 'editable-property.component.html',
+})
+export class EditablePropertyComponent {
+ @Input() public parameter: Parameter;
+ @Input() public showLabel: boolean;
+ @Input() public valueSource: ValueSource[];
+ @Output() public parameterChange = new EventEmitter<Parameter>();
+
+ private editing = false;
+
+ public isEditing(): boolean {
+ return this.editing;
+ }
+
+ public startEdit() {
+ this.editing = true;
+ }
+
+ public completeEdit() {
+ this.editing = false;
+ this.parameterChange.emit(this.parameter);
+ }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.css b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.css
new file mode 100644
index 00000000..cda8b0cc
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.css
@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+.ui-treenode-label {
+ width: calc(100% - 32px) !important;
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html
new file mode 100644
index 00000000..e97968df
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html
@@ -0,0 +1,54 @@
+
+<!--
+/**
+ * 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
+ */
+ -->
+<p-tree *ngIf="parameters.length > 0" [value]="parameters">
+ <ng-template let-node pTemplate="default">
+ <b4t-parameter [param]="node.parameter" [canEditName]="node.keyEditable" [valueSource]= "valueSource"
+ (paramChange)="paramChange($event, node)"></b4t-parameter>
+ </ng-template>
+
+ <ng-template let-node pTemplate="array">
+ <span *ngIf="!node.keyEditable">[Array]({{node.children.length}}) {{node.label}}:</span>
+ <span *ngIf="node.keyEditable">[Array]({{node.children.length}})
+ <b4t-editable-property [parameter]="getKeyParameter(node)" [showLabel]="false"
+ (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>
+ </span>
+ <i class="fa fa-plus-square-o" (click)="addChildNode4ObjectArray(node)"></i>
+ </ng-template>
+ <ng-template let-node pTemplate="object">
+ <span *ngIf="!node.keyEditable">[Object] {{node.label}}:</span>
+ <span *ngIf="node.keyEditable">[Object]
+ <b4t-editable-property [parameter]="getKeyParameter(node)" [showLabel]="false"
+ (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>:
+ </span>
+
+ <span *ngIf="canEditValue(node)" class="dynamic-object-value">
+ <textarea [ngModel]="getObjectValue(node)" (ngModelChange)="updateObjectValue(node, $event)"></textarea>
+ </span>
+
+ <i *ngIf="canDelete(node)" class="fa fa-minus-square-o" (click)="deleteTreeNode(node)"></i>
+ <i *ngIf="canAdd(node)" class="fa fa-plus-square-o" (click)="addChildNode4DynamicObject(node)"></i>
+ </ng-template>
+
+ <ng-template let-node pTemplate="map">
+ <span *ngIf="!node.keyEditable">[Map] {{node.label}}:</span>
+ <span *ngIf="node.keyEditable">[Map]
+ <b4t-editable-property [parameter]="getKeyParameter(node)" [showLabel]="false"
+ (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>:
+ </span>
+
+ <i *ngIf="canDelete(node)" class="fa fa-minus-square-o" (click)="deleteTreeNode(node)"></i>
+ <i *ngIf="canAdd(node)" class="fa fa-plus-square-o" (click)="addChildNode4DynamicObject(node)"></i>
+ </ng-template>
+</p-tree>
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts
new file mode 100644
index 00000000..f5f098b7
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts
@@ -0,0 +1,230 @@
+/**
+ * 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, OnChanges, Output, SimpleChange, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { TreeNode } from 'primeng/primeng';
+
+import { ValueSource } from '../../model/value-source.enum';
+import { ValueType } from '../../model/value-type.enum';
+import { Parameter } from '../../model/workflow/parameter';
+import { RestParameter } from '../../model/workflow/rest-parameter';
+import { RestTask } from '../../model/workflow/rest-task';
+import { SwaggerTreeConverterService } from '../../services/swagger-tree-converter.service';
+import { WorkflowUtil } from '../../util/workflow-util';
+
+/**
+ * parameter tree presents parameter of task node's input and output parameters.
+ */
+@Component({
+ selector: 'b4t-parameter-tree',
+ styleUrls: ['./parameter-tree.component.css'],
+ templateUrl: 'parameter-tree.component.html',
+ encapsulation: ViewEncapsulation.None
+})
+export class ParameterTreeComponent implements OnChanges {
+ @Input() public parameters: TreeNode[];
+ @Input() public task: RestTask;
+ @Input() public defaultValueSource: string;
+ @Input() public valueSource: ValueSource[];
+
+ constructor(private swaggerTreeConverterService: SwaggerTreeConverterService) { }
+
+ public ngOnChanges(changes: SimpleChanges) {
+ const changeParameters = changes["parameters"];
+ if (changeParameters && 0 < changeParameters.currentValue.length) {
+ this.formatParam(changeParameters.currentValue);
+ }
+ }
+
+ public getParam(node: any) {
+ if (undefined === node.parameter.name) {
+ node.parameter.name = node.label;
+ node.parameter.valueSource = this.defaultValueSource;
+ } else {
+ if (node.parent.parameter.value[node.label]) {
+ node.parameter.value = node.parent.parameter.value[node.label].value;
+ node.parameter.valueSource = node.parent.parameter.value[node.label].valueSource;
+ } else {
+ const tempParamValue: any = {};
+ tempParamValue.value = '';
+ tempParamValue.valueSource = this.defaultValueSource;
+ node.parent.parameter.value[node.label] = tempParamValue;
+ node.parameter.value = tempParamValue.value;
+ node.parameter.valueSource = tempParamValue.valueSource;
+ }
+ }
+ return node.parameter;
+ }
+
+ public paramChange(param: Parameter, node: any) {
+ if (node.label !== param.name) {
+ node.label = param.name;
+ this.propertyKeyChanged(node, param.value);
+ }
+ if (node.parent) {
+ if (node.parent.parameter.value[param.name]) {
+ node.parent.parameter.value[param.name].value = param.value;
+ node.parent.parameter.value[param.name].valueSource = param.valueSource;
+ } else {
+ node.parent.parameter.value[param.name] = {
+ value: param.value,
+ valueSource: param.valueSource
+ };
+ }
+ }
+ }
+
+ public getKeyParameter(node: any) {
+ return new Parameter('key', node.label, ValueSource[ValueSource.String], ValueType[ValueType.String]);
+ }
+
+ public keyParameterChange(node: any, parameter: Parameter) {
+ node.label = parameter.value;
+ this.propertyKeyChanged(node, parameter.value);
+ }
+
+ public getValueParameter(node: any, key: string) {
+ const nodeValue = node[key] ? node[key] : {
+ value: '',
+ valueSource: ValueSource[ValueSource.String],
+ };
+ node[key] = nodeValue;
+ return nodeValue;
+ }
+
+ public valueParameterChange(node: any, key: string, parameter: Parameter) {
+ node[key].value = parameter.value;
+ node[key].valueSource = parameter.valueSource;
+ }
+
+ public addChildNode4DynamicObject(node: any) {
+ const copyItem = WorkflowUtil.deepClone(node.parameter.additionalProperties);
+ const key = Object.keys(node.parameter.value).length;
+ const childrenNode = this.swaggerTreeConverterService
+ .schema2TreeNode(key, this.task.serviceName, this.task.serviceVersion, copyItem);
+
+ childrenNode.keyEditable = true;
+ node.parameter.value[key] = childrenNode.parameter.value;
+
+ node.children.push(childrenNode);
+ }
+
+ public propertyKeyChanged(node: any, newKey: string) {
+ const value = node.parent.parameter.value[node.label];
+ node.parent.parameter.value[newKey] = value;
+ delete node.parent.parameter.value[node.label];
+
+ node.label = newKey;
+ }
+
+ public addChildNode4ObjectArray(node: any) {
+ const copyItem = WorkflowUtil.deepClone(node.parameter.items);
+
+ const childrenNode = this.swaggerTreeConverterService
+ .schema2TreeNode(
+ node.children.length,
+ this.task.serviceName,
+ this.task.serviceVersion,
+ copyItem);
+
+ node.parameter.value.push(childrenNode.parameter.value);
+ node.children.push(childrenNode);
+ this.initParam(node);
+ }
+
+ public deleteTreeNode(node: any) {
+ // delete data
+ node.parent.parameter.value.splice(node.label, 1);
+ node.parent.children.splice(node.label, 1);
+
+ // update node index
+ node.parent.children.forEach((childNode, index) => childNode.label = index);
+ }
+
+ public canEditValue(node: any): boolean {
+ return node.children.length === 0;
+ }
+
+ public canDelete(node: any) {
+ const parent = node.parent;
+ if (parent &&
+ (this.isArrayObject(parent) || this.isDynamicObject(parent))) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+
+ public updateObjectValue(node: any, value: string) {
+ const newValueObj = JSON.parse(value);
+ for (const key in node.parameter.value) {
+ delete node.parameter.value[key];
+ }
+
+ for (const key in newValueObj) {
+ node.parameter.value[key] = newValueObj[key];
+ }
+ }
+
+ public getObjectValue(node) {
+ return JSON.stringify(node.parameter.value);
+ }
+
+ public canAdd(node: any) {
+ return this.isArrayObject(node) || this.isDynamicObject(node);
+ }
+
+ private formatParam(params: any[]): void {
+ console.log(params);
+ params.forEach(param => this.initParam(param));
+ }
+
+ private initParam(parameter: any, value?: any): void {
+ if (!parameter || 0 === parameter.length) {
+ return;
+ }
+ switch (parameter.type) {
+ case 'default':
+ parameter.parameter.name = parameter.label;
+ if (value && value[parameter.label]) {
+ parameter.parameter.value = value[parameter.label].value;
+ parameter.parameter.valueSource = value[parameter.label].valueSource;
+ } else {
+ parameter.parameter.valueSource = this.defaultValueSource;
+ }
+ break;
+ case 'object':
+ for (let index = 0; index < parameter.children.length; index++) {
+ let param = parameter.children[index];
+ this.initParam(param, parameter.parameter.value);
+ }
+ break;
+ case 'array':
+ for (let index = 0; index < parameter.children.length; index++) {
+ let param = parameter.children[index];
+ this.initParam(param, parameter.parameter.value);
+ }
+ break;
+ default:
+ console.log('init a unsupport parameter, type is:' + parameter.type);
+ break;
+ }
+ }
+
+ private isArrayObject(node: any): boolean {
+ return node.type === 'array';
+ }
+
+ private isDynamicObject(node: any): boolean {
+ return node.type === 'map';
+ }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html
index 4f98e689..53f02f17 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html
@@ -12,3 +12,7 @@
*******************************************************************************/
-->
<b4t-parameter *ngFor="let param of requestParameters" [param]="param" [valueSource]= "inputSources"></b4t-parameter>
+
+<!-- body parameter -->
+<b4t-parameter-tree [task]="task" [parameters]="bodyParameter" [valueSource]="inputSources"
+ [defaultValueSource]="valueSource[valueSource.String]"></b4t-parameter-tree>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts
index f2d802c2..a50cc1be 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts
@@ -18,6 +18,7 @@ import { RestTask } from '../../../../model/workflow/rest-task';
import { BroadcastService } from '../../../../services/broadcast.service';
import { RestParameter } from "../../../../model/workflow/rest-parameter";
import { ValueSource } from "../../../../model/value-source.enum";
+import { SwaggerTreeConverterService } from "../../../../services/swagger-tree-converter.service";
/**
* property component presents information of a workflow node.
@@ -39,7 +40,7 @@ export class RestTaskParametersComponent implements OnInit {
private index = 1;
- constructor(private broadcastService: BroadcastService) {
+ constructor(private broadcastService: BroadcastService, private swaggerTreeConverterService: SwaggerTreeConverterService) {
}
public ngOnInit() {
@@ -55,8 +56,10 @@ export class RestTaskParametersComponent implements OnInit {
this.task.parameters.forEach(param => {
if (param.position === 'body') {
- // TODO add body parameter handler
- // this.bodyParameter.push(param);
+ const requestTreeNode = this.swaggerTreeConverterService
+ .schema2TreeNode('Request Param', this.task.serviceName, this.task.serviceVersion, param.schema);
+ param.value = param.schema.value;
+ this.bodyParameter.push(requestTreeNode);
} else {
this.requestParameters.push(param);
}
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
index a416944c..af428840 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
@@ -43,4 +43,6 @@
</div>
<hr>
-<b4t-rest-task-parameters [task]="node"></b4t-rest-task-parameters>
+<div class="ui-fluid">
+ <b4t-rest-task-parameters [task]="node"></b4t-rest-task-parameters>
+</div>