adding value attribute for customized output for action
Issue-ID: CCSDK-2975
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I9a7d15943d9b3c59f0444d4b98597f6af57e3044
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index 5a5a058..31d9345 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -197,6 +197,22 @@
</div>
</div>
<div class="form-group row">
+ <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
+ <div class="col-sm-9">
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline3" name="customRadioInline3"
+ class="custom-control-input" (click)="setOutputRequired(true)">
+ <label class="custom-control-label" for="customRadioInline3">True</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline4" name="customRadioInline3"
+ class="custom-control-input">
+ <label class="custom-control-label" for="customRadioInline4"
+ (click)="setOutputRequired(false)">False</label>
+ </div>
+ </div>
+ </div>
+ <div class="form-group row">
<label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
<div class="col-sm-9">
<div class="list-group list-group-horizontal">
@@ -235,7 +251,7 @@
<div class="col">
<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
<div class="container">
- <div *ngFor="let tempInput of tempInputs">{{tempInput}}</div>
+ <div *ngFor="let tempInput of steps">{{tempInput}}</div>
</div>
</div>
</div>
@@ -249,7 +265,7 @@
<a class="list-group-item list-group-item-action active" id="list-home-list"
data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
class="icon-resource_resolution mr-1" aria-hidden="true"></i>
- {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
+ {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs(
this.designerState.template.workflows[actionName]['steps'][step]['target']
)"></i></a>
</div>
@@ -263,20 +279,20 @@
<div class="tab-pane fade show active" id="list-home" role="tabpanel"
aria-labelledby="list-home-list">
<div class="scrollWrapper">
- <div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle"
- data-toggle="buttons">
+ <div *ngIf="suggestedAttributes.length>0" class="btn-group btn-group-toggle"
+ data-toggle="buttons">
<label class="btn btn-secondary active"
- *ngFor="let suggestedInput of suggestedInputs"
- (click)="addTempInput(suggestedInput)">
- <input type="radio" name="options" [id]="suggestedInput"
- autocomplete="off" (click)="addTempInput(suggestedInput)">
- {{suggestedInput}}
+ *ngFor="let suggestedAttribute of suggestedAttributes"
+ (click)="addTempOutputAttr(suggestedAttribute)">
+ <input type="radio" name="options" [id]="suggestedAttribute"
+ autocomplete="off" (click)="addTempOutputAttr(suggestedAttribute)">
+ {{suggestedAttribute}}
</label>
</div>
- <div *ngIf="suggestedInputs.length == 0">
+ <div *ngIf="suggestedAttributes.length == 0">
<p class="noAttributes">No Attributes Available</p>
<!--Attribute Details
<div class="nav-item dropdown helpMenu">
@@ -303,23 +319,6 @@
</div>
</div>
<!---->
-
- <div class="form-group row">
- <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
- <div class="col-sm-9">
- <div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="customRadioInline3" name="customRadioInline3"
- class="custom-control-input" (click)="setOutputRequired(true)">
- <label class="custom-control-label" for="customRadioInline3">True</label>
- </div>
- <div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="customRadioInline4" name="customRadioInline3"
- class="custom-control-input">
- <label class="custom-control-label" for="customRadioInline4"
- (click)="setOutputRequired(false)">False</label>
- </div>
- </div>
- </div>
</div>
</div>
</div>
@@ -562,4 +561,4 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
index b0b6ae5..9f96e2c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts
@@ -15,6 +15,8 @@
inputs = [];
outputs = [];
+ newInputs = [];
+ newOutputs = [];
actionAttributesSideBar: boolean;
inputActionAttribute = new InputActionAttribute();
outputActionAttribute = new OutputActionAttribute();
@@ -36,6 +38,9 @@
functionAndAttributesInput: Map<string, string[]> = new Map<string, string[]>();
private currentTargetFunctionName: any;
private functionAndAttributesOutput: Map<string, string[]> = new Map<string, string[]>();
+ suggestedAttributes: string[] = [];
+ selectedFunctionName = '';
+ selectedAttributeName = '';
constructor(private designerStore: DesignerStore, private functionsStore: FunctionsStore) {
@@ -92,7 +97,7 @@
addInput(input: InputActionAttribute) {
if (input && input.type && input.name) {
const insertedInputActionAttribute = Object.assign({}, input);
- this.inputs.push(insertedInputActionAttribute);
+ this.newInputs.push(insertedInputActionAttribute);
}
}
@@ -100,7 +105,7 @@
console.log(output);
if (output && output.type && output.name) {
const insertedOutputActionAttribute = Object.assign({}, output);
- this.outputs.push(insertedOutputActionAttribute);
+ this.newOutputs.push(insertedOutputActionAttribute);
}
}
@@ -128,10 +133,21 @@
submitAttributes() {
this.addInput(this.inputActionAttribute);
+ if (this.selectedFunctionName && this.selectedAttributeName) {
+ this.outputActionAttribute.value =
+ '["' + this.selectedFunctionName + '","' + this.selectedAttributeName + '"]';
+ }
this.addOutput(this.outputActionAttribute);
this.clearFormInputs();
- this.designerStore.setInputsAndOutputsToSpecificWorkflow(this.storeInputs(this.inputs)
- , this.storeOutputs(this.outputs), this.actionName);
+ this.storeOutputs(this.newOutputs);
+ this.storeInputs((this.newInputs));
+ this.newInputs.forEach(input => {
+ this.inputs.push(input);
+ });
+
+ this.newOutputs.forEach(output => {
+ this.outputs.push(output);
+ });
}
private clearFormInputs() {
@@ -148,28 +164,22 @@
inputs += this.appendAttributes(input);
});
- if (inputs.endsWith(',')) {
- inputs = inputs.substr(0, inputs.length - 1);
- }
- return this.convertToObject('{' + inputs + '}');
+ this.writeAttribute(inputs, 'inputs');
}
private storeOutputs(OutputActionAttributes: OutputActionAttribute[]) {
let outputs = '';
OutputActionAttributes.forEach(output => {
- outputs += this.appendAttributes(output);
+ outputs += this.appendOutputAttributes(output);
});
- if (outputs.endsWith(',')) {
- outputs = outputs.substr(0, outputs.length - 1);
- }
- return this.convertToObject('{' + outputs + '}');
+ this.writeAttribute(outputs, 'outputs');
}
- private appendAttributes(output: OutputActionAttribute) {
- return '"' + output.name + '" : {\n' +
- ' "required" : ' + output.required + ',\n' +
- ' "type" : "' + output.type + '",\n' +
- ' "description" : "' + output.description + '"\n' +
+ private appendAttributes(inputActionAttribute: InputActionAttribute) {
+ return '"' + inputActionAttribute.name + '" : {\n' +
+ ' "required" : ' + inputActionAttribute.required + ',\n' +
+ ' "type" : "' + inputActionAttribute.type + '",\n' +
+ ' "description" : "' + inputActionAttribute.description + '"\n' +
' },';
}
@@ -283,19 +293,23 @@
newAttributes += '"' + attribute + '": ' + this.convertToString(attributes[attribute]) + ',';
});
if (value.length > 0) {
- newAttributes = this.removeTheLastComma(newAttributes);
- const originalAttributes = this.convertToString(this.designerState.template.workflows[this.actionName]
- [attributeType]);
- console.log(originalAttributes.substr(0, originalAttributes.length - 1) + ',' + newAttributes + '}');
- this.designerState.template.workflows[this.actionName][attributeType] =
- this.convertToObject(originalAttributes.substr(0, originalAttributes.length - 1)
- + ',' + newAttributes + '}');
+ this.writeAttribute(newAttributes, attributeType);
}
}
});
});
}
+ private writeAttribute(newAttributes: string, attributeType: string) {
+ newAttributes = this.removeTheLastComma(newAttributes);
+ const originalAttributes = this.convertToString(this.designerState.template.workflows[this.actionName]
+ [attributeType]);
+ console.log(originalAttributes.substr(0, originalAttributes.length - 1) + ',' + newAttributes + '}');
+ this.designerState.template.workflows[this.actionName][attributeType] =
+ this.convertToObject(originalAttributes.substr(0, originalAttributes.length - 1)
+ + ',' + newAttributes + '}');
+ }
+
private removeTheLastComma = (newInputs: string) => {
if (newInputs.endsWith(',')) {
newInputs = newInputs.substr(0, newInputs.length - 1);
@@ -309,4 +323,42 @@
private getNodeTemplate = (value: string) => this.designerState.template.node_templates[value];
+ getAttributesAndOutputs(functionName: string) {
+ this.suggestedAttributes = [];
+ console.log(functionName);
+ const nodeTemplate = this.designerState.template.node_templates[functionName];
+ console.log(this.designerState.template.node_templates);
+ console.log(nodeTemplate);
+ /* tslint:disable:no-string-literal */
+ console.log(nodeTemplate['type']);
+ this.functions.serverFunctions
+ /* tslint:disable:no-string-literal */
+ .filter(currentFunction => currentFunction.modelName.includes(nodeTemplate['type']))
+ .forEach(currentFunction => {
+ if (currentFunction.definition['attributes']) {
+ Object.keys(currentFunction.definition['attributes']).forEach(attribute => {
+ this.suggestedAttributes.push(attribute);
+ });
+ }
+ console.log(this.suggestedAttributes);
+ this.selectedFunctionName = functionName;
+ });
+ }
+
+ addTempOutputAttr(suggestedOutputAndAttribute: string) {
+ this.selectedAttributeName = suggestedOutputAndAttribute;
+ }
+
+
+ private appendOutputAttributes(output: OutputActionAttribute) {
+ return '"' + output.name + '" : {\n' +
+ ' "required" : ' + output.required + ',\n' +
+ ' "type" : "' + output.type + '",\n' +
+ ' "description" : "' + output.description + '",\n' +
+ ' "value\" :' + '{\n' +
+ ' "get_attribute" : ' + output.value + '\n' +
+ ' }\n' +
+ ' },';
+
+ }
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts
index b4cce34..82bdb60 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts
@@ -4,14 +4,16 @@
type: string;
required: boolean;
+
constructor() {
this.name = '';
this.description = '';
this.type = '';
this.required = true;
+
}
}
export class OutputActionAttribute extends InputActionAttribute {
-
+ value = '';
}