Fix editor highlight.

Issue-ID: CCSDK-2471

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

8 files changed, 24 insertions, 22 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
index 2c0400a63..e93ee72ca 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
@@ -4,7 +4,7 @@
     <li>2. Write them manually </li>
 </ul>
 <ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true"
-    [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+    [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'" #editor style="height:300px;">
 </ace-editor>
 
 <!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> -->
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index 593dc1d0e..c2356a4ee 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -75,7 +75,7 @@
                     data-parent="#accordion">
                     <div class="card-body">
                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'json'"
-                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'"
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
                             #editor style="height:300px;">
                         </ace-editor>
                     </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 6688a9202..e859062be 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -60,7 +60,7 @@
                     data-parent="#accordion-script">
                     <div class="card-body">
                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
-                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'"
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
                             #editor style="height:300px;">
                         </ace-editor>
                     </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.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() {
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 8f4c376a3..977bf97e7 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
@@ -30,13 +30,11 @@ export class SourceEditorComponent implements OnInit, AfterViewInit {
         this.editor.setTheme('eclipse');
         this.editor.getEditor().setOptions({
             enableBasicAutocompletion: true,
-            // fontSize: '14pt',
-            // maxLines: 4096,
-            // behavioursEnabled: true,
-            // wrapBehavioursEnabled: true,
-            // showPrintMargin: true,
-            // indentedSoftWrap: true,
-            // wrap: true,
+            highlightSelectedWord: true,
+            maxLines: Infinity,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+            showFoldWidgets: 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 164a459c3..be28f0b9a 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -2653,7 +2653,7 @@ hr{
 }
 .ace_line,
 .ace-eclipse .ace_print-margin{
-  background: #fff;
+  /* background: #fff; */
 }
 .ace_editor{
   height: 55vh !important;