diff options
12 files changed, 87 insertions, 53 deletions
diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json index 436a0df6d..6219bf68a 100644 --- a/cds-ui/designer-client/angular.json +++ b/cds-ui/designer-client/angular.json @@ -36,6 +36,7 @@ "scripts": [ "./node_modules/ace-builds/src-min/ace.js", "./node_modules/ace-builds/src-min/theme-eclipse.js", + "./node_modules/ace-builds/src-min/theme-tomorrow_night_bright.js", "./node_modules/ace-builds/src-min/mode-json.js", "./node_modules/ace-builds/src-min/mode-javascript.js", "./node_modules/ace-builds/src-min/mode-python.js", @@ -49,6 +50,8 @@ "./node_modules/ace-builds/src-min/ext-beautify.js", "./node_modules/ace-builds/src-min/ext-searchbox.js", "./node_modules/ace-builds/src-min/ext-language_tools.js", + "./node_modules/ace-builds/src-min/worker-json.js", + "./node_modules/ace-builds/src-min/worker-javascript.js", "./node_modules/jquery/dist/jquery.js", "./node_modules/lodash/index.js", "./node_modules/backbone/backbone.js", 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); } } diff --git a/cds-ui/pom.xml b/cds-ui/pom.xml index bba6bfdd2..122823419 100644 --- a/cds-ui/pom.xml +++ b/cds-ui/pom.xml @@ -38,7 +38,7 @@ limitations under the License. <modules> <module>client</module> - <!--<module>designer-client</module>--> + <module>designer-client</module> <module>server</module> <module>application</module> </modules> @@ -40,7 +40,7 @@ limitations under the License. <modules> <module>ms</module> - <!-- <module>cds-ui</module>--> + <module>cds-ui</module> <module>components</module> </modules> |