adding scripts features by allowing creating from scratch

Issue-ID: CCSDK-3051
Signed-off-by: Eltanany Shaaban <shaaban.eltanany.ext@orange.com>
Change-Id: I0c0fe79db8c49b40ac310d146c1dcd17c7a6597d

3 files changed, 83 insertions, 2 deletions

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 490eef394..a272b62b0 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
@@ -8,9 +8,62 @@
                                                                                              data-toggle="modal"
                                                                                              (click)="resetTheUploadedFiles()"
                                                                                              href="#"><b>Import File</b></a></span>
-
+        <span>
+   <div class="card creat-card"></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">
+         <label class="label-name">Script Type</label>
+         <div class="label-input" (change)="changeExtension()">
+            <label name="trst" id="kt">
+            <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" class="collapse show">
+      <div class="card-body">
+         <ace-editor [(text)]="currentFileContent"
+                     [mode]="currentExtension"
+                     [autoUpdateContent]="true" [durationBeforeCallback]="3000" [theme]="'eclipse'"
+                     #editor
+                     style="height:300px;">
+         </ace-editor>
+      </div>
+   </div>
+</span>
+        <button tourAnchor="tm-templateFinish" (click)="textCurrentChanges()" [disabled]="currentFileName?.length == 0 ||
+this.currentFileContent?.length == 0
+"
+                title="Submit template and close" class="btn btn-primary">Save
+        </button>
     </div>
 
+
     <div class="accordion">
         <!-- <div class="card creat-card">
             <div class="single-line">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
index fb275a04a..60be0d7ba 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -19,6 +19,10 @@ export class ScriptsTabComponent implements OnInit {
     public files: NgxFileDropEntry[] = [];
     private fileNames: Set<string> = new Set();
     fileToDelete: any = {};
+    currentFileName: any;
+    scriptExtension: any;
+    currentFileContent = '';
+    currentExtension = '';
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -123,4 +127,28 @@ export class ScriptsTabComponent implements OnInit {
             divElement.setAttribute('class', 'collapse show');
         }
     }
+
+    textCurrentChanges() {
+        console.log(this.currentFileName);
+        console.log(this.currentFileContent);
+        if (this.currentFileName) {
+            let fileExtension = 'kt';
+            if (this.currentExtension.includes('python')) {
+                fileExtension = 'py';
+            } else if (this.currentExtension.includes('ansible')) {
+                fileExtension = 'yaml';
+            }
+            this.packageCreationStore.addScripts('Scripts/' + this.currentExtension + '/' + this.currentFileName + '.' + fileExtension
+                , this.currentFileContent);
+            this.toastService.success('the ' + this.currentFileName + ' has been added');
+            this.currentFileName = '';
+            this.currentExtension = '';
+            this.currentFileContent = '';
+        }
+    }
+
+    changeExtension() {
+        this.currentExtension = this.scriptExtension;
+        console.log(this.scriptExtension);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
index fc8abd3c4..c7094f8e2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
@@ -1,6 +1,6 @@
 
 <ul class="defintionsNote">
-    <li><b>To add new property: </b></li>
+    <li><b>To add workflows and node templates </b></li>
     <li>1. Use Copy and paste option or</li>
     <li>2. Write them manually</li>
 </ul>