From e0e8b14e106cff2dccc76e6edcc1a7ee6ffe10da Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Mon, 17 Feb 2020 11:49:41 +0200 Subject: adding template and mapping import template files Issue-ID: CCSDK-2102 Signed-off-by: shaaban Altanany Change-Id: I38260328f868f146dbdd16f0da8f26bbb1504c29 --- .../creationModes/DesignerCreationMode.ts | 35 +++-------- .../imports-tab/imports-tab.component.ts | 31 +--------- .../mapping-models/CBAPacakge.model.ts | 16 ++++++ .../package-creation/package-creation.store.ts | 7 +++ .../templ-mapp-creation/TemplateType.ts | 5 ++ .../templ-mapp-creation.component.html | 58 +++++++++++-------- .../templ-mapp-creation.component.ts | 67 +++++++++++++++++++--- .../templ-mapp-listing.component.html | 14 ++--- .../templ-mapp-listing.component.ts | 31 ++++++---- 9 files changed, 158 insertions(+), 106 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts (limited to 'cds-ui/designer-client') diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts index 1df011948..41b81eea3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts @@ -1,5 +1,5 @@ import {PackageCreationModes} from './PackageCreationModes'; -import {CBAPackage, Definition, Scripts} from '../mapping-models/CBAPacakge.model'; +import {CBAPackage, Scripts} from '../mapping-models/CBAPacakge.model'; import {FilesContent} from '../mapping-models/metadata/MetaDataTab.model'; import {Import, Metadata, VlbDefinition} from '../mapping-models/definitions/VlbDefinition'; import {PackageCreationUtils} from '../package-creation.utils'; @@ -13,27 +13,18 @@ export class DesignerCreationMode extends PackageCreationModes { execute(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) { this.addToscaMetaDataFile(cbaPackage.metaData); - this.createDefinitionsFolder(cbaPackage.definitions, packageCreationUtils); + this.createDefinitionsFolder(cbaPackage, packageCreationUtils); this.addScriptsFolder(cbaPackage.scripts); } - - /* private createDefinitionsFolder(definition: Definition) { - definition.imports.forEach((key, value) => { - console.log(key); - FilesContent.putData(key, value); - }); - - }*/ - private addScriptsFolder(scripts: Scripts) { scripts.files.forEach((key, value) => { FilesContent.putData(key, value); }); } - private createDefinitionsFolder(definition: Definition, packageCreationUtils: PackageCreationUtils) { - definition.imports.forEach((key, valueOfFile) => { + private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) { + cbaPackage.definitions.imports.forEach((key, valueOfFile) => { FilesContent.putData(key, valueOfFile); }); @@ -42,29 +33,21 @@ export class DesignerCreationMode extends PackageCreationModes { const metadata: Metadata = new Metadata(); metadata.template_author = 'Shaaban Ebrahim'; - metadata.template_name = definition.metaDataTab.name; - metadata.template_tags = definition.metaDataTab.tags; - metadata.template_version = definition.metaDataTab.version; + metadata.template_name = cbaPackage.metaData.name; + metadata.template_tags = cbaPackage.metaData.tags; + metadata.template_version = cbaPackage.metaData.version; metadata['author-email'] = 'shaaban.eltanany.ext@orange.com'; metadata['user-groups'] = 'test'; - definition.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => { + cbaPackage.definitions.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => { metadata[key] = customKeyValue; }); vlbDefinition.metadata = metadata; - // const files = Import[definition.imports.size]; const files: Import[] = []; - definition.imports.forEach((key, valueOfFile) => { + cbaPackage.definitions.imports.forEach((key, valueOfFile) => { files.push({file: valueOfFile}); }); console.log(vlbDefinition); vlbDefinition.imports = files; - /* vlbDefinition.imports = this.definition.imports; /!*[{ - this.this.definition.imports.forEach(key,value =>{ - - }); - file: 'Definitions/data_types.json' - }]; */ - const value = packageCreationUtils.transformToJson(vlbDefinition); FilesContent.putData(filenameEntry, value); console.log('hello there'); 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 535f783ad..106fe3090 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 @@ -39,26 +39,7 @@ export class ImportsTabComponent implements OnInit { console.log(fileEntry.name); this.fileNames.add(fileEntry.name); - } /*else { - const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; - this.filesUnderDirectory = directorEntry.getFile(''); - // const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; - /* this.uploadedFile.push(droppedFile); - const formData = new FormData() - formData.append('logo', fileEntry, droppedFile.relativePath); - console.log(formData);*/ - /* // It was a directory (empty directories are added, otherwise only files) - const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; - console.log(droppedFile.relativePath, fileEntry); - - - const formData = new FormData(); - formData.append('logo', droppedFile, droppedFile.relativePath); - console.log(formData); - - //this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath)); -*/ - /* }*/ + } } } @@ -76,16 +57,6 @@ export class ImportsTabComponent implements OnInit { console.log(event); } - /* readFileContent(file: File): string | ArrayBuffer { - const fileReader = new FileReader(); - // let content: string | ArrayBuffer = ''; - fileReader.onload = (e) => { - content = fileReader.result; - }; - fileReader.readAsText(file); - return content; - } - */ setFilesToStore() { for (const droppedFile of this.uploadedFiles) { droppedFile.file((file: File) => { 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 78a9b5212..d94a64ca3 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 @@ -47,17 +47,33 @@ export class Scripts { } } + +export class Template { + public files: Map; + + constructor() { + this.files = new Map(); + } + + public setTemplates(key: string, value: string) { + this.files.set(key, value); + return this; + } +} + export class CBAPackage { public metaData: MetaDataTabModel; public definitions: Definition; public scripts: Scripts; + public templates: Template; constructor() { this.definitions = new Definition(); this.scripts = new Scripts(); this.metaData = new MetaDataTabModel(); + this.templates = new Template(); } 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 3e37952b2..3dae2e570 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 @@ -86,4 +86,11 @@ export class PackageCreationStore extends Store { saveBluePrint(blob) { this.packageCreationService.savePackage(blob); } + + addTemplate(filePath: string, fileContent: string) { + this.setState({ + ...this.state, + templates: this.state.templates.setTemplates(filePath, fileContent) + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts new file mode 100644 index 000000000..17a4bfae6 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts @@ -0,0 +1,5 @@ +export enum TemplateType { + Velocity = 'vtl', + Koltin = 'kt', + Jinja = 'Unknown' +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 10f1db65d..3c92bc7c7 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -4,9 +4,9 @@ - +
- +
@@ -17,7 +17,7 @@
@@ -30,29 +30,35 @@
-
Use the editor to add parameters or you can also Import File
+
Use the editor to add parameters or you can also Import + File
@@ -63,7 +69,7 @@
@@ -74,12 +80,12 @@
-
+
Use Current Template Instance -
+
Upload attribute list
(Should be comma delimited file)
 @@ -91,15 +97,15 @@
- +
- + - +
@@ -111,7 +117,7 @@ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 3a938c5ae..752bd510b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -1,15 +1,68 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../../package-creation.store'; @Component({ - selector: 'app-templ-mapp-creation', - templateUrl: './templ-mapp-creation.component.html', - styleUrls: ['./templ-mapp-creation.component.css'] + selector: 'app-templ-mapp-creation', + templateUrl: './templ-mapp-creation.component.html', + styleUrls: ['./templ-mapp-creation.component.css'] }) export class TemplMappCreationComponent implements OnInit { - constructor() { } + public uploadedFiles: FileSystemFileEntry[] = []; + private fileNames: Set = new Set(); - ngOnInit() { - } + public files: NgxFileDropEntry[] = []; + fileName: any; + constructor(private packageCreationStore: PackageCreationStore) { + } + + 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); + this.fileNames.add(fileEntry.name); + + } + } + } + + removeFile(fileIndex: number) { + /*const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name; + this.packageCreationStore.removeFileFromDefinition(filename); + this.uploadedFiles.splice(fileIndex, 1);*/ + } + + setFilesToStore() { + for (const droppedFile of this.uploadedFiles) { + droppedFile.file((file: File) => { + const fileReader = new FileReader(); + fileReader.onload = (e) => { + this.packageCreationStore.addTemplate('Templates/' + this.fileName, + fileReader.result.toString()); + }; + fileReader.readAsText(file); + }); + + } + } + + public fileOver(event) { + console.log(event); + } + + public fileLeave(event) { + console.log(event); + } + + resetTheUploadedFiles() { + this.uploadedFiles = []; + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index a0a54031f..ddf06c824 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -19,15 +19,15 @@
\ No newline at end of file + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts index 525e58128..5cb41c35e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -1,20 +1,29 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {PackageCreationStore} from '../../package-creation.store'; +import {Template} from '../../mapping-models/CBAPacakge.model'; @Component({ - selector: 'app-templ-mapp-listing', - templateUrl: './templ-mapp-listing.component.html', - styleUrls: ['./templ-mapp-listing.component.css'] + selector: 'app-templ-mapp-listing', + templateUrl: './templ-mapp-listing.component.html', + styleUrls: ['./templ-mapp-listing.component.css'] }) export class TemplMappListingComponent implements OnInit { - @Output() showCreationViewParentNotification = new EventEmitter(); + @Output() showCreationViewParentNotification = new EventEmitter(); + private templates: Template; - constructor() { } + constructor(private packageCreationStore: PackageCreationStore) { + this.packageCreationStore.state$.subscribe(cba => { + if (cba.templates) { + this.templates = cba.templates; + } + }); + } - ngOnInit() { - } + ngOnInit() { + } - openCreationView() { - this.showCreationViewParentNotification.emit('tell parent to open create views'); - } + openCreationView() { + this.showCreationViewParentNotification.emit('tell parent to open create views'); + } } -- cgit 1.2.3-korg