updating source-editor changes

Issue-ID: CCSDK-2070

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

9 files changed, 82 insertions, 51 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 dde21297a..6fb1dcfd8 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
@@ -1 +1,5 @@
-<ace-editor [(text)]="dslDefinition.content" [mode]="lang" #editor style="height:150px;"></ace-editor>
+<ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true"
+    [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+</ace-editor>
+
+<!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> -->
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
index 032ba0b7f..7171e730e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
@@ -1,6 +1,6 @@
-import {Component, OnInit} from '@angular/core';
-import {DslDefinition} from '../mapping-models/CBAPacakge.model';
-import {PackageCreationStore} from '../package-creation.store';
+import { Component, OnInit } from '@angular/core';
+import { DslDefinition } from '../mapping-models/CBAPacakge.model';
+import { PackageCreationStore } from '../package-creation.store';
 
 @Component({
     selector: 'app-dsl-definitions-tab',
@@ -19,4 +19,8 @@ export class DslDefinitionsTabComponent implements OnInit {
         this.packageCreationStore.changeDslDefinition(this.dslDefinition);
 
     }
+
+    textChanged(event) {
+        console.log('event changed');
+    }
 }
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 c40703daf..344e7f599 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
@@ -47,7 +47,10 @@
                 <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
                     data-parent="#accordion">
                     <div class="card-body">
-                        {{file.value}}
+                        <ace-editor [(text)]="file.value" [mode]="'json'" [autoUpdateContent]="true"
+                            [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
+                            style="height:300px;">
+                        </ace-editor>
                     </div>
                 </div>
             </div>
@@ -90,7 +93,7 @@
                 </button>
             </div>
             <div class="modal-body">
-                <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
+                <ngx-file-drop accept=".json" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
                     (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
                     <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
                         <div class="folder-upload">
@@ -127,4 +130,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 39f3fbf60..535f783ad 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
 
 
 @Component({
@@ -63,9 +63,8 @@ export class ImportsTabComponent implements OnInit {
     }
 
     removeFile(fileIndex: number) {
-        console.log(this.uploadedFiles[fileIndex]);
-        console.log(this.uploadedFiles);
-        this.packageCreationStore.removeFileFromDefinition(this.uploadedFiles[fileIndex].name);
+        const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
+        this.packageCreationStore.removeFileFromDefinition(filename);
         this.uploadedFiles.splice(fileIndex, 1);
     }
 
@@ -93,7 +92,7 @@ export class ImportsTabComponent implements OnInit {
                 const fileReader = new FileReader();
                 fileReader.onload = (e) => {
                     this.packageCreationStore.addDefinition('Definitions/' + droppedFile.name,
-                            fileReader.result.toString());
+                        fileReader.result.toString());
                 };
                 fileReader.readAsText(file);
             });
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/template-mapping.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/template-mapping.model.ts
new file mode 100644
index 000000000..400ef21c4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/template-mapping.model.ts
@@ -0,0 +1,11 @@
+export class Template {
+    public name: string;
+    public type: string;
+    public content: string;
+}
+export class Mapping { }
+
+export class TemplateMapping {
+    public template: Template;
+    public mapping: Mapping;
+}
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 893c4f741..824152035 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
@@ -5,7 +5,7 @@
             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
         </div>
         <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
-                                                               href="#">Import File</a></span>
+                href="#">Import File</a></span>
 
     </div>
 
@@ -15,23 +15,25 @@
                 <label class="label-name">File</label>
             </div>
         </div>
-        <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion">
+        <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">
 
             <div class="card">
-                <div [id]="'head-'+mapIndex" class="card-header">
+                <div [id]="'head-script-'+mapIndex" class="card-header">
                     <h5 class="mb-0 d-flex justify-content-between">
-                        <button [attr.aria-controls]="'id-'+mapIndex" [attr.data-target]="'#id-'+mapIndex"
-                                aria-expanded="false" class="btn btn-link collapsed"
-                                data-toggle="collapse">
+                        <button [attr.aria-controls]="'id-script-'+mapIndex" [attr.data-target]="'#id-script-'+mapIndex"
+                            aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
                             <i class="icon-file-code"></i> {{file.key}}
                         </button>
                         <a (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a>
                     </h5>
                 </div>
-                <div [attr.aria-labelledby]="'head-'+mapIndex" [id]="'id-'+mapIndex" class="collapse"
-                     data-parent="#accordion">
+                <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
+                    data-parent="#accordion-script">
                     <div class="card-body">
-                        {{file.value}}
+                        <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true"
+                            [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
+                            style="height:300px;">
+                        </ace-editor>
                     </div>
                 </div>
             </div>
@@ -42,7 +44,7 @@
 </div>
 
 <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
-     tabindex="-1">
+    tabindex="-1">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -52,11 +54,11 @@
                 </button>
             </div>
             <div class="modal-body">
-                <ngx-file-drop (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
-                               (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
+                <ngx-file-drop accept=".kt" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
+                    (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
                         <div class="folder-upload">
-                            <img src="assets/img/folder-upload.svg"/>
+                            <img src="assets/img/folder-upload.svg" />
                         </div>
                         <div class="folder-upload-text">
                             Drag & Drop file
@@ -72,16 +74,16 @@
                 <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
                     <table class="table">
                         <thead>
-                        <tr>
-                            <th>Name : {{ item.name }}</th>
-                        </tr>
+                            <tr>
+                                <th>Name : {{ item.name }}</th>
+                            </tr>
                         </thead>
                     </table>
                 </div>
             </div>
             <div class="modal-footer">
                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
-                        type="button">Cancel
+                    type="button">Cancel
                 </button>
                 <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
                     Import
@@ -89,4 +91,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
index 634e5fc84..eee291bba 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -1,7 +1,9 @@
-import {Component, OnInit} from '@angular/core';
-import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
+import 'ace-builds/src-noconflict/ace';
+import 'ace-builds/webpack-resolver';
 
 @Component({
     selector: 'app-scripts-tab',
@@ -43,7 +45,8 @@ export class ScriptsTabComponent implements OnInit {
 
     removeFile(fileIndex: number) {
         console.log(this.uploadedFiles[fileIndex]);
-        this.packageCreationStore.removeFileFromState(this.uploadedFiles[fileIndex].name);
+        const filename = 'Scripts/' + this.uploadedFiles[fileIndex].name;
+        this.packageCreationStore.removeFileFromState(filename);
         this.uploadedFiles.splice(fileIndex, 1);
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html
index 24423cfac..2f647f9b9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html
@@ -1 +1 @@
-<ace-editor (textChanged)="onChange($event)" [(text)]="Data" [mode]="lang" #editor style="height:150px;"></ace-editor>
+<ace-editor (textChanged)="onChange($event)" [(text)]="text" [mode]="lang" #editor style="height:150px;"></ace-editor>
\ No newline at end of file
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 a63dfa7e0..8f4c376a3 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
@@ -1,4 +1,5 @@
-import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AceEditorComponent } from 'ng2-ace-editor';
 // import 'brace/ext/searchbox';
 // import 'ace-builds/webpack-resolver';
 // import 'brace';
@@ -13,12 +14,10 @@ import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild
 export class SourceEditorComponent implements OnInit, AfterViewInit {
 
 
-    @Input() Data: string;
-    @Output() DataChange = new EventEmitter();
+    @Input() text: string;
+    @Output() textChange = new EventEmitter();
     @Input() lang: string;
-    mode = 'json';
-    @ViewChild('editor', {static: false}) editor;
-    text = '';
+    @ViewChild('editor', { static: false }) editor: AceEditorComponent;
 
     ngOnInit(): void {
         //  throw new Error("Method not implemented.");
@@ -26,10 +25,18 @@ export class SourceEditorComponent implements OnInit, AfterViewInit {
 
 
     ngAfterViewInit() {
-        this.editor.setTheme('eclipse');
 
+        console.log(this.lang);
+        this.editor.setTheme('eclipse');
         this.editor.getEditor().setOptions({
-            enableBasicAutocompletion: true
+            enableBasicAutocompletion: true,
+            // fontSize: '14pt',
+            // maxLines: 4096,
+            // behavioursEnabled: true,
+            // wrapBehavioursEnabled: true,
+            // showPrintMargin: true,
+            // indentedSoftWrap: true,
+            // wrap: true,
         });
 
         this.editor.getEditor().commands.addCommand({
@@ -41,9 +48,7 @@ export class SourceEditorComponent implements OnInit, AfterViewInit {
         });
     }
 
-    onChange($event: {}) {
-        console.log('editor action');
-        console.log(this.Data);
-        console.log($event);
+    onChange(editor) {
+        this.textChange.emit(this.text);
     }
 }