Fix editor highlight.

Issue-ID: CCSDK-2471

Signed-off-by: AhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I8a78dc9c8989a933d8812c2ded7a03899800612d

3 files changed, 15 insertions, 11 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 99b085507..5dadaae72 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,7 +5,7 @@
                 class="fa fa-chevron-left mr-2"></i>Template List</button>
     </div>
     <div class="col text-right">
-        <button (click)="cancel()" [disabled]="fileName?.length <=0" class="btn btn-outline-secondary">Cancel</button>
+        <button (click)="cancel()" [hidden]="fileName?.length <=0" class="btn btn-outline-secondary">Clear</button>
         <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Finish</button>
     </div>
 </div>
@@ -70,7 +70,7 @@
                             data-target="#templateModal"><b>Import
                                 File</b></a></div>
                     <div class="editor-container mb-4">
-                        <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
+                        <app-source-editor [lang]="'velocity'" (textChange)="textChanges($event,templateInfo.fileName)"
                             [(text)]="templateFileContent"></app-source-editor>
                     </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 5feb76e06..334b3f484 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
@@ -9,7 +9,6 @@ import { Mapping, MappingAdapter } from '../../mapping-models/mappingAdapter.mod
 import { PackageCreationUtils } from '../../package-creation.utils';
 import { JsonConvert, Any } from 'json2typescript';
 import { ToastrService } from 'ngx-toastr';
-import { ActivatedRoute } from '@angular/router';
 import { SharedService } from '../shared-service';
 declare var $: any;
 
@@ -54,16 +53,11 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         private templateStore: TemplateStore,
         private packageCreationUtils: PackageCreationUtils,
         private toastr: ToastrService,
-        private router: ActivatedRoute,
         private sharedService: SharedService
     ) {
     }
 
     ngOnInit() {
-        if (this.router.snapshot.paramMap.has('id')) {
-            console.log('URL contains Id');
-            this.sharedService.enableEdit();
-        }
         this.templateStore.state$.subscribe(templateInfo => {
             // init Template&mapping vars
             console.log('Oninit');
@@ -118,8 +112,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.dtOptions = {
             pagingType: 'full_numbers',
             pageLength: 25,
-            // destroy: true,
-            // retrieve: true,
+            destroy: true,
+            retrieve: true,
         };
     }
 
@@ -382,6 +376,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void {
         // Do not forget to unsubscribe the event
         this.dtTrigger.unsubscribe();
+        this.resTableDtTrigger.unsubscribe();
     }
 }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
index d2e25ef6f..662d8d3f3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PackageCreationStore } from '../package-creation.store';
+import { SharedService } from './shared-service';
 
 @Component({
     selector: 'app-template-mapping',
@@ -11,17 +12,25 @@ export class TemplateMappingComponent implements OnInit {
     creationView = false;
     listView = true;
 
-    constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) {
+    constructor(
+        private route: ActivatedRoute,
+        private pakcageStore: PackageCreationStore,
+        private sharedService: SharedService
+    ) {
     }
 
     ngOnInit() {
+
         if (this.route.snapshot.paramMap.has('id')) {
             console.log('Edit mode');
             this.creationView = true;
             this.listView = false;
+            console.log('URL contains Id');
+            this.sharedService.enableEdit();
         } else {
             console.log('Create mode');
             this.pakcageStore.clear();
+            this.sharedService.disableEdit();
         }
     }
     openCreationView() {