From 1d9cc25a7c3634f787057c0b95b88b0016c862ec Mon Sep 17 00:00:00 2001 From: Ahmedeldeeb50 Date: Tue, 27 Oct 2020 18:16:58 +0200 Subject: enable editing in mapping table Issue-ID: CCSDK-2795 Signed-off-by: Ahmedeldeeb50 Change-Id: I724dee3bd4a4778bf86619ff08091b31925c1830 --- .../mapping-models/mappingAdapter.model.ts | 21 +++- .../templ-mapp-creation.component.html | 119 +++--------------- .../templ-mapp-creation.component.ts | 133 +++++++++++---------- .../source-editor/source-editor.component.ts | 5 +- cds-ui/designer-client/src/styles.css | 8 +- 5 files changed, 112 insertions(+), 174 deletions(-) (limited to 'cds-ui/designer-client') 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 index e63b17fa2..a994da4a3 100644 --- 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 @@ -1,5 +1,5 @@ import { ResourceDictionary } from './ResourceDictionary.model'; -import { JsonObject, JsonProperty, JsonConvert } from 'json2typescript'; +import { JsonObject, JsonProperty } from 'json2typescript'; // Convert ResourceDictionary object to store Mapping. export class MappingAdapter { @@ -14,17 +14,26 @@ export class MappingAdapter { const mapping = new Mapping(); mapping.name = this.resourceDictionary.name; mapping.dictionaryName = this.resourceDictionary.name; + // move all properties at once mapping.property = Object.assign({}, this.resourceDictionary.definition.property); - mapping.inputParam = this.resourceDictionary['input-param'] || false; - // tslint:disable-next-line: no-string-literal - mapping.property['required'] = this.resourceDictionary['required'] || false; + mapping.inputParam = this.resourceDictionary.definition.property['input-param'] || false; + // for reading + mapping.sources = this.resourceDictionary.definition.sources; + console.log(mapping.sources); + mapping.version = 0; + return mapping; + } + + // Get the final object to save + finalize(mapping: Mapping): Mapping { + mapping.dictionarySource = this.dependanciesSource.get(mapping.name); if (this.dependancies.get(mapping.name)) { mapping.dependencies = this.dependancies.get(mapping.name); } else { mapping.dependencies = []; } - mapping.version = 0; + delete mapping.sources; return mapping; } } @@ -39,6 +48,8 @@ export class Mapping { inputParam: boolean; @JsonProperty('dictionary-name') dictionaryName: string; + @JsonProperty(true) + sources: string[]; @JsonProperty('dictionary-source') dictionarySource: string; @JsonProperty() 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 256789586..7aaf1a3ab 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 @@ -129,14 +129,14 @@ -
+
+ [checked]="mappingRes.length>0&&mappingRes.length === this.selectedProps.size">
{{selectedProps.size}} selected - ({{resourceDictionaryRes.length}} attributes in total) + ({{mappingRes.length}} attributes in total)
- + Filter @@ -174,8 +174,8 @@
+ (ngModelChange)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))" + [ngModel]="dict?.property?.required" id="requiredCheck-{{dict.name}}">
@@ -186,8 +186,8 @@
+ (ngModelChange)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))" + [ngModel]="dict['input-param']" id="inputCheck-{{dict.name}}">
@@ -206,12 +206,15 @@ Dictionary Source - + - + + @@ -224,7 +227,7 @@ Default - {{ dict.definition?.property?.default }} + {{ dict?.property?.default }} @@ -237,12 +240,13 @@ Data Type - {{ dict.definition?.property?.type }} + {{ dict?.property?.type }} Entry Schema - {{dict.definition?.property['entry_schema']}} + {{objectToString(dict?.property['entry_schema'])}} + @@ -253,93 +257,6 @@
- -
-
- - - Filter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Required - - - Template Input - - - Parameter Name {{dict['name'] }} Dictionary Name {{dict['name'] }} Dictionary Source - - Dependancies - - Default {{dict['property']['default']}} Velocity - - {{dict?.property?.metadata['transform-template']}} - - - Data Type {{ dict['property']['type'] }} Entry Schema {{dict['property']['entry_schema']}}
No data matching the filter "{{input.value}}"
-
-
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 a26f3b90e..4087dee3e 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 @@ -51,7 +51,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI templateExt = 'vtl'; dependancies = new Map>(); dependanciesSource = new Map(); - mappingRes = []; + mappingRes: Mapping[] = []; currentTemplate: any; currentMapping: any; edit = false; @@ -73,9 +73,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI // displayedColumns: string[] = ['id', 'name', 'progress', 'color']; dataSource: MatTableDataSource<{}>; initDataSource: MatTableDataSource<{}>; - // dataSource = new MatTableDataSource(); - @ViewChild('paginate', { static: true }) paginator: MatPaginator; - @ViewChild('sort', { static: true }) sort: MatSort; @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator; @ViewChild(MatSort, { static: true }) initSort: MatSort; @@ -93,8 +90,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI ngAfterViewInit() { try { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; this.initDataSource.paginator = this.initPaginator; this.initDataSource.sort = this.initSort; } catch (e) { } @@ -115,16 +110,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('-')); } if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { + console.log(templateInfo.mapping); this.mappingRes = templateInfo.mapping; this.currentMapping = Object.assign({}, templateInfo); this.resourceDictionaryRes = []; // Assign the data to the data source for the table to render - this.dataSource = new MatTableDataSource(this.mappingRes); - // this.cdr.detectChanges(); - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - - + this.rerender(); } else { this.mappingRes = []; this.currentMapping = Any; @@ -165,9 +156,22 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } + initApplyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.initDataSource.filter = filterValue.trim().toLowerCase(); + if (this.initDataSource.paginator) { + this.initDataSource.paginator.firstPage(); + } + } setProp(e, propName, index) { - this.resourceDictionaryRes[index][propName] = e.checked; - console.log(this.resourceDictionaryRes[index]); + if (propName === 'input-param') { + this.mappingRes[index][propName] = e.checked; + + } else { + // tslint:disable-next-line: no-string-literal + this.mappingRes[index]['property'][propName] = e.checked; + } + // console.log(this.mappingRes[index]); } selectProp(value) { console.log(value); @@ -178,29 +182,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } } - applyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.dataSource.filter = filterValue.trim().toLowerCase(); - if (this.dataSource.paginator) { - this.dataSource.paginator.firstPage(); - } - } - - initApplyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.initDataSource.filter = filterValue.trim().toLowerCase(); - if (this.initDataSource.paginator) { - this.initDataSource.paginator.firstPage(); - } - } - removeProps() { console.log(this.selectedProps); this.selectedProps.forEach(prop => { - this.resourceDictionaryRes.forEach((res, index) => { + this.mappingRes.forEach((res, index) => { if (res.name === prop) { console.log('delete...'); - this.resourceDictionaryRes.splice(index, 1); + this.mappingRes.splice(index, 1); this.selectedProps.delete(prop); this.rerender(); } @@ -208,11 +196,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI }); } selectAllProps() { - if (this.resourceDictionaryRes.length === this.selectedProps.size) { + // if all items are already selected, unselect them + if (this.mappingRes.length === this.selectedProps.size) { this.selectedProps = new Set(); } else { - this.resourceDictionaryRes.forEach(prop => { - console.log(prop); + this.mappingRes.forEach(prop => { + // console.log(prop); this.selectedProps.add(prop.name); }); } @@ -224,8 +213,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI console.log('base'); this.packageCreationService.getTemplateAndMapping([...this.selectedProps]).subscribe(res => { let message = 'Re-Auto mapping'; - this.mappingRes = []; - currentResDictionary = res; + // this.mappingRes = []; + currentResDictionary = this.convertDictionaryToMap(res); console.log(currentResDictionary); if (currentResDictionary && currentResDictionary.length <= 0) { message = 'No values for those attributes'; @@ -233,14 +222,15 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI // 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; + for (let i = 0; i < this.mappingRes.length; i++) { + if (this.mappingRes[i].name === curr.name) { + this.mappingRes[i] = curr; } } }); this.rerender(); this.toastr.success(message, 'Success'); + this.selectedProps = new Set(); }, err => { this.toastr.error('Error'); }); @@ -346,6 +336,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI return mapArray; } + private finalMapping(mappingArray: Mapping[]): Mapping[] { + const mapArray: Mapping[] = []; + for (const mapping of mappingArray) { + this.MappingAdapter = new MappingAdapter(null, this.dependancies, this.dependanciesSource); + mapArray.push(this.MappingAdapter.finalize(mapping)); + console.log(mapping); + } + console.log(mapArray); + return mapArray; + } + setTemplateFilesToStore() { for (const droppedFile of this.uploadedFiles) { droppedFile.file((file: File) => { @@ -393,10 +394,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI 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'] = { + this.mappingRes[index].property['metadata'] = { 'transform-template': value }; console.log(this.resourceDictionaryRes[index]); @@ -417,6 +416,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI this.mappingRes = []; this.resourceDictionaryRes = res; console.log(this.resourceDictionaryRes); + this.mappingRes = this.convertDictionaryToMap(this.resourceDictionaryRes); + console.log(this.mappingRes); this.rerender(); if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) { message = 'No values for those attributes'; @@ -448,6 +449,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI cancel() { this.openListView(); } + + objectToString(object) { + if (object) { + return JSON.stringify(object); + } + return ''; + } saveToStore() { const filename = this.fileName; if (filename) { @@ -455,16 +463,23 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI console.log('----------- mode ' + this.edit); const fileContent = this.templateFileContent; if ( - (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json') - || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension()))) + (!(this.packageCreationStore.fileExist('Templates/' + filename + '-mapping.json') + || this.packageCreationStore.fileExist('Templates/' + filename + '-template' + this.getFileExtension()))) || this.edit ) { // Save Mapping to Store - if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { - const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); - this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', - this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); - this.resourceDictionaryRes = []; + if (this.mappingRes && this.mappingRes.length > 0) { + const mapArray = this.finalMapping(this.mappingRes); + console.log(mapArray); + // this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))) + if (this.edit) { + this.packageCreationStore.addMapping('Templates/' + filename + '-mapping.json', + JSON.stringify(mapArray)); + } else { + this.packageCreationStore.addMapping('Templates/' + filename + '-mapping.json', + this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); + } + this.mappingRes = []; } // Save Template to store // if (this.templateFileContent) { @@ -493,7 +508,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI let keyDepend = null; this.dependancies.set(dict.name, null); try { - keyDepend = dict.definition.sources[source].properties['key-dependencies'] || null; + keyDepend = dict.sources[source].properties['key-dependencies'] || null; } catch (e) { } console.log(dict); console.log(source); @@ -517,13 +532,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } rerender(): void { - this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes); - // this.cdr.detectChanges(); + this.initDataSource = new MatTableDataSource(this.mappingRes); /* Hint: the intial page size for the table will be the result size; I did that because the table doesn't load element in DOM, as result some function are not working well like save and you have to move to other pages to fix that. */ - this.initPaginator.pageSize = this.resourceDictionaryRes.length; + this.initPaginator.pageSize = this.mappingRes.length; this.initDataSource.paginator = this.initPaginator; this.initDataSource.sort = this.initSort; } @@ -536,14 +550,3 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } } -class DependancyVal { - source: string; - keyDepend: any; - constructor( - source: string, - keyDepend: any - ) { - this.source = source; - this.keyDepend = keyDepend; - } -} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts index 977bf97e7..f0b99bff1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts @@ -25,16 +25,17 @@ export class SourceEditorComponent implements OnInit, AfterViewInit { ngAfterViewInit() { - console.log(this.lang); this.editor.setTheme('eclipse'); this.editor.getEditor().setOptions({ enableBasicAutocompletion: true, highlightSelectedWord: true, - maxLines: Infinity, enableSnippets: true, enableLiveAutocompletion: true, showFoldWidgets: true, + maxLines: 900000, + // autoScrollEditorIntoView: true, + // vScrollBarAlwaysVisible: true }); this.editor.getEditor().commands.addCommand({ diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 8b576db2e..0a3a4cc89 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -2938,6 +2938,11 @@ animation: glowing 1500ms infinite; position: absolute; top: 13px; } +/* -------- ace editor style -------- */ +.editor-container{ + height: 55vh !important; + overflow: scroll; +} .ace_print-margin{ left: 100% !important; background: #eee !important; @@ -2946,7 +2951,7 @@ animation: glowing 1500ms infinite; width: 100% !important; } .ace_editor{ - height: 55vh !important; + /* height: 55vh !important; */ line-height: 25px; border: 1px solid #ECEDF2; background-color: #fff; @@ -2967,6 +2972,7 @@ animation: glowing 1500ms infinite; .ace-tm .ace_marker-layer .ace_active-line{ background: #F4F9FE !important; } +/* -------- end of ace editor style -------- */ .breadcrumb-header{ padding: 0px; margin: 0px; -- cgit 1.2.3-korg