diff options
author | 2020-02-24 20:10:40 +0200 | |
---|---|---|
committer | 2020-02-25 22:34:59 +0200 | |
commit | e70a0e413947cc3e5e21d041f0ed3d7582b44d7a (patch) | |
tree | c9d769d4ab2251f38a23ef6c771c713941d244c3 /cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts | |
parent | 568ff4d867dd09c087246fe7cc343c1d581e6255 (diff) |
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
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts')
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts | 150 |
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(); } } |