import maaping from CSV file or the current template

Issue-ID: CCSDK-2065

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

13 files changed, 374 insertions, 106 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..2421e386c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+    "files.exclude": {
+        "**/.classpath": true,
+        "**/.project": true,
+        "**/.settings": true,
+        "**/.factorypath": true
+    }
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json
index 6219bf68a..a84b95e39 100644
--- a/cds-ui/designer-client/angular.json
+++ b/cds-ui/designer-client/angular.json
@@ -25,21 +25,23 @@
             ],
             "styles": [
               "src/styles.css",
+              "./node_modules/datatables.net-dt/css/jquery.dataTables.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "./node_modules/font-awesome/css/font-awesome.css",
               "./node_modules/jointjs/css/layout.css",
               "./node_modules/jointjs/css/themes/material.css",
               "./node_modules/jointjs/css/themes/default.css"
-
             ],
             "scripts": [
+              "./node_modules/jquery/dist/jquery.js",
+              "./node_modules/datatables.net/js/jquery.dataTables.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.js",
               "./node_modules/ace-builds/src-min/ace.js",
               "./node_modules/ace-builds/src-min/theme-eclipse.js",
               "./node_modules/ace-builds/src-min/theme-tomorrow_night_bright.js",
               "./node_modules/ace-builds/src-min/mode-json.js",
               "./node_modules/ace-builds/src-min/mode-javascript.js",
-              "./node_modules/ace-builds/src-min/mode-python.js",
               "./node_modules/ace-builds/src-min/mode-xml.js",
               "./node_modules/ace-builds/src-min/mode-kotlin.js",
               "./node_modules/ace-builds/src-min/mode-text.js",
@@ -52,7 +54,6 @@
               "./node_modules/ace-builds/src-min/ext-language_tools.js",
               "./node_modules/ace-builds/src-min/worker-json.js",
               "./node_modules/ace-builds/src-min/worker-javascript.js",
-              "./node_modules/jquery/dist/jquery.js",
               "./node_modules/lodash/index.js",
               "./node_modules/backbone/backbone.js",
               "./node_modules/jointjs/dist/joint.js"
@@ -60,12 +61,10 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
+              "fileReplacements": [{
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -75,8 +74,7 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "budgets": [
-                {
+              "budgets": [{
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
@@ -126,7 +124,7 @@
             ],
             "scripts": [
 
-              
+
             ]
           }
         },
@@ -159,4 +157,4 @@
     }
   },
   "defaultProject": "designer-client"
-}
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 22defe502..5149300d1 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -24,14 +24,17 @@
     "@angular/router": "~8.2.9",
     "@ng-bootstrap/ng-bootstrap": "^5.1.1",
     "angular-animations": "0.0.10",
+    "angular-datatables": "^8.0.0",
     "angular-font-awesome": "^3.1.2",
     "angular-material-expansion-panel": "^0.7.2",
     "backbone": "^1.4.0",
     "bootstrap": "^4.3.1",
+    "datatables.net": "^1.10.20",
+    "datatables.net-dt": "^1.10.20",
     "file-saver": "^2.0.2",
     "font-awesome": "^4.7.0",
     "jointjs": "^3.0.4",
-    "jquery": "^3.1.1",
+    "jquery": "^3.4.1",
     "json2typescript": "^1.2.3",
     "lodash": "^4.17.15",
     "ng-sidebar": "^9.1.1",
@@ -48,10 +51,11 @@
     "@angular/compiler-cli": "~8.2.9",
     "@angular/language-service": "~8.2.9",
     "@types/backbone": "^1.4.1",
+    "@types/datatables.net": "^1.10.18",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/jointjs": "^2.0.0",
-    "@types/jquery": "^3.3.31",
+    "@types/jquery": "^3.3.33",
     "@types/lodash": "^3.10.1",
     "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
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 db6d0420b..162efff9e 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
@@ -7,6 +7,7 @@ import { PackageCreationUtils } from '../package-creation.utils';
 
 export class DesignerCreationMode extends PackageCreationModes {
 
+    // Refactor methods params to be in constructor level
     constructor() {
         super();
     }
@@ -15,6 +16,7 @@ export class DesignerCreationMode extends PackageCreationModes {
         this.addToscaMetaDataFile(cbaPackage.metaData);
         this.createDefinitionsFolder(cbaPackage, packageCreationUtils);
         this.addScriptsFolder(cbaPackage.scripts);
+        this.addTemplateFolder(cbaPackage);
     }
 
     private addScriptsFolder(scripts: Scripts) {
@@ -23,6 +25,17 @@ export class DesignerCreationMode extends PackageCreationModes {
         });
     }
 
+    private addTemplateFolder(cbaPackage: CBAPackage) {
+        // Create Template Files Folder
+        cbaPackage.templates.files.forEach((value, key) => {
+            FilesContent.putData(key, value);
+        });
+        // Create Mapping Files Folder
+        cbaPackage.mapping.files.forEach((value, key) => {
+            FilesContent.putData(key, value);
+        });
+    }
+
     private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
         cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
             FilesContent.putData(key, valueOfFile);
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 3595f7872..45a00ff06 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
@@ -1,4 +1,4 @@
-import {MetaDataTabModel} from './metadata/MetaDataTab.model';
+import { MetaDataTabModel } from './metadata/MetaDataTab.model';
 
 export class Definition {
 
@@ -34,6 +34,22 @@ export class DslDefinition {
     content: string;
 }
 
+export class Base {
+    public files: Map<string, string>;
+
+    constructor() {
+        this.files = new Map<string, string>();
+    }
+
+    public setContent(key: string, value: string) {
+        this.files.set(key, value);
+        return this;
+    }
+
+    public getValue(key: string): string {
+        return this.files.get(key);
+    }
+}
 export class Scripts {
     public files: Map<string, string>;
 
@@ -65,12 +81,15 @@ export class Template {
     }
 }
 
+export class Mapping extends Base {
+}
 export class CBAPackage {
 
     public metaData: MetaDataTabModel;
     public definitions: Definition;
     public scripts: Scripts;
     public templates: Template;
+    public mapping: Mapping;
 
 
     constructor() {
@@ -78,6 +97,7 @@ export class CBAPackage {
         this.scripts = new Scripts();
         this.metaData = new MetaDataTabModel();
         this.templates = new Template();
+        this.mapping = new Mapping();
     }
 
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts
new file mode 100644
index 000000000..558d1c7d0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts
@@ -0,0 +1,23 @@
+import { JsonObject, JsonProperty } from 'json2typescript';
+
+@JsonObject('ResourceDictionary')
+export class ResourceDictionary {
+    @JsonProperty()
+    name: string;
+    @JsonProperty('creation_date')
+    creationDate: string;
+    @JsonProperty('data_type')
+    dataType: string;
+    @JsonObject('definition')
+    definition?: any | null;
+    @JsonProperty('description')
+    description: string;
+    @JsonProperty('entry_schema')
+    entrySchema: string;
+    @JsonProperty('esource_dictionary_group')
+    resourceDictionaryGroup: string;
+    @JsonProperty('tags')
+    tags: string;
+    @JsonProperty('upadted_by')
+    updatedBy: string;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
index b797050dd..8e2ff475e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
@@ -17,7 +17,7 @@ export class VlbDefinition {
 export class DslContent {
 
 }
-
+// Refactor varaibles name and use JsonConverteri
 @JsonObject('metadata')
 export class Metadata {
     @JsonProperty('template_author')
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
new file mode 100644
index 000000000..638654a95
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
@@ -0,0 +1,38 @@
+import { ResourceDictionary } from './ResourceDictionary.model';
+import { JsonObject, JsonProperty, JsonConvert } from 'json2typescript';
+
+// Convert ResourceDictionary object to store Mapping
+export class MappingAdapter {
+
+    constructor(private resourceDictionary: ResourceDictionary) { }
+
+    ToMapping(): Mapping {
+        const mapping = new Mapping();
+        mapping.name = this.resourceDictionary.name;
+        mapping.dictionaryName = this.resourceDictionary.name;
+        mapping.property = this.resourceDictionary.definition.property;
+        mapping.inputParam = false;
+        mapping.dictionarySource = 'sdnc';
+        mapping.dependencies = [];
+        mapping.version = 0;
+        return mapping;
+    }
+}
+
+@JsonObject('Mapping')
+export class Mapping {
+    @JsonProperty('name')
+    name: string;
+    @JsonProperty()
+    property: any;
+    @JsonProperty('input-param', Boolean)
+    inputParam: boolean;
+    @JsonProperty('dictionary-name')
+    dictionaryName: string;
+    @JsonProperty('dictionary-source')
+    dictionarySource: string;
+    @JsonProperty()
+    dependencies: [];
+    @JsonProperty()
+    version: number;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
index cac27120f..494c9e555 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
@@ -26,6 +26,7 @@ import {ApiService} from '../../../../common/core/services/api.service';
 import {BlueprintURLs, ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
 import {PackagesApiService} from '../packages-api.service';
 import {PackagesStore} from '../packages.store';
+import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
 
 @Injectable({
     providedIn: 'root'
@@ -62,7 +63,7 @@ export class PackageCreationService {
                 });
     }
 
-    getTemplateAndMapping(variables: string[]): Observable<any> {
+    getTemplateAndMapping(variables: string[]): Observable<ResourceDictionary[]> {
         return this.api.post(ResourceDictionaryURLs.searchResourceDictionaryByNames, variables);
     }
 }
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 565603ad1..6a9d9c4b3 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
@@ -19,14 +19,16 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Store} from '../../../../common/core/stores/Store';
+import { Store } from '../../../../common/core/stores/Store';
 
-import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model';
-import {PackageCreationService} from './package-creation.service';
-import {FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
+import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationService } from './package-creation.service';
+import { FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
 import * as JSZip from 'jszip';
+import { Observable } from 'rxjs';
+import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
 
 
 @Injectable({
@@ -94,9 +96,14 @@ export class PackageCreationStore extends Store<CBAPackage> {
         });
     }
 
-    getTemplateAndMapping(variables: string[]) {
-        this.packageCreationService.getTemplateAndMapping(variables).subscribe(element => {
-            console.log('the element is ' + element);
+    addMapping(filePath: string, fileContent: string) {
+        this.setState({
+            ...this.state,
+            mapping: this.state.mapping.setContent(filePath, fileContent)
         });
     }
+
+    getTemplateAndMapping(variables: string[]): Observable<ResourceDictionary[]> {
+        return this.packageCreationService.getTemplateAndMapping(variables);
+    }
 }
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 c3a36c9cb..d08ada98d 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
@@ -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>
 
@@ -29,25 +29,24 @@
                     <div class="single-line">
                         <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>
-
+                            <label name="trst" (click)="allowedExt=['.vtl']">
+                                <input class="form-check-input" [(ngModel)]="templateExt" 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>
+                            <label name="trst" (click)="allowedExt=['.j2','.jinja2']">
+                                <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
+                                    name="exampleRadios" id="exampleRadios1" value=Jinja>
 
                                 <span>
                                     Jinja
                                 </span>
                             </label>
-                            <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
-                                       value=Velcoity>
+                            <label name="trst" (click)="allowedExt=['.kt']">
+                                <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
+                                    name="exampleRadios" id="exampleRadios1" value=Kotlin>
 
                                 <span>
                                     Kotlin
@@ -56,12 +55,11 @@
                         </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>
+                            data-toggle="modal" data-target="#exampleModal">Import
+                            File</a></div>
                     <div class="editor-container">
-                        <app-source-editor
-                                (textChange)="textChanges($event,templateInfo.fileName)"   [(text)]="templateInfo.fileContent"></app-source-editor>
+                        <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
+                            [(text)]="templateFileContent"></app-source-editor>
                     </div>
                 </div>
             </div>
@@ -70,7 +68,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>
@@ -79,14 +77,15 @@
                 <div class="card-body">
                     <h6 class="text-center">Select a source to load config parameters</h6>
                     <div class="text-center">
-                        <a (click)="initTemplateMappingTableFromCurrentTemplate()" class="mapping-source-load">
+                        <a href="#" (click)="getMappingTableFromTemplate($event)" 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">
+                        <a href="#" (click)="allowedExt=['.csv']" 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>
@@ -102,23 +101,64 @@
 
                     </div>
                 </div>
+                <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mx-4 my-2">
+                    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
+                        <thead>
+                            <tr>
+                                <th>Required</th>
+                                <th>Parameter Name</th>
+                                <th>Dictionary Name</th>
+                                <th>Dictionary Source</th>
+                                <th>Dependancies</th>
+                                <th>Default</th>
+                                <th>Data Type</th>
+                                <th>Entry Schema</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let dict of resourceDictionaryRes">
+                                <td>{{ dict.definition?.property?.required }}</td>
+                                <td>{{ dict.name }}</td>
+                                <td>{{ dict.name }}</td>
+                                <td>
+                                    <select class="custom-select">
+                                        <option *ngFor="let val of dict.definition.sources | keyvalue">{{val.key}}
+                                        </option>
+
+                                    </select>
+                                </td>
+                                <td>
+                                    <select class="custom-select">
+                                        <option
+                                            *ngFor="let val of dict?.definition?.sources?.sdnc?.properties['key-dependencies'] ">
+                                            {{val}}</option>
+
+                                    </select>
+                                    <!-- {{ dict.definition.sources }} -->
+                                </td>
+                                <td>{{ dict.definition?.property?.default }}</td>
+                                <td>{{ dict.dataType }}</td>
+                                <td>{{ dict.entrySchema }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
 
             </div>
 
 
         </div>
-
         <div class="template-mapping-action">
             <button class="btn btn-sm btn-outline-secondary">Cancel</button>
-            <button class="btn btn-sm btn-primary">Finish</button>
+            <button (click)="saveToStore()" class="btn btn-sm btn-primary">Finish</button>
         </div>
     </div>
 </div>
 
 
 <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">
@@ -128,11 +168,11 @@
                 </button>
             </div>
             <div class="modal-body">
-                <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
-                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                <ngx-file-drop [accept]="allowedExt" dropZoneLabel="Drop files here" (onFileDrop)="dropped($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
@@ -148,9 +188,9 @@
                 <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>
@@ -158,13 +198,13 @@
 
             <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()" (click)="openListView()">
+                    (click)="uploadFile();openListView()">
                     Import
                 </button>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
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 d63eb2a38..4ab96ee3c 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,36 +1,74 @@
-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';
+import { Component, EventEmitter, OnInit, Output, OnDestroy, ViewChild } from '@angular/core';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../../package-creation.store';
+import { TemplateInfo, TemplateStore } from '../../template.store';
+import { Subject } from 'rxjs';
+import { ResourceDictionary } from '../../mapping-models/ResourceDictionary.model';
+import { DataTableDirective } from 'angular-datatables';
+import { MappingAdapter, Mapping } from '../../mapping-models/mappingAdapter.model';
+import { PackageCreationUtils } from '../../package-creation.utils';
+import { JsonConvert } from 'json2typescript';
 
 @Component({
     selector: 'app-templ-mapp-creation',
     templateUrl: './templ-mapp-creation.component.html',
     styleUrls: ['./templ-mapp-creation.component.css']
 })
-export class TemplMappCreationComponent implements OnInit {
+export class TemplMappCreationComponent implements OnInit, OnDestroy {
     @Output() showListViewParent = new EventEmitter<any>();
 
     public uploadedFiles: FileSystemFileEntry[] = [];
     private fileNames: Set<string> = new Set();
-
+    private jsonConvert = new JsonConvert();
     public files: NgxFileDropEntry[] = [];
     fileName: any;
     templateInfo = new TemplateInfo();
     private variables: string[] = [];
-
-
-    constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
+    private mappingFileValues = [];
+    dtOptions: DataTables.Settings = {};
+    // We use this trigger because fetching the list of persons can be quite long,
+    // thus we ensure the data is fetched before rendering
+    dtTrigger = new Subject();
+    resourceDictionaryRes: ResourceDictionary[] = [];
+    allowedExt = ['.vtl'];
+    @ViewChild(DataTableDirective, { static: false })
+    dtElement: DataTableDirective;
+    MappingAdapter: MappingAdapter;
+    mapping = new Map();
+    templateFileContent: string;
+    templateExt = 'Velcoity';
+
+
+    constructor(
+        private packageCreationStore: PackageCreationStore,
+        private templateStore: TemplateStore,
+        private packageCreationUtils: PackageCreationUtils
+    ) {
     }
 
     ngOnInit() {
         this.templateStore.state$.subscribe(templateInfo => {
+            console.log(templateInfo);
             this.templateInfo = templateInfo;
             this.fileName = templateInfo.fileName.split('/')[1];
-            this.variables = this.getTemplateVariable(templateInfo.fileContent);
         });
+
+        this.dtOptions = {
+            pagingType: 'full_numbers',
+            pageLength: 10,
+            destroy: true,
+            // retrieve: true,
+        };
     }
 
+    getFileExtension() {
+        switch (this.templateExt) {
+            case 'Velcoity': return '.vtl';
+            case 'Koltin': return '.ktl';
+            case 'Jinja': return '.j2';
+            default: return '.vtl';
+        }
+    }
     public getTemplateVariable(fileContent: string) {
         const variables: string[] = [];
         const stringsSlittedByBraces = fileContent.split('${');
@@ -81,21 +119,59 @@ export class TemplMappCreationComponent implements OnInit {
         this.uploadedFiles.splice(fileIndex, 1);*/
     }
 
-    setFilesToStore() {
+    uploadFile() {
+        if (this.allowedExt.includes('.csv')) {
+            this.fetchCSVkeys();
+        } else {
+            this.setTemplateFilesToStore();
+        }
+    }
+
+    fetchCSVkeys() {
         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());
+                    this.variables = fileReader.result.toString().split(',');
+                    console.log(this.variables);
+                    this.getMappingTableFromTemplate(null);
                 };
                 fileReader.readAsText(file);
             });
+        }
+        this.uploadedFiles = [];
+    }
+
+    private convertDictionaryToMap(resourceDictionaries: ResourceDictionary[]): Mapping[] {
+        const mapArray: Mapping[] = [];
+        for (const resourceDictionary of resourceDictionaries) {
+            this.MappingAdapter = new MappingAdapter(resourceDictionary);
+            mapArray.push(this.MappingAdapter.ToMapping());
+        }
+        console.log(mapArray);
+        return mapArray;
+    }
+
+    setTemplateFilesToStore() {
+        for (const droppedFile of this.uploadedFiles) {
+            droppedFile.file((file: File) => {
+                const fileReader = new FileReader();
+                fileReader.onload = (e) => {
+                    this.templateFileContent = fileReader.result.toString();
+                    this.variables = this.getTemplateVariable(this.templateFileContent);
 
+                };
+                fileReader.readAsText(file);
+            });
         }
         this.uploadedFiles = [];
     }
 
+    textChanges(code: any, fileName: string) {
+        //  this.packageCreationStore.addTemplate(fileName, code);
+        this.templateFileContent = code;
+    }
+
     public fileOver(event) {
         console.log(event);
     }
@@ -112,14 +188,52 @@ export class TemplMappCreationComponent implements OnInit {
         this.showListViewParent.emit('tell parent to open create views');
     }
 
-    initTemplateMappingTableFromCurrentTemplate() {
-        console.log('happend');
+    getMappingTableFromTemplate(e) {
+        if (e) { e.preventDefault(); }
         if (this.variables && this.variables.length > 0) {
-            this.packageCreationStore.getTemplateAndMapping(this.variables);
+            console.log('base');
+            this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => {
+                this.resourceDictionaryRes = res;
+                console.log(this.resourceDictionaryRes);
+                this.rerender();
+            });
         }
     }
 
-    textChanges(code: any, fileName: string) {
-        this.packageCreationStore.addTemplate(fileName, code);
+    saveToStore() {
+        if (this.fileName) {
+            // Save Mapping to Store
+            if (this.resourceDictionaryRes) {
+                const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes);
+                this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json',
+                    this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)));
+            }
+            // Save Template to store
+            if (this.templateFileContent) {
+                this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
+                    this.templateFileContent);
+            }
+        } else {
+
+        }
+    }
+
+    rerender(): void {
+        if (this.dtElement.dtInstance) {
+            console.log('rerender');
+            this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+                dtInstance.destroy();
+                this.dtElement.dtOptions = this.dtOptions;
+                this.dtElement.dtTrigger.next();
+                dtInstance.draw();
+            });
+        } else {
+            this.dtTrigger.next();
+        }
+    }
+
+    ngOnDestroy(): void {
+        // Do not forget to unsubscribe the event
+        this.dtTrigger.unsubscribe();
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 7935e12a3..0d56014b5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -1,33 +1,34 @@
-import {NgModule} from '@angular/core';
-import {CommonModule, JsonPipe} from '@angular/common';
-import {ApiService} from '../../../common/core/services/api.typed.service';
-import {PackagesRoutingModule} from './packages.routing.module';
-import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
-import {SharedModulesModule} from '../../shared-modules/shared-modules.module';
-import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
-import {PackageListComponent} from './packages-dashboard/package-list/package-list.component';
-import {DesignerComponent} from './designer/designer.component';
-import {SidebarModule} from 'ng-sidebar';
-import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component';
-import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component';
-import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component';
-import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component';
-import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component';
-import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
-import {FunctionsComponent} from './designer/functions/functions.component';
-import {ActionsComponent} from './designer/actions/actions.component';
-import {PackageCreationComponent} from './package-creation/package-creation.component';
-import {FormsModule} from '@angular/forms';
-import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component';
-import {NgxFileDropModule} from 'ngx-file-drop';
-import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component';
-import {SourceEditorComponent} from './source-editor/source-editor.component';
-import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component';
-import {AceEditorModule} from 'ng2-ace-editor';
-import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component';
-import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component';
+import { NgModule } from '@angular/core';
+import { CommonModule, JsonPipe } from '@angular/common';
+import { ApiService } from '../../../common/core/services/api.typed.service';
+import { PackagesRoutingModule } from './packages.routing.module';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
+import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
+import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
+import { DesignerComponent } from './designer/designer.component';
+import { SidebarModule } from 'ng-sidebar';
+import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
+import { SortPackagesComponent } from './packages-dashboard/sort-packages/sort-packages.component';
+import { PackagesHeaderComponent } from './packages-dashboard/packages-header/packages-header.component';
+import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
+import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+import { ConfigurationDashboardComponent } from './configuration-dashboard/configuration-dashboard.component';
+import { FunctionsComponent } from './designer/functions/functions.component';
+import { ActionsComponent } from './designer/actions/actions.component';
+import { PackageCreationComponent } from './package-creation/package-creation.component';
+import { FormsModule } from '@angular/forms';
+import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component';
+import { SourceEditorComponent } from './source-editor/source-editor.component';
+import { ScriptsTabComponent } from './package-creation/scripts-tab/scripts-tab.component';
+import { AceEditorModule } from 'ng2-ace-editor';
+import { MetadataTabComponent } from './package-creation/metadata-tab/metadata-tab.component';
+import { DslDefinitionsTabComponent } from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component';
 import { TemplMappCreationComponent } from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component';
 import { TemplMappListingComponent } from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component';
+import { DataTablesModule } from 'angular-datatables';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -59,7 +60,8 @@ import { TemplMappListingComponent } from './package-creation/template-mapping/t
         SidebarModule.forRoot(),
         FormsModule,
         NgxFileDropModule,
-        AceEditorModule
+        AceEditorModule,
+        DataTablesModule
     ],
     providers: [ApiService, JsonPipe],
     bootstrap: []