diff options
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: [] |