Merge "enable editing in mapping table"

5 files changed, 112 insertions, 174 deletions

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 @@
 
                 </div>
 
-                <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2">
+                <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
                     <div class="mat-elevation-z8">
                         <!--Edit Buttons-->
                         <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">
+                                    [checked]="mappingRes.length>0&&mappingRes.length === this.selectedProps.size">
                                 <label class="custom-control-label" for="customCheck1"></label>
                             </div>
                             <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()"
@@ -146,10 +146,10 @@
                                     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>
+                                <span>({{mappingRes.length}} attributes in total)</span>
                             </div>
                         </div>
-                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.resourceDictionaryRes.length]">
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.mappingRes.length]">
                         </mat-paginator>
                         <mat-form-field class="tableFilter float-right">
                             <mat-label>Filter</mat-label>
@@ -174,8 +174,8 @@
                                 <td mat-cell *matCellDef="let dict">
                                     <div class="custom-control custom-checkbox reuiredInput">
                                         <input type="checkbox" class="custom-control-input" #requiredInput
-                                            (click)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))"
-                                            id="requiredCheck-{{dict.name}}">
+                                            (ngModelChange)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))"
+                                            [ngModel]="dict?.property?.required" id="requiredCheck-{{dict.name}}">
                                         <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label>
                                     </div>
                                 </td>
@@ -186,8 +186,8 @@
                                 <td mat-cell *matCellDef="let dict">
                                     <div class="custom-control custom-checkbox reuiredInput">
                                         <input type="checkbox" class="custom-control-input" #tempInput
-                                            (click)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))"
-                                            id="inputCheck-{{dict.name}}">
+                                            (ngModelChange)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))"
+                                            [ngModel]="dict['input-param']" id="inputCheck-{{dict.name}}">
                                         <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label>
                                     </div>
                                 </td>
@@ -206,12 +206,15 @@
                             <ng-container matColumnDef="dictionary-source">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
                                 <td mat-cell *matCellDef="let dict">
-                                    <select class="custom-select" (click)="selectSource(dict,$event)">
-                                        <option *ngFor="let val of dict.definition.sources | keyvalue">
+                                    <select *ngIf="dict.sources" class="custom-select"
+                                        (click)="selectSource(dict,$event)">
+                                        <option *ngFor="let val of dict.sources | keyvalue">
                                             {{initMap(dict.name,val)}}
                                         </option>
-
                                     </select>
+                                    <input [disabled]="true" *ngIf="!dict.sources" type="text" class="form-control"
+                                        [ngModel]="dict['dictionary-source']">
+
                                 </td>
                             </ng-container>
                             <!-- Dependancies Column -->
@@ -224,7 +227,7 @@
                             <!-- Default Column -->
                             <ng-container matColumnDef="default">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
-                                <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td>
+                                <td mat-cell *matCellDef="let dict"> {{ dict?.property?.default }} </td>
                             </ng-container>
                             <!-- Velocity Column -->
                             <ng-container matColumnDef="Velocity">
@@ -237,12 +240,13 @@
                             <!-- Data Type Column -->
                             <ng-container matColumnDef="Data Type">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
-                                <td mat-cell *matCellDef="let dict"> {{  dict.definition?.property?.type  }} </td>
+                                <td mat-cell *matCellDef="let dict"> {{  dict?.property?.type  }} </td>
                             </ng-container>
                             <!-- Entry Schema Column -->
                             <ng-container matColumnDef="Entry Schema">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td>
+                                <td mat-cell *matCellDef="let dict"> {{objectToString(dict?.property['entry_schema'])}}
+                                </td>
                             </ng-container>
                             <tr mat-header-row *matHeaderRowDef="initColumn"></tr>
                             <tr mat-row *matRowDef="let row; columns: initColumn;"></tr>
@@ -253,93 +257,6 @@
                         </table>
                     </div>
                 </div>
-                <!------ View Table------->
-                <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
-                    <div class="mat-elevation-z8">
-                        <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>
-                        <mat-form-field class="tableFilter float-right">
-                            <mat-label>Filter</mat-label>
-                            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
-                        </mat-form-field>                        
-                        <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort>
-                            <!-- Required Column -->
-                            <ng-container matColumnDef="Required">
-                                <th mat-header-cell *matHeaderCellDef> Required </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <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>
-                            </ng-container>
-                            <!-- Template Input Column -->
-                            <ng-container matColumnDef="Template Input">
-                                <th mat-header-cell *matHeaderCellDef> Template Input </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <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>
-                            </ng-container>
-                            <!-- Parameter Name Column -->
-                            <ng-container matColumnDef="name">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
-                            </ng-container>
-                            <!-- Dictionary Name Column -->
-                            <ng-container matColumnDef="Dictionary Name">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
-                            </ng-container>
-                            <!-- Dictionary Source Column -->
-                            <ng-container matColumnDef="dictionary-source">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <input type="text" class="form-control" [value]="dict['dictionary-source']"
-                                        disabled>
-                                </td>
-                            </ng-container>
-                            <!-- Dependancies Column -->
-                            <ng-container matColumnDef="dependencies">
-                                <th mat-header-cell *matHeaderCellDef> Dependancies </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <input type="text" class="form-control" [value]="dict['dependencies']" disabled>
-                                </td>
-                            </ng-container>
-                            <!-- default Column -->
-                            <ng-container matColumnDef="default">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td>
-                            </ng-container>
-                            <!-- Velocity Column -->
-                            <ng-container matColumnDef="Velocity">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
-                                <td mat-cell *matCellDef="let dict">
-                                    <span *ngIf="dict?.property?.metadata">
-                                        {{dict?.property?.metadata['transform-template']}}
-                                    </span>
-                                    <span *ngIf="!dict?.property?.metadata"></span>
-                                </td>
-
-
-
-                            </ng-container>
-                            <!-- Data Type Column -->
-                            <ng-container matColumnDef="Data Type">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
-                                <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td>
-                            </ng-container>
-                            <!-- Entry Schema Column -->
-                            <ng-container matColumnDef="Entry Schema">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
-                                <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td>
-                            </ng-container>
-                            <tr mat-header-row *matHeaderRowDef="resColumns"></tr>
-                            <tr mat-row *matRowDef="let row; columns: resColumns;"></tr>
-                            <!-- Row shown when there is no matching data. -->
-                            <tr class="mat-row" *matNoDataRow>
-                                <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
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<string, Array<string>>();
     dependanciesSource = new Map<string, string>();
-    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<string>();
         } 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;