adding upload function and getting variables from template at template and mapping tab

Issue-ID: CCSDK-2102

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: Id92cbd183c700764a55ef016d681a568954dc18f

2 files changed, 57 insertions, 4 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 3c92bc7c7..07c88c330 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -60,7 +60,8 @@
                                                                                                             data-target="#exampleModal">Import
                         File</a></div>
                     <div class="editor-container">
-                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                        <app-source-editor
+                                           [(text)]="templateInfo.fileContent"></app-source-editor>
                     </div>
                 </div>
             </div>
@@ -78,7 +79,7 @@
                 <div class="card-body">
                     <h6 class="text-center">Select a source to load config parameters</h6>
                     <div class="text-center">
-                        <a href="#" class="mapping-source-load">
+                        <a (click)="initTemplateMappingTableFromCurrentTemplate()" class="mapping-source-load">
                             <i class="icon-current-template"></i>
                             <br/>
                             <span>Use Current Template Instance</span>
@@ -160,7 +161,7 @@
                         (click)="resetTheUploadedFiles()">Cancel
                 </button>
                 <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
-                        (click)="setFilesToStore()">
+                        (click)="setFilesToStore()" (click)="openListView()">
                     Import
                 </button>
             </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
index 752bd510b..836b0f5a6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
@@ -1,6 +1,7 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
 import {PackageCreationStore} from '../../package-creation.store';
+import {TemplateInfo, TemplateStore} from '../../template.store';
 
 @Component({
     selector: 'app-templ-mapp-creation',
@@ -8,17 +9,57 @@ import {PackageCreationStore} from '../../package-creation.store';
     styleUrls: ['./templ-mapp-creation.component.css']
 })
 export class TemplMappCreationComponent implements OnInit {
+    @Output() showListViewParent = new EventEmitter<any>();
 
     public uploadedFiles: FileSystemFileEntry[] = [];
     private fileNames: Set<string> = new Set();
 
     public files: NgxFileDropEntry[] = [];
     fileName: any;
+    templateInfo = new TemplateInfo();
+    private variables: string[] = [];
 
-    constructor(private packageCreationStore: PackageCreationStore) {
+
+    constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
     }
 
     ngOnInit() {
+        this.templateStore.state$.subscribe(templateInfo => {
+            this.templateInfo = templateInfo;
+            this.fileName = templateInfo.fileName.split('/')[1];
+            this.variables = this.getTemplateVariable(templateInfo.fileContent);
+        });
+    }
+
+    public getTemplateVariable(fileContent: string) {
+        const variables: string[] = [];
+        const stringsSlittedByBraces = fileContent.split('${');
+        const stringsDefaultByDollarSignOnly = fileContent.split('"$');
+
+        for (let i = 1; i < stringsSlittedByBraces.length; i++) {
+            const element = stringsSlittedByBraces[i];
+            if (element) {
+                const firstElement = element.split('}')[0];
+                if (!variables.includes(firstElement)) {
+                    variables.push(firstElement);
+                } else {
+                    console.log(firstElement);
+                }
+            }
+        }
+
+        for (let i = 1; i < stringsDefaultByDollarSignOnly.length; i++) {
+            const element = stringsDefaultByDollarSignOnly[i];
+            if (element && !element.includes('$')) {
+                const firstElement = element.split('"')[0]
+                    .replace('{', '')
+                    .replace('}', '').trim();
+                if (!variables.includes(firstElement)) {
+                    variables.push(firstElement);
+                }
+            }
+        }
+        return variables;
     }
 
     public dropped(files: NgxFileDropEntry[]) {
@@ -52,6 +93,7 @@ export class TemplMappCreationComponent implements OnInit {
             });
 
         }
+        this.uploadedFiles = [];
     }
 
     public fileOver(event) {
@@ -65,4 +107,14 @@ export class TemplMappCreationComponent implements OnInit {
     resetTheUploadedFiles() {
         this.uploadedFiles = [];
     }
+
+    openListView() {
+        this.showListViewParent.emit('tell parent to open create views');
+    }
+
+    initTemplateMappingTableFromCurrentTemplate() {
+        if (this.variables && this.variables.length > 0) {
+            this.packageCreationStore.getTemplateAndMapping(this.variables);
+        }
+    }
 }