handle json inputs in function attributes

Issue-ID: CCSDK-3050

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

2 files changed, 41 insertions, 12 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 ded7e5f23..f00878a74 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
@@ -59,8 +59,7 @@
                                         <div class="custom-control custom-radio custom-control-inline">
                                             <input type="radio" id="functionRadioInline" name="functionRadioInline"
                                                 [checked]="!currentFuncion['inputs']['artifact-prefix-names']?.get_input"
-                                                (click)="setArtifact(true)"
-                                                class="custom-control-input">
+                                                (click)="setArtifact(true)" class="custom-control-input">
                                             <label class="custom-control-label" for="functionRadioInline">Pre-defined
                                                 Template</label>
                                         </div>
@@ -82,7 +81,7 @@
                                     <div class="attribute-wrap"
                                         *ngFor="let requiredInput of getKeys(requiredInputs); let i=index">
                                         <!--string-->
-                                        <div *ngIf="getValue(requiredInput,requiredInputs).type=='string' || getValue(requiredInput,requiredInputs).type=='json'"
+                                        <div *ngIf="getValue(requiredInput,requiredInputs).type=='string'"
                                             class="form-group">
                                             <label for="exampleInputEmail1">{{ requiredInput }}<i
                                                     class="icon-required-star" type="button"
@@ -91,6 +90,17 @@
                                             <input [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="text"
                                                 class="form-control">
                                         </div>
+                                        <!--JSON-->
+                                        <div *ngIf="getValue(requiredInput,requiredInputs).type=='json'"
+                                            class="form-group">
+                                            <label for="exampleInputEmail1">{{ requiredInput }}<i
+                                                    class="icon-required-star"
+                                                    [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
+                                                    aria-hidden="true"></i></label>
+                                            <textarea style="height: 120px;" (change)="bind(requiredInput,$event)"
+                                                [value]="currentFuncion['inputs'][requiredInput]"
+                                                class="form-control"></textarea>
+                                        </div>
                                         <!-- Integer -->
                                         <div class="form-group"
                                             *ngIf="getValue(requiredInput,requiredInputs).type=='integer'">
@@ -207,7 +217,7 @@
             </div>
         </div>
     </div>
-    <br/>
+    <br />
     <button class="btn btn-select-template m-auto" (click)="saveFunctionData()">Save</button>
 </div>
 
@@ -225,13 +235,13 @@
             </div>
             <div class="modal-body createAttributeTabs">
                 <div class="row">
-                <div class="col-6" *ngFor="let file of  getKeys(templateAndMappingMap)">
-                    <a class="template-mapping-list float" [class.active]="selectedTemplates.has(file)">
-                        <p (click)="setTemplate(file)">{{file}}</p>
-                        <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
-                        <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
-                    </a>
-                </div>
+                    <div class="col-6" *ngFor="let file of  getKeys(templateAndMappingMap)">
+                        <a class="template-mapping-list float" [class.active]="selectedTemplates.has(file)">
+                            <p (click)="setTemplate(file)">{{file}}</p>
+                            <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
+                            <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
+                        </a>
+                    </div>
                 </div>
 
             </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 f46004b0b..8780621ea 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
@@ -139,7 +139,7 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
             if (inputs) {
                 for (const [key, value] of Object.entries(inputs)) {
                     console.log(key + ' - ' + value);
-                    if (typeof value === 'object') {
+                    if (this.isValidJson(value)) {
                         this.currentFuncion.inputs[key] = JSON.stringify(value);
                     } else {
                         this.currentFuncion.inputs[key] = value;
@@ -154,6 +154,25 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
             }
         }
     }
+
+    isValidJson(val) {
+        try {
+            JSON.parse(val);
+            return true;
+        } catch (e) { }
+        return false;
+    }
+
+    jsonToStr(json) {
+        return JSON.stringify(json);
+    }
+
+    bind(key, e) {
+        const val = JSON.parse(e.target.value);
+        this.currentFuncion.inputs[key] = {
+            ...val
+        };
+    }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();