diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation')
3 files changed, 232 insertions, 86 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts deleted file mode 100644 index 17a4bfae6..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum TemplateType { - Velocity = 'vtl', - Koltin = 'kt', - Jinja = 'Unknown' -} 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 4b0ef8b49..de97a4679 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 @@ -5,12 +5,14 @@ class="fa fa-chevron-left mr-2"></i>Template List</button> </div> <div class="col text-right"> + <button (click)="cancel()" [hidden]="!templatesExist || edit" class="btn btn-outline-danger" + title="Delete Template">Cancel</button> <button data-toggle="modal" [hidden]="!edit" data-target="#templateDeletionModal2" class="btn btn-outline-danger" title="Delete Template">Delete</button> - <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit" + <button (click)="clear()" [hidden]="fileName?.length <=0 || edit" class="btn btn-outline-secondary">Clear</button> - <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close" - class="btn btn-primary">Finish</button> + <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" + title="Submit template and close" class="btn btn-primary">Finish</button> </div> </div> <div class="card creat-card"> @@ -31,8 +33,8 @@ <div class="card"> <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"> + <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" id="templateTab" + aria-expanded="true" aria-controls="collapseOne"> 1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span> </button> @@ -44,24 +46,25 @@ <div tourAnchor="tm-templateType" class="single-line"> <label class="label-name">Template Type</label> <div class="label-input"> - <label name="trst" (click)="allowedExt=['.vtl']"> + <label name="trst" (click)="allowedExt=['.vtl'];templateExt='vtl'"> <input class="form-check-input" [(ngModel)]="templateExt" type="radio" - name="exampleRadios" id="exampleRadios1" value=Velcoity> + name="exampleRadios" id="exampleRadios1" value=vtl> <span> - Velcoity + Velocity </span> </label> - <label name="trst" (click)="allowedExt=['.j2','.jinja2']"> + <label name="trst" (click)="allowedExt=['.j2','.jinja2'];templateExt='j2'"> <input class="form-check-input" [(ngModel)]="templateExt" type="radio" - name="exampleRadios" id="exampleRadios1" value=Jinja> + name="exampleRadios" id="exampleRadios1" value=j2> <span> Jinja </span> </label> - <label tourAnchor="tm-templateContent" name="trst" (click)="allowedExt=['.kt']"> + <label tourAnchor="tm-templateContent" name="trst" + (click)="allowedExt=['.kt'];templateExt='kt'"> <input class="form-check-input" [(ngModel)]="templateExt" type="radio" - name="exampleRadios" id="exampleRadios1" value=Kotlin> + name="exampleRadios" id="exampleRadios1" value=kt> <span> Kotlin @@ -70,7 +73,7 @@ </div> </div> <div class="create-template-import">Use the editor to add parameters or you can also - <a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]" + <a href="#" data-toggle="modal" (click)="allowedExt=['.'+templateExt]" data-target="#templateModal"><b>Import File</b></a>. <br /> <span class="templateNote"><i class="icon-info" aria-hidden="true"></i> When you import new file, the new attributes will replace @@ -86,8 +89,9 @@ <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> - <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" + data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" + aria-controls="collapseTwo"> 2. Manage Mapping <span class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span> </button> @@ -97,8 +101,8 @@ <div class="card-body"> <p class="text-center"><b>Select a source to load config parameters</b></p> <div class="text-center"> - <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)" - (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0 + <button [disabled]="!(templateFileContent?.trim()?.length > 0)" + (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="templateFileContent?.trim()?.length > 0 ?'hover-enable':'hover-disable'"> <i class="icon-use-attributes"></i> <br /> @@ -122,28 +126,68 @@ </div> + </div> + <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2"> + <div class="btn-group mapping-editBar" role="group"> + <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> + <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" + id="customCheck1" + [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + <label class="custom-control-label" for="customCheck1"></label> + </div> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" + tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" + tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> + <div style="line-height: 35px;font-size: 10px;"> + <span>{{selectedProps.size}} selected </span> + <span>({{resourceDictionaryRes.length}} attributes in total)</span> + </div> + </div> <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover"> <thead> <tr> + <th></th> <th>Required</th> + <th>Template Input</th> <th>Parameter Name</th> <th>Dictionary Name</th> <th>Dictionary Source</th> <th>Dependancies</th> <th>Default</th> + <th>Velocity</th> <th>Data Type</th> <th>Entry Schema</th> </tr> </thead> <tbody> - <tr *ngFor="let dict of resourceDictionaryRes"> + <tr *ngFor="let dict of resourceDictionaryRes;let i=index;trackBy: identify"> + <td> + <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom"> + <input type="checkbox" class="custom-control-input" + id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"> + <label class="custom-control-label" for="customCheck-{{dict.name}}"></label> + </div> + <!-- <input type="checkbox" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"></td> --> + </td> <td> - <img *ngIf="dict.definition?.property?.required" - src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict.definition?.property?.required" - src="/assets/img/icon-required-no.svg"> + <div class="custom-control custom-checkbox reuiredInput"> + <input type="checkbox" class="custom-control-input" #requiredInput + (click)="setProp(requiredInput,'required',i)" + id="requiredCheck-{{dict.name}}"> + <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label> + </div> + </td> + <td> + <div class="custom-control custom-checkbox reuiredInput"> + <input type="checkbox" class="custom-control-input" #tempInput + (click)="setProp(tempInput,'input-param',i)" id="inputCheck-{{dict.name}}"> + <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label> + </div> </td> <td>{{ dict.name }}</td> <td>{{ dict.name }}</td> @@ -159,12 +203,13 @@ <!-- <select class="custom-select"> <option *ngFor="let val of getKeys(dependancies)"> {{ getValue(dict.name)}}</option> - </select> --> <input type="text" class="form-control" [ngModel]="getValue(dict.name)"> <!-- {{ dict.definition.sources }} --> </td> <td>{{ dict.definition?.property?.default }}</td> + <td><input type="text" class="form-control" #velocity + (input)="setVelocity(i,velocity.value)"></td> <td>{{ dict.definition?.property?.type }}</td> <td>{{ dict.definition?.property['entry_schema'] }}</td> </tr> @@ -173,26 +218,51 @@ </div> <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> + <!-- <div class="btn-group mapping-editBar" role="group"> + <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> + <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" + id="customCheck2" + [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + <label class="custom-control-label" for="customCheck2"></label> + </div> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" + tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" + tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> + </div> --> <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover"> <thead> <tr> + <!-- <th></th> --> <th>Required</th> + <th>Template Input</th> <th>Parameter Name</th> <th>Dictionary Name</th> <th>Dictionary Source</th> <th>Dependancies</th> <th>Default</th> + <th>Velocity</th> <th>Data Type</th> <th>Entry Schema</th> </tr> </thead> <tbody> <tr *ngFor="let dict of mappingRes"> + <!-- <td> + <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom"> + <input type="checkbox" class="custom-control-input" + id="customCheck2-{{dict.name}}" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"> + <label class="custom-control-label" for="customCheck2-{{dict.name}}"></label> + </div> + </td> --> <td> - <img *ngIf="dict.definition?.property?.required" - src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict.definition?.property?.required" - src="/assets/img/icon-required-no.svg"> + <img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg"> + </td> + <td> + <img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg"> + <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg"> </td> <td>{{ dict['name'] }}</td> <td>{{ dict['name'] }}</td> @@ -206,6 +276,10 @@ <!-- {{ dict.definition.sources }} --> </td> <td>{{ dict['property']['default'] }}</td> + <td *ngIf="dict?.property?.metadata"> + {{dict?.property?.metadata['transform-template']}} + </td> + <td *ngIf="!dict?.property?.metadata"></td> <td>{{ dict['property']['type'] }}</td> <td>{{ dict['property']['entry_schema'] }}</td> </tr> 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 3e7cfea7b..56ed0422a 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 @@ -10,8 +10,11 @@ import { PackageCreationUtils } from '../../package-creation.utils'; import { JsonConvert, Any } from 'json2typescript'; import { ToastrService } from 'ngx-toastr'; import { SharedService } from '../shared-service'; -import { XmlParser } from '../utils/XmlParser'; +import { XmlParser } from '../utils/ParserFactory/XmlParser'; import { TourService } from 'ngx-tour-md-menu'; +import { PackageCreationService } from '../../package-creation.service'; +import { ParserFactory } from '../utils/ParserFactory/ParserFactory'; +import { TemplateType, FileExtension } from '../utils/TemplateType'; declare var $: any; @Component({ @@ -42,14 +45,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { MappingAdapter: MappingAdapter; mapping = new Map(); templateFileContent: string; - templateExt = 'Velcoity'; + templateExt = 'vtl'; dependancies = new Map<string, Array<string>>(); dependanciesSource = new Map<string, string>(); mappingRes = []; currentTemplate: any; currentMapping: any; edit = false; + templatesExist = false; fileToDelete: any = {}; + parserFactory: ParserFactory; + selectedProps: Set<string>; constructor( private packageCreationStore: PackageCreationStore, @@ -57,11 +63,14 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { private packageCreationUtils: PackageCreationUtils, private toastr: ToastrService, private sharedService: SharedService, + private packageCreationService: PackageCreationService, private tourService: TourService, ) { } ngOnInit() { + this.selectedProps = new Set<string>(); + this.parserFactory = new ParserFactory(); this.templateStore.state$.subscribe(templateInfo => { // init Template&mapping vars console.log('Oninit'); @@ -70,7 +79,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.fileToDelete = templateInfo.fileName; this.fileName = templateInfo.fileName.split('/')[1]; if (this.fileName) { - this.fileName = this.fileName.split('-')[0]; + this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('-')); } if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { this.mappingRes = templateInfo.mapping; @@ -80,20 +89,27 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } else { this.mappingRes = []; this.currentMapping = Any; + this.resourceDictionaryRes = []; } this.templateFileContent = templateInfo.fileContent; + this.templateExt = this.templateInfo.ext || this.templateExt; this.currentTemplate = Object.assign({}, templateInfo); if (templateInfo.type === 'template' || templateInfo.type.includes('template')) { - this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl'; + console.log('template extension ' + this.templateExt); + this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.' + this.templateExt; + console.log(this.currentTemplate.fileName); } else { this.currentTemplate = Any; } }); + this.sharedService.isEdit().subscribe(res => { - console.log('------------------------'); + console.log('------------------------....'); + this.templatesExist = this.packageCreationStore.state.templates.files.size > 0 + || this.packageCreationStore.state.mapping.files.size > 0; console.log(res); this.edit = res; @@ -113,6 +129,14 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { pageLength: 25, destroy: true, retrieve: true, + columnDefs: [ + { + targets: [0, 1, 2], // column or columns numbers + orderable: false, // set orderable for selected columns + searchable: false, + }, + + ], }; this.dtOptions = { pagingType: 'full_numbers', @@ -122,13 +146,79 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { }; } + setProp(e, propName, index) { + this.resourceDictionaryRes[index][propName] = e.checked; + console.log(this.resourceDictionaryRes[index]); + } + selectProp(value) { + console.log(value); + if (this.selectedProps.has(value)) { + this.selectedProps.delete(value); + } else { + this.selectedProps.add(value); + } + } + + removeProps() { + console.log(this.selectedProps); + this.selectedProps.forEach(prop => { + this.resourceDictionaryRes.forEach((res, index) => { + if (res.name === prop) { + console.log('delete...'); + this.resourceDictionaryRes.splice(index, 1); + this.selectedProps.delete(prop); + } + }); + }); + } + selectAllProps() { + if (this.resourceDictionaryRes.length === this.selectedProps.size) { + this.selectedProps = new Set<string>(); + } else { + this.resourceDictionaryRes.forEach(prop => { + console.log(prop); + this.selectedProps.add(prop.name); + }); + } + + } + reMap() { + let currentResDictionary = []; + if (this.selectedProps && this.selectedProps.size > 0) { + console.log('base'); + this.packageCreationService.getTemplateAndMapping([...this.selectedProps]).subscribe(res => { + let message = 'Re-Auto mapping'; + this.mappingRes = []; + currentResDictionary = res; + console.log(currentResDictionary); + if (currentResDictionary && currentResDictionary.length <= 0) { + message = 'No values for those attributes'; + } + + // Replcae new values with the old ones + currentResDictionary.forEach(curr => { + for (let i = 0; i < this.resourceDictionaryRes.length; i++) { + if (this.resourceDictionaryRes[i].name === curr.name) { + this.resourceDictionaryRes[i] = curr; + } + } + }); + this.rerender(); + this.toastr.success(message, 'Success'); + }, err => { + this.toastr.error('Error'); + }); + } + + } + getFileExtension() { switch (this.templateExt) { - case 'Velcoity': + case 'vtl': return '.vtl'; - case 'Koltin': + case 'kt': return '.ktl'; - case 'Jinja': + case 'j2': return '.j2'; default: return '.vtl'; @@ -141,34 +231,10 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } public getTemplateVariable(fileContent: string) { - const variables: string[] = []; - const stringsSlittedByBraces = fileContent.split('${'); - const stringsDefaultByDollarSignOnly = fileContent.split('"$'); - - for (let i = 1; i < stringsSlittedByBraces.length; i++) { - const element = stringsSlittedByBraces[i]; - if (element) { - const firstElement = element.split('}')[0]; - if (!variables.includes(firstElement)) { - variables.push(firstElement); - } else { - console.log(firstElement); - } - } - } - - for (let i = 1; i < stringsDefaultByDollarSignOnly.length; i++) { - const element = stringsDefaultByDollarSignOnly[i]; - if (element && !element.includes('$')) { - const firstElement = element.split('"')[0] - .replace('{', '') - .replace('}', '').trim(); - if (!variables.includes(firstElement)) { - variables.push(firstElement); - } - } - } - return variables; + // TODO: implement factory Pattern for parser + console.log('start parsing........ ' + this.templateExt); + const parser = this.parserFactory.getParser(fileContent, this.templateExt); + return parser.getVariables(fileContent); } public dropped(files: NgxFileDropEntry[]) { @@ -224,7 +290,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { const parser = new XmlParser(); this.variables = parser.getVariables(fileReader.result.toString()); } - console.log(this.variables); + console.log('variables = ' + this.variables); this.getMappingTableFromTemplate(null); }; @@ -250,7 +316,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { const fileReader = new FileReader(); fileReader.onload = (e) => { this.templateFileContent = fileReader.result.toString(); - this.variables = this.getTemplateVariable(this.templateFileContent); + // this.variables = this.getTemplateVariable(this.templateFileContent); + // console.log(this.variables); }; fileReader.readAsText(file); @@ -286,15 +353,30 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.showCreationView.emit('close create form and open list'); } + identify(index, item) { + return item.name; + } + setVelocity(index, value) { + // console.log('velocity value = ' + value); + // console.log(this.resourceDictionaryRes[index]); + // tslint:disable-next-line: no-string-literal + this.resourceDictionaryRes[index].definition.property['metadata'] = { + 'transform-template': value + }; + console.log(this.resourceDictionaryRes[index]); + } + getMappingTableFromTemplate(e) { console.log('-' + this.templateFileContent + '-'); this.resourceDictionaryRes = []; if (e) { e.preventDefault(); } + this.variables = this.getTemplateVariable(this.templateFileContent); + console.log('variables = ' + this.variables); if (this.variables && this.variables.length > 0) { console.log('base'); - this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => { + this.packageCreationService.getTemplateAndMapping(this.variables).subscribe(res => { let message = 'Attributes are Fetched'; this.mappingRes = []; this.resourceDictionaryRes = res; @@ -307,6 +389,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { }, err => { this.toastr.error('Error'); }); + } else { + this.toastr.error('Empty or Invalid file format. Validate your file first'); } } @@ -316,7 +400,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } return map.key; } - cancel() { + clear() { this.fileName = ''; this.templateFileContent = ''; this.resourceDictionaryRes = []; @@ -325,6 +409,9 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.currentTemplate = {}; // this.closeCreationForm(); } + cancel() { + this.openListView(); + } saveToStore() { if (this.fileName) { // check file duplication @@ -350,8 +437,9 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.fileName = ''; this.toastr.success('File is created', 'success'); this.openListView(); - console.log(this.tourService.getStatus()); - this.tourService.goto('tm-templateEdit'); + if (localStorage.getItem('tour-guide') !== 'end' && localStorage.getItem('tour-guide') !== 'false') { + this.tourService.goto('tm-templateEdit'); + } } else { console.log('this file already exist'); this.toastr.error('File name already exist', 'Error'); @@ -392,24 +480,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { rerender(): void { this.dtTrigger.next(); - - // 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(); this.resTableDtTrigger.unsubscribe(); + // this.templateStore.unsubscribe(); } } |