diff options
Diffstat (limited to 'cds-ui/designer-client/src/app')
9 files changed, 158 insertions, 106 deletions
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<string, string>; + + constructor() { + this.files = new Map<string, string>(); + } + + 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<CBAPackage> { 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 @@ <label class="label-name">Name <span _ngcontent-uew-c3="">*</span> </label> - + <div class="label-input"> - <input type="input" placeholder="Topology name.vLB.CDS"> + <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS"> </div> </div> </div> @@ -17,7 +17,7 @@ <div class="card-header" id="headingOne"> <h5 class="mb-0 d-flex justify-content-between"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" - aria-controls="collapseOne"> + aria-controls="collapseOne"> 1. Create Template </button> @@ -30,29 +30,35 @@ <label class="label-name">Template Type</label> <div class="label-input"> <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" + value=Velcoity> + <span> Velcoity </span> </label> <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" + value=Velcoity> + <span> Jinja </span> </label> <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" + value=Velcoity> + <span> Kotlin </span> </label> </div> </div> - <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></div> + <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" + data-toggle="modal" + data-target="#exampleModal">Import + File</a></div> <div class="editor-container"> <app-dsl-definitions-tab></app-dsl-definitions-tab> </div> @@ -63,7 +69,7 @@ <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" - aria-expanded="false" aria-controls="collapseTwo"> + aria-expanded="false" aria-controls="collapseTwo"> 2. Manage Mapping </button> </h5> @@ -74,12 +80,12 @@ <div class="text-center"> <a href="#" class="mapping-source-load"> <i class="icon-current-template"></i> - <br/> + <br/> <span>Use Current Template Instance</span> </a> <a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load"> <i class="icon-Upload-attribute"></i> - <br/> + <br/> <div>Upload attribute list</div> <div class="source-load-note">(Should be comma delimited file)</div> </a> @@ -91,15 +97,15 @@ </div> <div class="table-container"> - + </div> </div> - + </div> - + </div> <div class="template-mapping-action"> @@ -111,7 +117,7 @@ <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -122,10 +128,10 @@ </div> <div class="modal-body"> <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" - (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> + (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector"> <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 @@ -141,21 +147,23 @@ <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index"> <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 type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" - (click)="resetTheUploadedFiles()">Cancel + (click)="resetTheUploadedFiles()">Cancel </button> - <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()"> + <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" + (click)="setFilesToStore()"> Import </button> </div> </div> </div> -</div>
\ No newline at end of file +</div> 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<string> = 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 @@ </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> - <div class="card-body max-height-list"> + <div class="card-body max-height-list" *ngFor="let file of templates.files | keyvalue; let mapIndex = index"> <div class="row"> <div class="col"> - <a href="#" class="template-mapping-list active">hostname + <a href="#" class="template-mapping-list active">{{file.key}} <span>Mapping</span> <span>Template</span> </a> </div> - <div class="col"> + <!-- <div class="col"> <a href="#" class="template-mapping-list">vf-module-1 <span>Mapping</span> </a> @@ -36,9 +36,9 @@ <a href="#" class="template-mapping-list">vf-module-2 <span>Mapping</span> </a> - </div> + </div>--> </div> - <div class="row"> + <!-- <div class="row"> <div class="col"> <a href="#" class="template-mapping-list">hostname <span>Mapping</span> @@ -147,10 +147,10 @@ <span>Template</span> </a> </div> - </div> + </div>--> </div> </div> </div> </div> -</div>
\ No newline at end of file +</div> 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<any>(); + @Output() showCreationViewParentNotification = new EventEmitter<any>(); + 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'); + } } |