adding value attribute for customized output for action

Issue-ID: CCSDK-2975
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I9a7d15943d9b3c59f0444d4b98597f6af57e3044

3 files changed, 107 insertions, 54 deletions

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 5a5a05855..31d934565 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 b0b6ae56d..9f96e2ccf 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 @@ export class ActionAttributesComponent implements OnInit {
 
     inputs = [];
     outputs = [];
+    newInputs = [];
+    newOutputs = [];
     actionAttributesSideBar: boolean;
     inputActionAttribute = new InputActionAttribute();
     outputActionAttribute = new OutputActionAttribute();
@@ -36,6 +38,9 @@ export class ActionAttributesComponent implements OnInit {
     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 @@ export class ActionAttributesComponent implements OnInit {
     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 @@ export class ActionAttributesComponent implements OnInit {
         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 @@ export class ActionAttributesComponent implements OnInit {
 
     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 @@ export class ActionAttributesComponent implements OnInit {
             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 @@ export class ActionAttributesComponent implements OnInit {
                             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 @@ export class ActionAttributesComponent implements OnInit {
 
     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 b4cce3484..82bdb6076 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 @@ export class InputActionAttribute {
     type: string;
     required: boolean;
 
+
     constructor() {
         this.name = '';
         this.description = '';
         this.type = '';
         this.required = true;
+
     }
 }
 
 export class OutputActionAttribute extends InputActionAttribute {
-
+    value = '';
 }