add optional attributes.

Issue-ID: CCSDK-2900

Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I13ce862a0e91213b2734e4fa52a460f018692eb7

2 files changed, 32 insertions, 39 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
index 91386fd66..115bf6d54 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
@@ -48,7 +48,7 @@
                             <div class="row">
                                 <div class="col">
                                     <!--list-->
-                                    <div class="attribute-wrap">
+                                    <div class="attribute-wrap" *ngIf="artifactPrefix">
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">artifact-prefix-names
                                                 <i class="icon-required-star" type="button"
@@ -72,10 +72,11 @@
                                                 type="button" aria-hidden="true"></i> Select Template</button>
                                     </div>
                                     <!--string-->
-                                    <div class="attribute-wrap" *ngFor="let requiredInput of requiredInputs">
+                                    <div class="attribute-wrap" *ngFor="let requiredInput of getKeys(requiredInputs)">
                                         <div class="form-group">
-                                            <label for="exampleInputEmail1">{{ getObjectKey(requiredInput)[0] }}<i
+                                            <label for="exampleInputEmail1">{{ requiredInput }}<i
                                                     class="icon-required-star" type="button"
+                                                    [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
                                                     aria-hidden="true"></i></label>
                                             <input type="text" class="form-control">
                                         </div>
@@ -119,19 +120,10 @@
                                                 Optional Attributes
                                             </div>
                                             <ul class="dropdown-content save-blueprint">
-                                                <li>
-                                                    <a>resolution-key</a>
-                                                    <i class="icon-add-circle float-right" type="button"
-                                                        aria-hidden="true"></i>
-                                                </li>
-                                                <li>
-                                                    <a>occurrence</a>
-                                                    <i class="icon-add-circle float-right" type="button"
-                                                        aria-hidden="true"></i>
-                                                </li>
-                                                <li>
-                                                    <a>store-result</a>
-                                                    <i class="icon-add-circle float-right" type="button"
+                                                <li *ngFor="let optionalInput of getKeys(OptionalInputs)">
+                                                    <a (click)="addToInputs(optionalInput)">{{ optionalInput }}</a>
+                                                    <i (click)="addToInputs(optionalInput)"
+                                                        class="icon-add-circle float-right" type="button"
                                                         aria-hidden="true"></i>
                                                 </li>
                                             </ul>
@@ -144,10 +136,10 @@
                         <!-- Optional params -->
                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                             aria-labelledby="pills-profile-tab">
-                            <div class="attribute-wrap" *ngFor="let requiredOutput of requiredOutputs">
+                            <div class="attribute-wrap" *ngFor="let requiredOutput of getKeys(requiredOutputs)">
                                 <div class="form-group">
-                                    <label for="exampleInputEmail1">{{ getObjectKey(requiredOutput)[0] }} <i
-                                            class="icon-required-star" type="button" aria-hidden="true"></i></label>
+                                    <label for="exampleInputEmail1">{{ requiredOutput }} <i class="icon-required-star"
+                                            type="button" aria-hidden="true"></i></label>
                                     <input type="text" class="form-control">
                                 </div>
                             </div>
@@ -156,7 +148,7 @@
                 </div>
             </div>
         </div>
-    <!--ARTIFACTS-->
+        <!--ARTIFACTS-->
         <div class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1">
             <div class="card-header" id="headingTwo">
                 <h2 class="mb-0">
@@ -172,8 +164,8 @@
                         <div class="col-12" *ngFor="let file of  getKeys(selectedTemplates)">
                             <a class="template-mapping-list">
                                 <p>{{file}}</p>
-                                <span *ngIf="getValue(file).isMapping">Mapping</span>
-                                <span *ngIf="getValue(file).isTemplate">Template</span>
+                                <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
+                                <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
 
                                 <a data-toggle="modal" (click)="fileToDelete = file"
                                     data-target="#templateDeletionModal" class="accordion-delete deleteTemplate"
@@ -204,8 +196,8 @@
                 <div class="col-4" *ngFor="let file of  getKeys(templateAndMappingMap)">
                     <a class="template-mapping-list float" [ngClass]="{'active':selectedTemplates.has(file)}">
                         <p (click)="setTemplate(file)">{{file}}</p>
-                        <span *ngIf="getValue(file).isMapping">Mapping</span>
-                        <span *ngIf="getValue(file).isTemplate">Template</span>
+                        <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
+                        <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
                     </a>
 
                 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts
index 2572651b5..4eee1f30c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts
@@ -20,10 +20,10 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     templateAndMappingMap = new Map<string, TemplateAndMapping>();
     selectedTemplates = new Map<string, TemplateAndMapping>();
     fileToDelete: string;
-    requiredInputs = [];
-    requiredOutputs = [];
-    OptionalInputs = [];
-    optionalOutputs = [];
+    requiredInputs = new Map<string, {}>();
+    requiredOutputs = new Map<string, {}>();
+    OptionalInputs = new Map<string, {}>();
+    optionalOutputs = new Map<string, {}>();
     artifactPrefix = false;
 
     constructor(
@@ -88,6 +88,10 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     }
 
     addTemplates() { }
+    addToInputs(optionalInput) {
+        this.requiredInputs.set(optionalInput, this.OptionalInputs.get(optionalInput));
+        this.OptionalInputs.delete(optionalInput);
+    }
 
     setTemplate(file: string) {
         if (this.selectedTemplates.has(file)) {
@@ -98,11 +102,11 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         console.log(this.selectedTemplates);
     }
 
-    getKeys(templateAndMappingMap: Map<string, TemplateAndMapping>) {
-        return Array.from(templateAndMappingMap.keys());
+    getKeys(map: Map<string, any>) {
+        return Array.from(map.keys());
     }
-    getValue(file: string) {
-        return this.templateAndMappingMap.get(file);
+    getValue(file: string, map: Map<string, any>) {
+        return map.get(file);
     }
 
     getObjectKey(object) {
@@ -135,24 +139,21 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         const fields = interfaces[nodeName]['operations']['process'][type];
 
         for (const [key, value] of Object.entries(fields)) {
-            const object = {};
-            object[key] = value;
-
             if (key === 'artifact-prefix-names') {
                 this.artifactPrefix = true;
             } else if (value['required']) {
                 console.log('This field is required = ' + key);
                 if (type === 'inputs') {
-                    this.requiredInputs.push(Object.assign({}, object));
+                    this.requiredInputs.set(key, Object.assign({}, value));
                 } else {
-                    this.requiredOutputs.push(Object.assign({}, object));
+                    this.requiredOutputs.set(key, Object.assign({}, value));
                 }
             } else {
                 console.log('This field is Optional ' + key);
                 if (type === 'inputs') {
-                    this.OptionalInputs.push(Object.assign({}, object));
+                    this.OptionalInputs.set(key, Object.assign({}, value));
                 } else {
-                    this.optionalOutputs.push(Object.assign({}, object));
+                    this.optionalOutputs.set(key, Object.assign({}, value));
                 }
             }
         }