Add create script modal in script tab.

Issue-ID: CCSDK-3051

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

3 files changed, 102 insertions, 61 deletions

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 5dd123103..15f2ce456 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
@@ -75,7 +75,6 @@ export class ActionAttributesComponent implements OnInit {
                     this.suggestedOutputs = [];
                     this.suggestedInputs = [];
                 }
-
                 this.inputs = [];
                 if (action.inputs) {
                     const namesOfInput = Object.keys(action.inputs);
@@ -393,6 +392,12 @@ export class ActionAttributesComponent implements OnInit {
                 this.convertToObject(originalAttributes.substr(0, originalAttributes.length - 1)
                     + newAttributes + '}');
         }
+        const action = this.designerState.template.workflows[this.actionName] as Action;
+        this.inputs = [];
+        if (action.inputs) {
+            const namesOfInput = Object.keys(action.inputs);
+            this.inputs = this.extractFields(namesOfInput, action.inputs);
+        }
         /* console.log(originalAttributes.substr(0, originalAttributes.length - 1) + ',' + newAttributes + '}');
          this.designerState.template.workflows[this.actionName][attributeType] =
              this.convertToObject(originalAttributes.substr(0, originalAttributes.length - 1)
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 8780621ea..a86ade0fa 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 (this.isValidJson(value)) {
+                    if (typeof value === 'object' || this.isValidJson(value)) {
                         this.currentFuncion.inputs[key] = JSON.stringify(value);
                     } else {
                         this.currentFuncion.inputs[key] = value;
@@ -156,10 +156,13 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     }
 
     isValidJson(val) {
+        console.log(val);
         try {
-            JSON.parse(val);
+            JSON.parse(val + '');
             return true;
-        } catch (e) { }
+        } catch (e) {
+            console.log(e);
+        }
         return false;
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 3a614c95c..a38027ff5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -9,62 +9,9 @@
 
     </div>
     <!--Create Script File-->
-    <div class="card">
-        <div class="card-body">
-            <div class="row">
-                <div class="col">
-                    <h6 class="create-title mb-3">Create Script File</h6>
-                </div>
-            </div>
-            <div class="single-line-model">
-                <label class="label-name">File Name
-                    <span _ngcontent-uew-c3="">*</span>
-                </label>
-                <div class="label-input">
-                    <input type="input" [(ngModel)]="currentFileName" placeholder="script name" name="scriptName"
-                        autofocus [autofocus]="true">
-                </div>
-                <div class="single-line-model">
-                    <label class="label-name">Script Type</label>
-                    <div class="label-input" (change)="changeExtension()">
-                        <label name="trst" id="kt" class="pl-0">
-                            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
-                                name="exampleRadios1" id="kt" value=kotlin>
-                            <span>
-                                Kotlin
-                            </span>
-                        </label>
-                        <label name="trst" id="py">
-                            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
-                                name="exampleRadios2" id="py" value=python>
-                            <span>
-                                Jython
-                            </span>
-                        </label>
-                        <label id="ansible">
-                            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
-                                name="exampleRadios3" id="ansible" value=ansible>
-                            <span>
-                                Ansible
-                            </span>
-                        </label>
-                    </div>
-                </div>
-            </div>
-            <div id="id-script">
-                <ace-editor [(text)]="currentFileContent" [mode]="currentExtension" [autoUpdateContent]="true"
-                    [durationBeforeCallback]="3000" [theme]="'eclipse'" #editor style="height:300px;">
-                </ace-editor>
-            </div>
-            <div class="row template-mapping-action mb-0">
-                <div class="col text-right">
-                    <button tourAnchor="tm-templateFinish" (click)="textCurrentChanges()" [disabled]="currentFileName?.length == 0 ||
-                    this.currentFileContent?.length == 0" title="Save script file" class="btn btn-primary mt-4">Save
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <button type="button" data-target="#createScriptsModal" data-toggle="modal" class="btn btn-info mb-2">Create
+    </button>
+
     <!---->
     <div class="accordion">
         <!-- <div class="card creat-card">
@@ -98,7 +45,8 @@
                                     </div>
                                     <div class="modal-body">
                                         <p>Are you sure you want to delete script file
-                                            <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p>
+                                            <span>{{fileToDelete?.key?.split('/')[2]}}</span>?
+                                        </p>
                                     </div>
                                     <div class="modal-footer">
                                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel
@@ -182,4 +130,89 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- create script modal -->
+<div aria-hidden="true" aria-labelledby="createScriptsModalLabel" class="modal fade" id="createScriptsModal"
+    role="dialog" tabindex="-1">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="createScriptsModalLabel">Create Script File</h5>
+                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
+                    <img src="assets/img/icon-close.svg" />
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="single-line-model">
+                    <label class="label-name">File Name
+                        <span _ngcontent-uew-c3="">*</span>
+                    </label>
+                    <div class="label-input">
+                        <input type="input" [(ngModel)]="currentFileName" placeholder="script name" name="scriptName"
+                            autofocus [autofocus]="true">
+                    </div>
+                    <div class="single-line-model">
+                        <label class="label-name">Script Type</label>
+                        <div class="label-input" (change)="changeExtension()">
+                            <label name="trst" id="kt" class="pl-0">
+                                <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
+                                    name="exampleRadios1" id="kt" value=kotlin>
+                                <span>
+                                    Kotlin
+                                </span>
+                            </label>
+                            <label name="trst" id="py">
+                                <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
+                                    name="exampleRadios2" id="py" value=python>
+                                <span>
+                                    Jython
+                                </span>
+                            </label>
+                            <label id="ansible">
+                                <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
+                                    name="exampleRadios3" id="ansible" value=ansible>
+                                <span>
+                                    Ansible
+                                </span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div id="id-script">
+                    <ace-editor [(text)]="currentFileContent" [mode]="currentExtension" [autoUpdateContent]="true"
+                        [durationBeforeCallback]="500" [theme]="'eclipse'" #editor style="height:300px;">
+                    </ace-editor>
+                </div>
+                <div class="row template-mapping-action mb-0">
+                    <div class="col text-right">
+
+                    </div>
+                </div>
+                <!-- </div>
+                </div> -->
+                <!-- <div class="upload-table">
+                    <table class="table">
+                        <thead>
+                            <tr *ngFor="let item of uploadedFiles; let i=index">
+                                <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
+                                <th>{{ item.name }}</th>
+                                <th (click)="removeInitFile(i)" width="40" class="text-right"><img
+                                        src="assets/img/icon-remove-file.svg" /></th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div> -->
+            </div>
+            <div class="modal-footer">
+                <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
+                    type="button">Cancel
+                </button>
+                <button (click)="textCurrentChanges()" data-dismiss="modal" [disabled]="currentFileName?.length == 0 ||
+                                this.currentFileContent?.length == 0" title="Save script file"
+                    class="btn btn-sm btn-primary">Save
+                </button>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file