fixing bugs import inputs and outputs from functions into actions

Issue-ID: CCSDK-2779
Issue-ID: CCSDK-3025

Signed-off-by: Eltanany Shaaban <shaaban.eltanany.ext@orange.com>
Change-Id: I4c43a5ad8b694ba4bc4385824197e02f379a3284

2 files changed, 32 insertions, 8 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 340ff2f48..0886a3fd3 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
@@ -475,10 +475,18 @@
                                 <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
                                     <input type="text" class="form-control input-search-controller"
                                         placeholder="Functions">
-                                    <div class="scrollWrapper" *ngFor="let step of steps">
-                                        <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>
+                                    <div class="scrollWrapper">
+                                        <a [class]="steps.indexOf(step) === 0?
+                                        'list-group-item list-group-item-action active':
+                                        'list-group-item list-group-item-action'" [id]="step"
+                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"
+                                           *ngFor="let step of steps" >
+
+                                            <i class="icon-resource_resolution mr-1" aria-hidden="true"
+                                               (click)="setInputAndOutputs(
+                                            this.designerState.template.workflows[actionName]['steps'][step]['target']
+                                            )"
+                                        ></i>
                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
                                             )"></i></a>
@@ -535,7 +543,10 @@
                                     <input type="text" class="form-control input-search-controller"
                                         placeholder="Functions">
                                     <div class="scrollWrapper" *ngFor="let step of steps">
-                                        <a class="list-group-item list-group-item-action active" id="list-home-list"
+                                        <a  [class]="steps.indexOf(step) === 0?
+                                        'list-group-item list-group-item-action active':
+                                        'list-group-item list-group-item-action'" [id]="step"
+                                            *ngFor="let step of steps"
                                             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(
@@ -688,4 +699,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 1c5a387d0..97ab4411e 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
@@ -285,12 +285,14 @@ export class ActionAttributesComponent implements OnInit {
                                 /* tslint:disable:no-string-literal */
                                 this.suggestedInputs = Object.keys(nodeTemplate['interfaces']
                                     [interfaceName]['operations']['process']['inputs']);
+                                this.filterTwoCollections(this.suggestedInputs, this.inputs);
+
                             }
                             if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['outputs']) {
                                 /* tslint:disable:no-string-literal */
                                 this.suggestedOutputs = Object.keys(nodeTemplate['interfaces']
                                     [interfaceName]['operations']['process']['outputs']);
-                                console.log(this.suggestedInputs);
+                                this.filterTwoCollections(this.suggestedOutputs, this.outputs);
                             }
 
                         }
@@ -300,8 +302,18 @@ export class ActionAttributesComponent implements OnInit {
         console.log(nodeTemplate);
     }
 
+    private filterTwoCollections(suggestedInputs: string[], inputs: any[]) {
+        inputs.forEach(input => {
+            if (suggestedInputs.includes(input.name)) {
+                this.deleteAttribute(suggestedInputs, input.name);
+            }
+        });
+    }
+
     printSomethings() {
-        console.log('something');
+        this.setInputAndOutputs(
+            this.designerState.template.workflows[this.actionName]['steps'][this.steps[0]]['target']
+        );
     }
 
     addTempInput(suggestedInput: string) {
@@ -319,6 +331,7 @@ export class ActionAttributesComponent implements OnInit {
     deleteAttribute(container: string[], suggestedAttribute: string) {
         if (container && suggestedAttribute && container.includes(suggestedAttribute)) {
             const index: number = container.indexOf(suggestedAttribute);
+            console.log(index);
             if (index !== -1) {
                 container.splice(index, 1);
             }