From c9b0f84a5812459aabdf59c00265dec09d771182 Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Tue, 28 Jan 2020 17:25:47 +0200 Subject: update imports-tab,source-editor and create scripts-tab component Issue-ID: CCSDK-2016 Issue-ID: CCSDK-2042 Signed-off-by: shaaban Altanany Change-Id: I87dd0f6cf393c2d7cd78985928635bd2138ccc74 --- cds-ui/designer-client/angular.json | 19 ++- cds-ui/designer-client/package.json | 1 + .../dsl-definitions-tab.component.css | 0 .../dsl-definitions-tab.component.html | 1 + .../dsl-definitions-tab.component.spec.ts | 25 +++ .../dsl-definitions-tab.component.ts | 15 ++ .../imports-tab/imports-tab.component.css | 11 ++ .../imports-tab/imports-tab.component.html | 70 +++++---- .../imports-tab/imports-tab.component.ts | 32 ++-- .../mapping-models/CBAPacakge.model.ts | 18 ++- .../mapping-models/metadata/MetaDataTab.model.ts | 5 +- .../metadata-tab/metadata-tab.component.css | 0 .../metadata-tab/metadata-tab.component.html | 88 +++++++++++ .../metadata-tab/metadata-tab.component.spec.ts | 25 +++ .../metadata-tab/metadata-tab.component.ts | 137 +++++++++++++++++ .../package-creation.component.html | 101 +----------- .../package-creation.component.spec.ts | 25 --- .../package-creation/package-creation.component.ts | 169 +++------------------ .../package-creation/package-creation.service.ts | 16 +- .../package-creation/package-creation.store.ts | 29 +++- .../scripts-tab/scripts-tab.component.css | 11 ++ .../scripts-tab/scripts-tab.component.html | 92 +++++++++++ .../scripts-tab/scripts-tab.component.spec.ts | 25 +++ .../scripts-tab/scripts-tab.component.ts | 76 +++++++++ .../template-mapping.component.html | 89 ++++++----- .../feature-modules/packages/packages.module.ts | 16 +- .../source-editor/source-editor.component.css | 7 + .../source-editor/source-editor.component.html | 1 + .../source-editor/source-editor.component.spec.ts | 25 +++ .../source-editor/source-editor.component.ts | 44 ++++++ 30 files changed, 810 insertions(+), 363 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts delete mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts (limited to 'cds-ui/designer-client') diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json index b169e7bcf..916ea2ff2 100644 --- a/cds-ui/designer-client/angular.json +++ b/cds-ui/designer-client/angular.json @@ -34,7 +34,22 @@ ], "scripts": [ - "./node_modules/jquery/dist/jquery.min.js", + "./node_modules/ace-builds/src-min/ace.js", + "./node_modules/ace-builds/src-min/theme-eclipse.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", + "./node_modules/ace-builds/src-min/mode-xml.js", + "./node_modules/ace-builds/src-min/mode-kotlin.js", + "./node_modules/ace-builds/src-min/mode-text.js", + "./node_modules/ace-builds/src-min/mode-velocity.js", + "./node_modules/ace-builds/src-min/mode-yaml.js", + "./node_modules/ace-builds/src-min/theme-vibrant_ink.js", + "./node_modules/ace-builds/src-min/snippets/html.js", + "./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/jquery/dist/jquery.js", "./node_modules/lodash/index.js", "./node_modules/backbone/backbone.js", "./node_modules/jointjs/dist/joint.js" @@ -141,4 +156,4 @@ } }, "defaultProject": "designer-client" -} \ No newline at end of file +} diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json index 021d8a222..033fee1fa 100644 --- a/cds-ui/designer-client/package.json +++ b/cds-ui/designer-client/package.json @@ -35,6 +35,7 @@ "json2typescript": "^1.2.3", "lodash": "^4.17.15", "ng-sidebar": "^9.1.1", + "ng2-ace-editor": "^0.3.9", "ngx-file-drop": "^8.0.8", "rxjs": "~6.4.0", "tslib": "^1.10.0", 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 new file mode 100644 index 000000000..e69de29bb 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 new file mode 100644 index 000000000..844481a2d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html @@ -0,0 +1 @@ +

dsl-definitions-tab works!

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts new file mode 100644 index 000000000..ab9220830 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DslDefinitionsTabComponent } from './dsl-definitions-tab.component'; + +describe('DslDefinitionsTabComponent', () => { + let component: DslDefinitionsTabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DslDefinitionsTabComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DslDefinitionsTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..af0630293 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-dsl-definitions-tab', + templateUrl: './dsl-definitions-tab.component.html', + styleUrls: ['./dsl-definitions-tab.component.css'] +}) +export class DslDefinitionsTabComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css index e69de29bb..4ab1d7b7e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css @@ -0,0 +1,11 @@ +a.accordion-delete i { + color: red; +} + +a.accordion-delete i:hover { + color: #007bff; + cursor: pointer; + transition-duration: .5s; + /* for Safari & Chrome */ + -webkit-transition-duration: .5s; +} \ 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.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index baf1b8821..5cd888828 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 @@ -4,7 +4,8 @@ - Or you can also Import File + Or you can also Import File @@ -14,12 +15,12 @@ -
-
+
+ +
+
+
+ + +
+
+
+
+ {{file.value}} +
+
-
+ --> +
\ 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 6cd52015d..4db67b8dc 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 {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop'; -import {PackageCreationStore} from '../package-creation.store'; -import {PackageCreationUtils} from '../package-creation.utils'; +import { Component, OnInit } from '@angular/core'; +import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop'; +import { PackageCreationStore } from '../package-creation.store'; +import { PackageCreationUtils } from '../package-creation.utils'; @Component({ @@ -9,10 +9,11 @@ import {PackageCreationUtils} from '../package-creation.utils'; templateUrl: './imports-tab.component.html', styleUrls: ['./imports-tab.component.css'] }) -export class ImportsTabComponent { +export class ImportsTabComponent implements OnInit { public definitionFiles: Map = new Map(); public uploadedFiles: FileSystemFileEntry[] = []; + private fileNames: Set = new Set(); public files: NgxFileDropEntry[] = []; @@ -24,15 +25,19 @@ export class ImportsTabComponent { }); } + ngOnInit(): void { + // TODO + } + public dropped(files: NgxFileDropEntry[]) { this.files = files; for (const droppedFile of files) { - - // Is it a file? - if (droppedFile.fileEntry.isFile) { + // Is it a file? & Not added before + if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) { const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; this.uploadedFiles.push(fileEntry); - + console.log(fileEntry.name); + this.fileNames.add(fileEntry.name); } /*else { const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; @@ -57,6 +62,13 @@ export class ImportsTabComponent { } } + removeFile(fileIndex: number) { + console.log(this.uploadedFiles[fileIndex]); + console.log(this.uploadedFiles); + this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'definitions'); + this.uploadedFiles.splice(fileIndex, 1); + } + public fileOver(event) { console.log(event); } @@ -64,8 +76,6 @@ export class ImportsTabComponent { public fileLeave(event) { console.log(event); } - - /* readFileContent(file: File): string | ArrayBuffer { const fileReader = new FileReader(); // let content: string | ArrayBuffer = ''; 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 7b6743f6a..cbb82f118 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 @@ -1,4 +1,5 @@ -import {Metadata} from './definitions/VlbDefinition'; + +import {MetaDataTabModel} from './metadata/MetaDataTab.model'; export class Definition { public files: Map = new Map(); @@ -8,13 +9,24 @@ export class Definition { } } +export class Scripts { + public files: Map = new Map(); + + constructor(files: Map) { + this.files = files; + } +} + export class CBAPackage { - public metaData: Metadata; + + public metaData: MetaDataTabModel; public definitions: Definition; + public scripts: Scripts; constructor() { this.definitions = new Definition(new Map()); - this.metaData = new Metadata(); + this.scripts = new Scripts(new Map()); + this.metaData = new MetaDataTabModel(); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts index 42aac5c4f..c62694213 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts @@ -20,10 +20,9 @@ limitations under the License. */ -export class MetaDataTab { +export class MetaDataTabModel { mode: string; - dictionaryLibraryInstance?: null; name: string; description: string; version: string; @@ -46,7 +45,7 @@ Content-Type: application/vnd.oasis.bpmn*/ export class MetaDataFile { - static getObjectInstance(metaDataTab: MetaDataTab): string { + static getObjectInstance(metaDataTab: MetaDataTabModel): string { return 'TOSCA-Meta-File-Version: 1.0.0\n' + 'CSAR-Version: 1.0\n' + 'Created-By: Shaaban Ebrahim \n' + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html new file mode 100644 index 000000000..a94687b37 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -0,0 +1,88 @@ +
+
+ + +
+ +
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ Custom key Delete +
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
+
+
+
+ + + +
+
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.spec.ts new file mode 100644 index 000000000..90586d900 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MetadataTabComponent } from './metadata-tab.component'; + +describe('MetadataTabComponent', () => { + let component: MetadataTabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MetadataTabComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MetadataTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts new file mode 100644 index 000000000..894716711 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts @@ -0,0 +1,137 @@ +import {Component, OnInit} from '@angular/core'; +import {PackageCreationService} from '../package-creation.service'; +import {PackageCreationUtils} from '../package-creation.utils'; +import {Router} from '@angular/router'; +import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; +import * as JSZip from 'jszip'; +import {PackageCreationStore} from '../package-creation.store'; + + +@Component({ + selector: 'app-metadata-tab', + templateUrl: './metadata-tab.component.html', + styleUrls: ['./metadata-tab.component.css'] +}) +export class MetadataTabComponent implements OnInit { + + counter = 0; + modes: object[] = [ + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); + + private folder: FolderNodeElement = new FolderNodeElement(); + private zipFile: JSZip = new JSZip(); + private filesData: any = []; + private errorMessage: string; + + constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils, + private router: Router, private packageCreationStore: PackageCreationStore) { + + } + + ngOnInit() { + this.packageCreationStore.changeMetaData(this.metaDataTab); + } + + saveMetaData() { + this.setModeType(this.metaDataTab); + this.setEntryPoint(this.metaDataTab); + + this.addToscaMetaDataFile(this.metaDataTab); + + // const vlbDefinition: VlbDefinition = new VlbDefinition(); + // this.fillVLBDefinition(vlbDefinition, this.metaDataTab); + + this.filesData.push(this.folder.TREE_DATA); + this.saveBluePrint(); + this.packageCreationService.refreshPackages(); + this.router.navigate(['/packages']); + + } + + addToscaMetaDataFile(metaDataTab: MetaDataTabModel) { + const filename = 'TOSCA.meta'; + FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab)); + } + + private setModeType(metaDataTab: MetaDataTabModel) { + if (metaDataTab.mode.startsWith('Scripting')) { + metaDataTab.mode = 'KOTLIN_SCRIPT'; + } else if (metaDataTab.mode.startsWith('Designer')) { + metaDataTab.mode = 'DEFAULT'; + } else { + metaDataTab.mode = 'GENERIC_SCRIPT'; + } + } + + saveBluePrint() { + this.create(); + this.zipFile.generateAsync({type: 'blob'}) + .then(blob => { + this.packageCreationService.savePackage(blob); + + }); + } + + + create() { + this.folder.TREE_DATA.forEach((path) => { + + const name = path.name; + if (path.children) { + this.zipFile.folder(name); + path.children.forEach(children => { + const name2 = children.name; + if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) { + this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); + } else { + } + + }); + + } + }); + } + + private setEntryPoint(metaDataTab: MetaDataTabModel) { + if (metaDataTab.mode.startsWith('DEFAULT')) { + metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; + } else { + metaDataTab.entryFileName = ''; + } + + + } + + /* private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTabModel) { + + const metadata: Metadata = new Metadata(); + metadata.template_author = 'Shaaban'; + metadata.template_name = metaDataTab.templateName; + metadata.template_tags = metaDataTab.tags; + + metadata.dictionary_group = 'default'; + metadata.template_version = metaDataTab.version; + metadata['author-email'] = 'shaaban.altanany.ext@orange.com'; + metadata['user-groups'] = 'ADMIN'; + vlbDefinition.tosca_definitions_version = metaDataTab.version; + vlbDefinition.metadata = metadata; + const value = this.packageCreationUtils.transformToJson(vlbDefinition); + console.log(value); + FilesContent.putData('vLB_CDS.json', value); + }*/ + + validatePackageNameAndVersion() { + if (this.metaDataTab.name && this.metaDataTab.version) { + this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { + if (element) { + this.errorMessage = 'the package with name and version is exists'; + } else { + this.errorMessage = ' '; + } + }); + } + + } +} 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 776533845..89a190ef6 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 @@ -34,7 +34,7 @@ @@ -68,95 +68,7 @@
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts deleted file mode 100644 index ed0dc59c8..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PackageCreationComponent } from './package-creation.component'; - -describe('PackageCreationComponent', () => { - let component: PackageCreationComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PackageCreationComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PackageCreationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 37a017953..aa44cdf7c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -20,19 +20,10 @@ limitations under the License. */ import {Component, OnInit} from '@angular/core'; -import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTab} from './mapping-models/metadata/MetaDataTab.model'; +import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; // import {saveAs} from 'file-saver/dist/FileSaver'; import * as JSZip from 'jszip'; -import {Observable} from 'rxjs'; -import {ApiService} from '../../../../common/core/services/api.service'; -import {BlueprintURLs} from '../../../../common/constants/app-constants'; -import {Import, Metadata, VlbDefinition} from './mapping-models/definitions/VlbDefinition'; -import {JsonConvert} from 'json2typescript'; -import {JsonPipe} from '@angular/common'; -import {PackageCreationService} from './package-creation.service'; -import {PackageCreationUtils} from './package-creation.utils'; -import List = _.List; -import {Router} from '@angular/router'; +import {PackageCreationStore} from './package-creation.store'; @Component({ selector: 'app-package-creation', @@ -44,118 +35,44 @@ export class PackageCreationComponent implements OnInit { modes: object[] = [ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; - customKeysAndValues: Map = new Map(); - - dictionaryLibraryInstances: string[] = ['x', 'y']; - private container: HTMLElement; - private elements: HTMLCollection; - private newElement: HTMLElement; - private metaDataTab: MetaDataTab = new MetaDataTab(); - - private result: string; - + private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private folder: FolderNodeElement = new FolderNodeElement(); private zipFile: JSZip = new JSZip(); private filesData: any = []; - private errorMessage: string; - private keys: NodeListOf; - private values: NodeListOf; - - constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils, - private router: Router) { + constructor(private packageCreationStore: PackageCreationStore) { } ngOnInit() { - // this.customKeysAndValues.set('Dictionary Library Instances', ' '); - this.keys = document.getElementsByName('key'); - this.values = document.getElementsByName('value'); - } - - - createAnotherCustomKeyDiv() { - this.newElement = document.getElementById('target'); - const id = this.newElement.getAttribute('id'); - this.newElement.setAttribute('id', 'target' + this.counter++); - const copiedElement = this.newElement.cloneNode(true); - this.container = document.getElementById('container'); - this.container.appendChild(copiedElement); - this.elements = this.container.children; - this.newElement.setAttribute('id', id); - this.clearCopiedElement(); - - // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version)); - /*this.metaDataTab = new MetaDataTab(); - this.metaDataTab.name = 'klfdj'; - this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; - this.metaDataTab.description = 'rere'; - this.metaDataTab.tags = 'ffsssssss'; - this.metaDataTab.version = '1.01.10'; - this.metaDataTab.templateName = 'test'; - - - this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/ - } - - private clearCopiedElement() { - const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement; - const inputElements = newCopiedElement.getElementsByTagName('input'); - for (let i = 0; i < inputElements.length; i++) { - const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement; - element.value = ''; - } - } - - - validatePackageNameAndVersion() { - if (this.metaDataTab.name && this.metaDataTab.version) { - this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { - if (element) { - this.errorMessage = 'the package with name and version is exists'; - } else { - this.errorMessage = ' '; - } - }); - } } - getDictionaryLibraryInstances() { + saveBluePrint() { + this.packageCreationStore.state$.subscribe( + cbaPackage => { + this.metaDataTab = cbaPackage.metaData; + this.setModeType(this.metaDataTab); + this.setEntryPoint(this.metaDataTab); + this.addToscaMetaDataFile(this.metaDataTab); - } + // const vlbDefinition: VlbDefinition = new VlbDefinition(); + // this.fillVLBDefinition(vlbDefinition, this.metaDataTab); - saveMetaData() { - for (let i = 0; i < this.values.length; i++) { - const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement; - const inputKey: string = inputKeyElement.value; - const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement; - const inputValue: string = inputValueElement.value; - this.customKeysAndValues.set(inputKey, inputValue); - } - - this.metaDataTab.mapOfCustomKey = this.customKeysAndValues; - this.setModeType(this.metaDataTab); - this.setEntryPoint(this.metaDataTab); - - this.addToscaMetaDataFile(this.metaDataTab); - - const vlbDefinition: VlbDefinition = new VlbDefinition(); - this.fillVLBDefinition(vlbDefinition, this.metaDataTab); + this.filesData.push(this.folder.TREE_DATA); + console.log(FilesContent.getMapOfFilesNamesAndContent()); + this.saveBluePrintToDataBase(); + }); - this.filesData.push(this.folder.TREE_DATA); - this.saveToBackend(); - this.packageCreationService.refreshPackages(); - this.router.navigate(['/packages']); } - addToscaMetaDataFile(metaDataTab: MetaDataTab) { + addToscaMetaDataFile(metaDataTab: MetaDataTabModel) { const filename = 'TOSCA.meta'; FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab)); } - private setModeType(metaDataTab: MetaDataTab) { + private setModeType(metaDataTab: MetaDataTabModel) { if (metaDataTab.mode.startsWith('Scripting')) { metaDataTab.mode = 'KOTLIN_SCRIPT'; } else if (metaDataTab.mode.startsWith('Designer')) { @@ -165,28 +82,15 @@ export class PackageCreationComponent implements OnInit { } } - saveToBackend() { + saveBluePrintToDataBase() { this.create(); this.zipFile.generateAsync({type: 'blob'}) .then(blob => { - this.saveBluePrint(blob); - + this.packageCreationStore.saveBluePrint(blob); }); } - private saveBluePrint(blob) { - const formData = new FormData(); - formData.append('file', blob); - this.packageCreationService.saveBlueprint(formData) - .subscribe( - data => { - console.log('Success:' + JSON.stringify(data)); - }, error => { - console.log('Error -' + error.message); - }); - } - create() { this.folder.TREE_DATA.forEach((path) => { @@ -206,15 +110,7 @@ export class PackageCreationComponent implements OnInit { }); } - - deleteCustomKey(event) { - this.container = document.getElementById('container'); - const element = event.parentElement.parentElement.parentElement; - this.container.removeChild(element); - } - - - private setEntryPoint(metaDataTab: MetaDataTab) { + private setEntryPoint(metaDataTab: MetaDataTabModel) { if (metaDataTab.mode.startsWith('DEFAULT')) { metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; } else { @@ -224,24 +120,5 @@ export class PackageCreationComponent implements OnInit { } - private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) { - - const metadata: Metadata = new Metadata(); - metadata.template_author = 'Shaaban'; - metadata.template_name = metaDataTab.templateName; - metadata.template_tags = metaDataTab.tags; - - metadata.dictionary_group = 'default'; - metadata.template_version = metaDataTab.version; - metadata['author-email'] = 'shaaban.altanany.ext@orange.com'; - metadata['user-groups'] = 'ADMIN'; - // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey; - vlbDefinition.tosca_definitions_version = metaDataTab.version; - vlbDefinition.metadata = metadata; - - // console.log(vlbDefinition.metadata.mapOfCustomKeys); - const value = this.packageCreationUtils.transformToJson(vlbDefinition); - console.log(value); - FilesContent.putData('vLB_CDS.json', value); - } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts index 0e5cd6a11..36da6a42f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts @@ -36,7 +36,7 @@ export class PackageCreationService { constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) { } - saveBlueprint(body: any | null, options?: any): Observable { + private saveBlueprint(body: any | null, options?: any): Observable { return this.api.post(BlueprintURLs.save, body, {responseType: 'text'}); } @@ -48,4 +48,18 @@ export class PackageCreationService { refreshPackages() { this.packagesStore.getAll(); } + + savePackage(blob) { + + const formData = new FormData(); + formData.append('file', blob); + this.saveBlueprint(formData) + .subscribe( + data => { + console.log('Success:' + JSON.stringify(data)); + }, error => { + console.log('Error -' + error.message); + }); + } + } 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 214b516a2..f19ada820 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,9 +23,10 @@ import {Injectable} from '@angular/core'; import {Store} from '../../../../common/core/stores/Store'; -import {CBAPackage, Definition} from './mapping-models/CBAPacakge.model'; -import {Metadata} from './mapping-models/definitions/VlbDefinition'; +import {CBAPackage, Definition, Scripts} 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'; @Injectable({ @@ -33,11 +34,14 @@ import {PackageCreationService} from './package-creation.service'; }) export class PackageCreationStore extends Store { + private folder: FolderNodeElement = new FolderNodeElement(); + private zipFile: JSZip = new JSZip(); + constructor(private packageCreationService: PackageCreationService) { super(new CBAPackage()); } - changeMetaData(metaDataObject: Metadata) { + changeMetaData(metaDataObject: MetaDataTabModel) { this.setState({ ...this.state, @@ -52,4 +56,23 @@ export class PackageCreationStore extends Store { definitions: new Definition(this.state.definitions.files.set(name, content)) }); } + + addScripts(name: string, content: string) { + + this.setState({ + ...this.state, + scripts: new Scripts(this.state.scripts.files.set(name, content)) + }); + + } + + // type => refer to scripts || definitions + // from Files from scripts or imports + removeFromState(name: string, type: string) { + this.state[type].files.delete(name); + } + + saveBluePrint(blob) { + this.packageCreationService.savePackage(blob); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css new file mode 100644 index 000000000..4ab1d7b7e --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css @@ -0,0 +1,11 @@ +a.accordion-delete i { + color: red; +} + +a.accordion-delete i:hover { + color: #007bff; + cursor: pointer; + transition-duration: .5s; + /* for Safari & Chrome */ + -webkit-transition-duration: .5s; +} \ 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.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html new file mode 100644 index 000000000..1685b7eaf --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -0,0 +1,92 @@ +
+
+
+ + +
+ Or you can also Import File + +
+ +
+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+
+ {{file.value}} +
+
+
+ +
+
+ +
+ + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts new file mode 100644 index 000000000..5257822a2 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {ScriptsTabComponent} from './scripts-tab.component'; + +describe('ScriptsTabComponent', () => { + let component: ScriptsTabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ScriptsTabComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ScriptsTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..d4d2b20d0 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -0,0 +1,76 @@ +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({ + selector: 'app-scripts-tab', + templateUrl: './scripts-tab.component.html', + styleUrls: ['./scripts-tab.component.css'] +}) +export class ScriptsTabComponent implements OnInit { + + public scriptsFiles: Map = new Map(); + public uploadedFiles: FileSystemFileEntry[] = []; + public files: NgxFileDropEntry[] = []; + private fileNames: Set = new Set(); + + constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { + this.packageCreationStore.state$.subscribe(cbaPackage => { + if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) { + this.scriptsFiles = cbaPackage.scripts.files; + } + }); + } + + + ngOnInit() { + } + + public dropped(files: NgxFileDropEntry[]) { + this.files = files; + for (const droppedFile of files) { + // Is it a file & Not added before ? + if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) { + const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; + this.uploadedFiles.push(fileEntry); + console.log(fileEntry.name); + this.fileNames.add(fileEntry.name); + + } + } + } + + removeFile(fileIndex: number) { + console.log(this.uploadedFiles[fileIndex]); + this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'scripts'); + this.uploadedFiles.splice(fileIndex, 1); + } + + public fileOver(event) { + console.log(event); + } + + public fileLeave(event) { + console.log(event); + } + + + setFilesToStore() { + for (const droppedFile of this.uploadedFiles) { + droppedFile.file((file: File) => { + const fileReader = new FileReader(); + fileReader.onload = (e) => { + this.packageCreationStore.addScripts(droppedFile.name, + this.packageCreationUtils.transformToJson(fileReader.result)); + }; + fileReader.readAsText(file); + }); + + } + } + + resetTheUploadedFiles() { + this.uploadedFiles = []; + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html index c21bae3af..57bd2b1ad 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html @@ -3,11 +3,12 @@
- + + +
-
+
@@ -35,26 +36,26 @@
-
+
-
-
-
-
- - -
-
- -
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+ + +
+
+ +
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt + sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. +
+
-
-
-
-
-
- -
-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+ +
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt + sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. +
+
-
-
-
\ No newline at end of file +
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts index a83f6eca3..6901d5773 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts @@ -18,9 +18,14 @@ import {FunctionsComponent} from './designer/functions/functions.component'; import {ActionsComponent} from './designer/actions/actions.component'; import {PackageCreationComponent} from './package-creation/package-creation.component'; import {FormsModule} from '@angular/forms'; -import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component'; -import { NgxFileDropModule } from 'ngx-file-drop'; -import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component'; +import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component'; +import {NgxFileDropModule} from 'ngx-file-drop'; +import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component'; +import {SourceEditorComponent} from './source-editor/source-editor.component'; +import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component'; +import {AceEditorModule} from 'ng2-ace-editor'; +import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component'; +import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component'; @NgModule({ declarations: [PackagesDashboardComponent, @@ -37,6 +42,10 @@ import { TemplateMappingComponent } from './package-creation/template-mapping/te PackageCreationComponent, ImportsTabComponent, TemplateMappingComponent, + SourceEditorComponent, + ScriptsTabComponent, + MetadataTabComponent, + DslDefinitionsTabComponent, ], imports: [ CommonModule, @@ -46,6 +55,7 @@ import { TemplateMappingComponent } from './package-creation/template-mapping/te SidebarModule.forRoot(), FormsModule, NgxFileDropModule, + AceEditorModule ], providers: [ApiService, JsonPipe], bootstrap: [] diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css new file mode 100644 index 000000000..f60cc0e17 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css @@ -0,0 +1,7 @@ +.aceEditor { + overflow: hidden; + height: 100% !important; + background-color: white !important; + border: 1px solid #3f51b5; + border-left: 5px solid #3f51b5; +} \ No newline at end of file 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 new file mode 100644 index 000000000..f934888a6 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts new file mode 100644 index 000000000..37386468b --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SourceEditorComponent } from './source-editor.component'; + +describe('SourceEditorComponent', () => { + let component: SourceEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SourceEditorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SourceEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..9c3435d98 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit, ViewChild, Input, AfterViewInit } from '@angular/core'; +// import 'brace/ext/searchbox'; +// import 'ace-builds/webpack-resolver'; +// import 'brace'; +// import 'brace/ext/language_tools'; +// import 'ace-builds/src-min-noconflict/snippets/html'; + +@Component({ + 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 = ''; + + ngOnInit(): void { + // throw new Error("Method not implemented."); + } + + + + ngAfterViewInit() { + this.editor.setTheme('eclipse'); + + this.editor.getEditor().setOptions({ + enableBasicAutocompletion: true + }); + + this.editor.getEditor().commands.addCommand({ + name: 'showOtherCompletions', + bindKey: 'Ctrl-.', + exec(editor) { + + } + }); + } + +} -- cgit 1.2.3-korg