From e70a0e413947cc3e5e21d041f0ed3d7582b44d7a Mon Sep 17 00:00:00 2001
From: Ahmed <ahmedeldeeb2013@yahoo.com>
Date: Mon, 24 Feb 2020 20:10:40 +0200
Subject: 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
---
 .../templ-mapp-creation.component.html             | 106 ++++++++++-----
 .../templ-mapp-creation.component.ts               | 150 ++++++++++++++++++---
 2 files changed, 205 insertions(+), 51 deletions(-)

(limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping')

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();
     }
 }
-- 
cgit 1.2.3-korg