1 files changed, 132 insertions, 18 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.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();
     }
 }