adding template and mapping import template files

Issue-ID: CCSDK-2102

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

9 files changed, 158 insertions, 106 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
index 1df011948..41b81eea3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
@@ -1,5 +1,5 @@
 import {PackageCreationModes} from './PackageCreationModes';
-import {CBAPackage, Definition, Scripts} from '../mapping-models/CBAPacakge.model';
+import {CBAPackage, Scripts} from '../mapping-models/CBAPacakge.model';
 import {FilesContent} from '../mapping-models/metadata/MetaDataTab.model';
 import {Import, Metadata, VlbDefinition} from '../mapping-models/definitions/VlbDefinition';
 import {PackageCreationUtils} from '../package-creation.utils';
@@ -13,27 +13,18 @@ export class DesignerCreationMode extends PackageCreationModes {
 
     execute(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
         this.addToscaMetaDataFile(cbaPackage.metaData);
-        this.createDefinitionsFolder(cbaPackage.definitions, packageCreationUtils);
+        this.createDefinitionsFolder(cbaPackage, packageCreationUtils);
         this.addScriptsFolder(cbaPackage.scripts);
     }
 
-
-    /* private createDefinitionsFolder(definition: Definition) {
-         definition.imports.forEach((key, value) => {
-             console.log(key);
-             FilesContent.putData(key, value);
-         });
-
-     }*/
-
     private addScriptsFolder(scripts: Scripts) {
         scripts.files.forEach((key, value) => {
             FilesContent.putData(key, value);
         });
     }
 
-    private createDefinitionsFolder(definition: Definition, packageCreationUtils: PackageCreationUtils) {
-        definition.imports.forEach((key, valueOfFile) => {
+    private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
+        cbaPackage.definitions.imports.forEach((key, valueOfFile) => {
             FilesContent.putData(key, valueOfFile);
         });
 
@@ -42,29 +33,21 @@ export class DesignerCreationMode extends PackageCreationModes {
         const metadata: Metadata = new Metadata();
 
         metadata.template_author = 'Shaaban Ebrahim';
-        metadata.template_name = definition.metaDataTab.name;
-        metadata.template_tags = definition.metaDataTab.tags;
-        metadata.template_version = definition.metaDataTab.version;
+        metadata.template_name = cbaPackage.metaData.name;
+        metadata.template_tags = cbaPackage.metaData.tags;
+        metadata.template_version = cbaPackage.metaData.version;
         metadata['author-email'] = 'shaaban.eltanany.ext@orange.com';
         metadata['user-groups'] = 'test';
-        definition.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => {
+        cbaPackage.definitions.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => {
             metadata[key] = customKeyValue;
         });
         vlbDefinition.metadata = metadata;
-        // const files = Import[definition.imports.size];
         const files: Import[] = [];
-        definition.imports.forEach((key, valueOfFile) => {
+        cbaPackage.definitions.imports.forEach((key, valueOfFile) => {
             files.push({file: valueOfFile});
         });
         console.log(vlbDefinition);
         vlbDefinition.imports = files;
-        /*  vlbDefinition.imports = this.definition.imports; /!*[{
-              this.this.definition.imports.forEach(key,value =>{
-
-              });
-              file: 'Definitions/data_types.json'
-          }]; */
-
         const value = packageCreationUtils.transformToJson(vlbDefinition);
         FilesContent.putData(filenameEntry, value);
         console.log('hello there');
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 535f783ad..106fe3090 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -39,26 +39,7 @@ export class ImportsTabComponent implements OnInit {
                 console.log(fileEntry.name);
                 this.fileNames.add(fileEntry.name);
 
-            } /*else {
-                const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
-                this.filesUnderDirectory = directorEntry.getFile('');
-               // const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
-               /* this.uploadedFile.push(droppedFile);
-                const formData = new FormData()
-                formData.append('logo', fileEntry, droppedFile.relativePath);
-                console.log(formData);*/
-            /* // It was a directory (empty directories are added, otherwise only files)
-             const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
-             console.log(droppedFile.relativePath, fileEntry);
-
-
-              const formData = new FormData();
-              formData.append('logo', droppedFile, droppedFile.relativePath);
-              console.log(formData);
-
-             //this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath));
-*/
-            /* }*/
+            }
         }
     }
 
@@ -76,16 +57,6 @@ export class ImportsTabComponent implements OnInit {
         console.log(event);
     }
 
-    /* readFileContent(file: File): string | ArrayBuffer {
-         const fileReader = new FileReader();
-        // let content: string | ArrayBuffer = '';
-         fileReader.onload = (e) => {
-             content = fileReader.result;
-         };
-         fileReader.readAsText(file);
-         return content;
-     }
- */
     setFilesToStore() {
         for (const droppedFile of this.uploadedFiles) {
             droppedFile.file((file: File) => {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
index 78a9b5212..d94a64ca3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
@@ -47,17 +47,33 @@ export class Scripts {
     }
 }
 
+
+export class Template {
+    public files: Map<string, string>;
+
+    constructor() {
+        this.files = new Map<string, string>();
+    }
+
+    public setTemplates(key: string, value: string) {
+        this.files.set(key, value);
+        return this;
+    }
+}
+
 export class CBAPackage {
 
     public metaData: MetaDataTabModel;
     public definitions: Definition;
     public scripts: Scripts;
+    public templates: Template;
 
 
     constructor() {
         this.definitions = new Definition();
         this.scripts = new Scripts();
         this.metaData = new MetaDataTabModel();
+        this.templates = new Template();
     }
 
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
index 3e37952b2..3dae2e570 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -86,4 +86,11 @@ export class PackageCreationStore extends Store<CBAPackage> {
     saveBluePrint(blob) {
         this.packageCreationService.savePackage(blob);
     }
+
+    addTemplate(filePath: string, fileContent: string) {
+        this.setState({
+            ...this.state,
+            templates: this.state.templates.setTemplates(filePath, fileContent)
+        });
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts
new file mode 100644
index 000000000..17a4bfae6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts
@@ -0,0 +1,5 @@
+export enum TemplateType {
+    Velocity = 'vtl',
+    Koltin = 'kt',
+    Jinja = 'Unknown'
+}
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 10f1db65d..3c92bc7c7 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
@@ -4,9 +4,9 @@
         <label class="label-name">Name
             <span _ngcontent-uew-c3="">*</span>
         </label>
-        
+
         <div class="label-input">
-            <input type="input" placeholder="Topology name.vLB.CDS">
+            <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS">
         </div>
     </div>
 </div>
@@ -17,7 +17,7 @@
             <div class="card-header" id="headingOne">
                 <h5 class="mb-0 d-flex justify-content-between">
                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
-                        aria-controls="collapseOne">
+                            aria-controls="collapseOne">
                         1. Create Template
                     </button>
 
@@ -30,29 +30,35 @@
                         <label class="label-name">Template Type</label>
                         <div class="label-input">
                             <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-                
+                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
+                                       value=Velcoity>
+
                                 <span>
                                     Velcoity
                                 </span>
                             </label>
                             <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-                
+                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
+                                       value=Velcoity>
+
                                 <span>
                                     Jinja
                                 </span>
                             </label>
                             <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-                
+                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
+                                       value=Velcoity>
+
                                 <span>
                                     Kotlin
                                 </span>
                             </label>
                         </div>
                     </div>
-                    <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></div>
+                    <div class="create-template-import">Use the editor to add parameters or you can also <a href="#"
+                                                                                                            data-toggle="modal"
+                                                                                                            data-target="#exampleModal">Import
+                        File</a></div>
                     <div class="editor-container">
                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
                     </div>
@@ -63,7 +69,7 @@
             <div class="card-header" id="headingTwo">
                 <h5 class="mb-0">
                     <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
-                        aria-expanded="false" aria-controls="collapseTwo">
+                            aria-expanded="false" aria-controls="collapseTwo">
                         2. Manage Mapping
                     </button>
                 </h5>
@@ -74,12 +80,12 @@
                     <div class="text-center">
                         <a href="#" class="mapping-source-load">
                             <i class="icon-current-template"></i>
-                        <br/>
+                            <br/>
                             <span>Use Current Template Instance</span>
                         </a>
                         <a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load">
                             <i class="icon-Upload-attribute"></i>
-                        <br/>
+                            <br/>
                             <div>Upload attribute list</div>
                             <div class="source-load-note">(Should be comma delimited file)</div>
                         </a>
@@ -91,15 +97,15 @@
                     </div>
 
                     <div class="table-container">
-                        
+
 
                     </div>
                 </div>
 
-                
+
             </div>
 
-            
+
         </div>
 
         <div class="template-mapping-action">
@@ -111,7 +117,7 @@
 
 
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-    aria-hidden="true">
+     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -122,10 +128,10 @@
             </div>
             <div class="modal-body">
                 <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
-                    (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
                     <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
                         <div class="folder-upload">
-                            <img src="assets/img/folder-upload.svg" />
+                            <img src="assets/img/folder-upload.svg"/>
                         </div>
                         <div class="folder-upload-text">
                             Drag & Drop file
@@ -141,21 +147,23 @@
                 <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
                     <table class="table">
                         <thead>
-                            <tr>
-                                <th>Name : {{ item.name }}</th>
-                            </tr>
+                        <tr>
+                            <th>Name : {{ item.name }}</th>
+                        </tr>
                         </thead>
                     </table>
                 </div>
             </div>
+
             <div class="modal-footer">
                 <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
-                    (click)="resetTheUploadedFiles()">Cancel
+                        (click)="resetTheUploadedFiles()">Cancel
                 </button>
-                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
+                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
+                        (click)="setFilesToStore()">
                     Import
                 </button>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</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 3a938c5ae..752bd510b 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,15 +1,68 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../../package-creation.store';
 
 @Component({
-  selector: 'app-templ-mapp-creation',
-  templateUrl: './templ-mapp-creation.component.html',
-  styleUrls: ['./templ-mapp-creation.component.css']
+    selector: 'app-templ-mapp-creation',
+    templateUrl: './templ-mapp-creation.component.html',
+    styleUrls: ['./templ-mapp-creation.component.css']
 })
 export class TemplMappCreationComponent implements OnInit {
 
-  constructor() { }
+    public uploadedFiles: FileSystemFileEntry[] = [];
+    private fileNames: Set<string> = new Set();
 
-  ngOnInit() {
-  }
+    public files: NgxFileDropEntry[] = [];
+    fileName: any;
 
+    constructor(private packageCreationStore: PackageCreationStore) {
+    }
+
+    ngOnInit() {
+    }
+
+    public dropped(files: NgxFileDropEntry[]) {
+        this.files = files;
+        for (const droppedFile of files) {
+            // Is it a file? & Not added before
+            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+                const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+                this.uploadedFiles.push(fileEntry);
+                this.fileNames.add(fileEntry.name);
+
+            }
+        }
+    }
+
+    removeFile(fileIndex: number) {
+        /*const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
+        this.packageCreationStore.removeFileFromDefinition(filename);
+        this.uploadedFiles.splice(fileIndex, 1);*/
+    }
+
+    setFilesToStore() {
+        for (const droppedFile of this.uploadedFiles) {
+            droppedFile.file((file: File) => {
+                const fileReader = new FileReader();
+                fileReader.onload = (e) => {
+                    this.packageCreationStore.addTemplate('Templates/' + this.fileName,
+                        fileReader.result.toString());
+                };
+                fileReader.readAsText(file);
+            });
+
+        }
+    }
+
+    public fileOver(event) {
+        console.log(event);
+    }
+
+    public fileLeave(event) {
+        console.log(event);
+    }
+
+    resetTheUploadedFiles() {
+        this.uploadedFiles = [];
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
index a0a54031f..ddf06c824 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
@@ -19,15 +19,15 @@
             </div>
 
             <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion">
-                <div class="card-body max-height-list">
+                <div class="card-body max-height-list"  *ngFor="let file of templates.files | keyvalue; let mapIndex = index">
                     <div class="row">
                         <div class="col">
-                            <a href="#" class="template-mapping-list active">hostname
+                            <a href="#" class="template-mapping-list active">{{file.key}}
                                 <span>Mapping</span>
                                 <span>Template</span>
                             </a>
                         </div>
-                        <div class="col">
+                       <!-- <div class="col">
                             <a href="#" class="template-mapping-list">vf-module-1
                                 <span>Mapping</span>
                             </a>
@@ -36,9 +36,9 @@
                             <a href="#" class="template-mapping-list">vf-module-2
                                 <span>Mapping</span>
                             </a>
-                        </div>
+                        </div>-->
                     </div>
-                    <div class="row">
+                 <!--   <div class="row">
                         <div class="col">
                             <a href="#" class="template-mapping-list">hostname
                                 <span>Mapping</span>
@@ -147,10 +147,10 @@
                                 <span>Template</span>
                             </a>
                         </div>
-                    </div>
+                    </div>-->
                 </div>
             </div>
         </div>
         
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
index 525e58128..5cb41c35e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
@@ -1,20 +1,29 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {PackageCreationStore} from '../../package-creation.store';
+import {Template} from '../../mapping-models/CBAPacakge.model';
 
 @Component({
-  selector: 'app-templ-mapp-listing',
-  templateUrl: './templ-mapp-listing.component.html',
-  styleUrls: ['./templ-mapp-listing.component.css']
+    selector: 'app-templ-mapp-listing',
+    templateUrl: './templ-mapp-listing.component.html',
+    styleUrls: ['./templ-mapp-listing.component.css']
 })
 export class TemplMappListingComponent implements OnInit {
-  @Output() showCreationViewParentNotification = new EventEmitter<any>();
+    @Output() showCreationViewParentNotification = new EventEmitter<any>();
+    private templates: Template;
 
-  constructor() { }
+    constructor(private packageCreationStore: PackageCreationStore) {
+        this.packageCreationStore.state$.subscribe(cba => {
+            if (cba.templates) {
+                this.templates = cba.templates;
+            }
+        });
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
-  openCreationView() {
-    this.showCreationViewParentNotification.emit('tell parent to open create views');
-  }
+    openCreationView() {
+        this.showCreationViewParentNotification.emit('tell parent to open create views');
+    }
 
 }