adding DSL-Definition component

Issue-ID: CCSDK-2066

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: I8b16e78cf3961c0c37a721fd37898fb3a7a850a0

8 files changed, 71 insertions, 36 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css
index e69de29bb..4334e1d0f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css
@@ -0,0 +1,4 @@
+.dsl-editor {
+    height: 500px;
+    
+}
\ 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.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
index 844481a2d..dde21297a 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 @@
-<p>dsl-definitions-tab works!</p>
+<ace-editor [(text)]="dslDefinition.content" [mode]="lang" #editor style="height:150px;"></ace-editor>
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 af0630293..032ba0b7f 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,15 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+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',
-  templateUrl: './dsl-definitions-tab.component.html',
-  styleUrls: ['./dsl-definitions-tab.component.css']
+    selector: 'app-dsl-definitions-tab',
+    templateUrl: './dsl-definitions-tab.component.html',
+    styleUrls: ['./dsl-definitions-tab.component.css']
 })
 export class DslDefinitionsTabComponent implements OnInit {
 
-  constructor() { }
+    dslDefinition: DslDefinition = new DslDefinition();
+    lang = 'json';
 
-  ngOnInit() {
-  }
+    constructor(private packageCreationStore: PackageCreationStore) {
+    }
 
+    ngOnInit() {
+        this.packageCreationStore.changeDslDefinition(this.dslDefinition);
+
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
index a5f5ec70a..78a9b5212 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
@@ -4,12 +4,14 @@ export class Definition {
 
     public metaDataTab: MetaDataTabModel;
     public imports: Map<string, string>;
+    public dslDefinition: DslDefinition;
 
     // public dslDefinition:
 
     constructor() {
         this.imports = new Map<string, string>();
         this.metaDataTab = new MetaDataTabModel();
+        this.dslDefinition = new DslDefinition();
     }
 
     public setImports(key: string, value: string) {
@@ -22,6 +24,14 @@ export class Definition {
         return this;
     }
 
+    public setDslDefinition(dslDefinition: DslDefinition): Definition {
+        this.dslDefinition = dslDefinition;
+        return this;
+    }
+}
+
+export class DslDefinition {
+    content: string;
 }
 
 export class Scripts {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index 89a190ef6..528a005d4 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -77,7 +77,7 @@
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
                                  aria-labelledby="nav-authentication-tab">
-                                <app-source-editor [Data]="'test'" lang="javascript"></app-source-editor>
+                                <app-dsl-definitions-tab></app-dsl-definitions-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
                                  aria-labelledby="nav-template-tab">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
index 93998e8a9..3e37952b2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -23,7 +23,7 @@ import {Injectable} from '@angular/core';
 
 import {Store} from '../../../../common/core/stores/Store';
 
-import {CBAPackage} from './mapping-models/CBAPacakge.model';
+import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model';
 import {PackageCreationService} from './package-creation.service';
 import {FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
 import * as JSZip from 'jszip';
@@ -49,6 +49,15 @@ export class PackageCreationStore extends Store<CBAPackage> {
         });
     }
 
+    changeDslDefinition(dslDefinition: DslDefinition) {
+
+        this.setState({
+            ...this.state,
+            definitions: this.state.definitions.setDslDefinition(dslDefinition)
+        });
+    }
+
+
     addDefinition(name: string, content: string) {
 
         this.setState({
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 f934888a6..24423cfac 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 [(text)]="text" [mode]="'javascript'" #editor style="height:150px;"></ace-editor>
\ No newline at end of file
+<ace-editor (textChanged)="onChange($event)" [(text)]="Data" [mode]="lang" #editor style="height:150px;"></ace-editor>
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 9c3435d98..a63dfa7e0 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,4 @@
-import { Component, OnInit, ViewChild, Input, AfterViewInit } from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 // import 'brace/ext/searchbox';
 // import 'ace-builds/webpack-resolver';
 // import 'brace';
@@ -6,39 +6,44 @@ import { Component, OnInit, ViewChild, Input, AfterViewInit } from '@angular/cor
 // import 'ace-builds/src-min-noconflict/snippets/html';
 
 @Component({
-  selector: 'app-source-editor',
-  templateUrl: './source-editor.component.html',
-  styleUrls: ['./source-editor.component.css']
+    selector: 'app-source-editor',
+    templateUrl: './source-editor.component.html',
+    styleUrls: ['./source-editor.component.css']
 })
 export class SourceEditorComponent implements OnInit, AfterViewInit {
 
 
-  @Input() Data: string;
-  @Input() lang: string;
-  mode = 'json';
-  @ViewChild('editor', { static: false }) editor;
-  text = '';
+    @Input() Data: string;
+    @Output() DataChange = new EventEmitter();
+    @Input() lang: string;
+    mode = 'json';
+    @ViewChild('editor', {static: false}) editor;
+    text = '';
 
-  ngOnInit(): void {
-    //  throw new Error("Method not implemented.");
-  }
+    ngOnInit(): void {
+        //  throw new Error("Method not implemented.");
+    }
 
 
+    ngAfterViewInit() {
+        this.editor.setTheme('eclipse');
 
-  ngAfterViewInit() {
-    this.editor.setTheme('eclipse');
+        this.editor.getEditor().setOptions({
+            enableBasicAutocompletion: true
+        });
 
-    this.editor.getEditor().setOptions({
-      enableBasicAutocompletion: true
-    });
+        this.editor.getEditor().commands.addCommand({
+            name: 'showOtherCompletions',
+            bindKey: 'Ctrl-.',
+            exec(editor) {
 
-    this.editor.getEditor().commands.addCommand({
-      name: 'showOtherCompletions',
-      bindKey: 'Ctrl-.',
-      exec(editor) {
-
-      }
-    });
-  }
+            }
+        });
+    }
 
+    onChange($event: {}) {
+        console.log('editor action');
+        console.log(this.Data);
+        console.log($event);
+    }
 }