adding attributes for inputs and outputs

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

3 files changed, 43 insertions, 16 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 7f1c9f35a..ba4fba69a 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
@@ -83,10 +83,11 @@
                             <div class="form-group" *ngFor="let output of outputs">
                                 <label for="exampleFormControlTextarea1">{{output.name}}
                                     <i [hidden]="output.required"
-                                       class="icon-required-star optional-attribute" type="button"
+                                       class="icon-required-star" type="button"
                                        aria-hidden="true"></i>
-                                    <i [hidden]="output.required" class="optional-attribute"
+                                    <i [hidden]="!output.required" class="optional-attribute"
                                        type="button" aria-hidden="true"></i>
+
                                 </label>
                             </div>
                         </div>
@@ -162,8 +163,12 @@
                                     <button type="button" class="list-group-item list-group-item-action"
                                             (click)="setInputType('Other')">Other
                                     </button>
-
                                 </div>
+                                <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
+                                       id="inputPassword4"
+                                       placeholder="Add Other type name"
+                                       [(ngModel)]="inputOtherType" (change)="setInputType(inputOtherType)">
+
                             </div>
                         </div>
                         <div class="form-group row">
@@ -224,8 +229,10 @@
                                         Other
                                     </button>
                                 </div>
-                                <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
-                                       placeholder="Add Other type name">
+                                <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
+                                       id="inputPassword3"
+                                       placeholder="Add Other type name"
+                                       [(ngModel)]="outputOtherType" (change)="setOutputType(outputOtherType)">
                             </div>
                         </div>
                         <div class="form-group row">
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 f4f74a9fd..8e8b6ad3e 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
@@ -13,6 +13,10 @@ export class ActionAttributesComponent implements OnInit {
     actionAttributesSideBar: boolean;
     inputActionAttribute = new InputActionAttribute();
     outputActionAttribute = new OutputActionAttribute();
+    isInputOtherType: boolean;
+    isOutputOtherType: boolean;
+    outputOtherType = '';
+    inputOtherType = '';
 
     constructor() {
 
@@ -21,20 +25,23 @@ export class ActionAttributesComponent implements OnInit {
     ngOnInit() {
     }
 
-    _toggleSidebar2() {
-        this.actionAttributesSideBar = !this.actionAttributesSideBar;
-    }
-
     addInput(input: InputActionAttribute) {
-        this.inputs.push(input);
+        if (input && input.type && input.name) {
+            const insertedInputActionAttribute = Object.assign({}, input);
+            this.inputs.push(insertedInputActionAttribute);
+        }
     }
 
     addOutput(output: OutputActionAttribute) {
-        this.outputs.push(output);
+        if (output && output.type && output.name) {
+            const insertedOutputActionAttribute = Object.assign({}, output);
+            this.outputs.push(insertedOutputActionAttribute);
+        }
     }
 
-    setInputType(type) {
+    setInputType(type: string) {
         this.inputActionAttribute.type = type;
+        this.isInputOtherType = this.checkIfTypeIsOther(type);
     }
 
     setInputRequired(isRequired) {
@@ -45,14 +52,27 @@ export class ActionAttributesComponent implements OnInit {
         this.outputActionAttribute.required = isRequired;
     }
 
-    setOutputType(type) {
+    setOutputType(type: string) {
         this.outputActionAttribute.type = type;
+        this.isOutputOtherType = this.checkIfTypeIsOther(type);
+    }
+
+    checkIfTypeIsOther(type) {
+        return type.includes('Other');
     }
 
     submitAttributes() {
         console.log(this.inputActionAttribute);
         console.log(this.outputActionAttribute);
-        this.inputs.push(this.inputActionAttribute);
-        this.outputs.push(this.outputActionAttribute);
+        this.addInput(this.inputActionAttribute);
+        this.addOutput(this.outputActionAttribute);
+        this.clearFormInputs();
+    }
+
+    private clearFormInputs() {
+        this.inputActionAttribute = new InputActionAttribute();
+        this.outputActionAttribute = new OutputActionAttribute();
+        this.outputOtherType = '';
+        this.inputOtherType = '';
     }
 }
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 3aa370360..b4cce3484 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
@@ -8,7 +8,7 @@ export class InputActionAttribute {
         this.name = '';
         this.description = '';
         this.type = '';
-        this.required = false;
+        this.required = true;
     }
 }