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 | |
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')
2 files changed, 205 insertions, 51 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.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(); } } |