diff options
Diffstat (limited to 'cds-ui/designer-client')
10 files changed, 146 insertions, 175 deletions
diff --git a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts index 9c9477f33..d4851ded5 100644 --- a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts +++ b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts @@ -22,9 +22,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams } from '@angular/common/http'; -import { Observable, of } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Observable} from 'rxjs'; @Injectable() export class ApiService<T> { @@ -60,4 +60,8 @@ export class ApiService<T> { const options = {params: httpParams}; return this.httpClient.get<T>(url, options); } + + getCustomized(url: string, params?: any): Observable<any> { + return this.httpClient.get(url, params); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index b08ea3e4f..a25f43444 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {PackageStore} from './package.store'; import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; -import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model'; @Component({ @@ -17,21 +16,20 @@ export class ConfigurationDashboardComponent implements OnInit { const id = this.route.snapshot.paramMap.get('id'); this.configurationStore.getPagedPackages(id); + + + } + + ngOnInit() { this.configurationStore.state$.subscribe( el => { - const cbaPackage = new CBAPackage(); - if (el && el.configuration) { this.viewedPackage = el.configuration; + this.configurationStore.downloadResource( + this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion); } } ); - - - } - - ngOnInit() { - } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts index ab280fd10..566339db8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts @@ -9,8 +9,6 @@ import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; providedIn: 'root' }) export class ConfigurationDashboardService { - - constructor(private api: ApiService<BluePrintDetailModel>) { } @@ -18,4 +16,10 @@ export class ConfigurationDashboardService { getBluePrintModel(id: string): Observable<BluePrintDetailModel> { return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id); } + + + public downloadResource(id: string) { + return this.api.getCustomized(id, {responseType: 'blob'}); + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts index efbaef8bd..cf2d42db7 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts @@ -21,16 +21,17 @@ limitations under the License. import {Injectable} from '@angular/core'; import {Store} from '../../../../common/core/stores/Store'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; import {ConfigurationDashboardService} from './configuration-dashboard.service'; import {PackageDashboardState} from '../model/package-dashboard.state'; - +import {BlueprintURLs} from '../../../../common/constants/app-constants'; +import * as JSZip from 'jszip'; @Injectable({ providedIn: 'root' }) export class PackageStore extends Store<PackageDashboardState> { + private zipFile: JSZip = new JSZip(); constructor(private configurationDashboardService: ConfigurationDashboardService) { super(new PackageDashboardState()); @@ -44,15 +45,41 @@ export class PackageStore extends Store<PackageDashboardState> { configuration: bluePrintDetailModels[0] }); }); - /* bluePrintDetailModels.forEach( - bluePrintDetailModel => { - this.setState({ - ...this.state, - configuration: bluePrintDetailModel - }); - });*/ + } + + public downloadResource(path: string) { + this.configurationDashboardService.downloadResource(BlueprintURLs.download + path).subscribe(response => { + const blob = new Blob([response], {type: 'application/octet-stream'}); + this.zipFile.loadAsync(blob).then((zip) => { + Object.keys(zip.files).forEach((filename) => { + zip.files[filename].async('string').then((fileData) => { + if (fileData) { + if (filename.includes('scripts/')) { + this.setScripts(filename, fileData); + } else if (filename.includes('templates/')) { + this.setTemplates(filename, fileData); + } else if (filename.includes('definitions/')) { + this.setImports(filename, fileData); + } + } + }); + }); + }); + }); + } + + private setScripts(filename: string, fileData: any) { + this.setState({ + ...this.state, + scripts: this.state.scripts.setScripts(name, fileData) + }); + } + private setImports(filename: string, fileData: any) { } + private setTemplates(filename: string, fileData: any) { + + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts index 638e68c06..cb936413c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts @@ -21,8 +21,13 @@ limitations under the License. import {BluePrintDetailModel} from './BluePrint.detail.model'; +import {Mapping, Scripts, Template} from '../package-creation/mapping-models/CBAPacakge.model'; -export class PackageDashboardState { +export class PackageDashboardState { configuration: BluePrintDetailModel; + public scripts: Scripts; + public templates: Template; + public mapping: Mapping; + public imports: Map<string, string>; } 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 index c71e2564a..28b76033b 100644 --- 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 @@ -38,6 +38,7 @@ export class MetadataTabComponent implements OnInit { this.metaDataTab.version = element.configuration.artifactVersion; this.metaDataTab.tags = element.configuration.tags; this.metaDataTab.description = element.configuration.artifactDescription; + } }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/TemplateAndMapping.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/TemplateAndMapping.ts new file mode 100644 index 000000000..abfe4982b --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/TemplateAndMapping.ts @@ -0,0 +1,7 @@ +export class TemplateAndMapping { + isTemplate = false; + isMapping = false; + + constructor() { + } +} 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 4ab96ee3c..1514392ed 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,13 +1,13 @@ -import { Component, EventEmitter, OnInit, Output, OnDestroy, ViewChild } from '@angular/core'; -import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; -import { PackageCreationStore } from '../../package-creation.store'; -import { TemplateInfo, TemplateStore } from '../../template.store'; -import { Subject } from 'rxjs'; -import { ResourceDictionary } from '../../mapping-models/ResourceDictionary.model'; -import { DataTableDirective } from 'angular-datatables'; -import { MappingAdapter, Mapping } from '../../mapping-models/mappingAdapter.model'; -import { PackageCreationUtils } from '../../package-creation.utils'; -import { JsonConvert } from 'json2typescript'; +import {Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../../package-creation.store'; +import {TemplateInfo, TemplateStore} from '../../template.store'; +import {Subject} from 'rxjs'; +import {ResourceDictionary} from '../../mapping-models/ResourceDictionary.model'; +import {DataTableDirective} from 'angular-datatables'; +import {Mapping, MappingAdapter} from '../../mapping-models/mappingAdapter.model'; +import {PackageCreationUtils} from '../../package-creation.utils'; +import {JsonConvert} from 'json2typescript'; @Component({ selector: 'app-templ-mapp-creation', @@ -31,7 +31,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { dtTrigger = new Subject(); resourceDictionaryRes: ResourceDictionary[] = []; allowedExt = ['.vtl']; - @ViewChild(DataTableDirective, { static: false }) + @ViewChild(DataTableDirective, {static: false}) dtElement: DataTableDirective; MappingAdapter: MappingAdapter; mapping = new Map(); @@ -63,12 +63,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { getFileExtension() { switch (this.templateExt) { - case 'Velcoity': return '.vtl'; - case 'Koltin': return '.ktl'; - case 'Jinja': return '.j2'; - default: return '.vtl'; + case 'Velcoity': + return '.vtl'; + case 'Koltin': + return '.ktl'; + case 'Jinja': + return '.j2'; + default: + return '.vtl'; } } + public getTemplateVariable(fileContent: string) { const variables: string[] = []; const stringsSlittedByBraces = fileContent.split('${'); @@ -113,12 +118,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } } - removeFile(fileIndex: number) { - /*const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name; - this.packageCreationStore.removeFileFromDefinition(filename); - this.uploadedFiles.splice(fileIndex, 1);*/ - } - uploadFile() { if (this.allowedExt.includes('.csv')) { this.fetchCSVkeys(); @@ -189,7 +188,9 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } getMappingTableFromTemplate(e) { - if (e) { e.preventDefault(); } + if (e) { + e.preventDefault(); + } if (this.variables && this.variables.length > 0) { console.log('base'); this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => { @@ -203,15 +204,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { saveToStore() { if (this.fileName) { // Save Mapping to Store - if (this.resourceDictionaryRes) { + if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); + this.resourceDictionaryRes = []; } // Save Template to store if (this.templateFileContent) { this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(), this.templateFileContent); + this.templateFileContent = ''; } } else { 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 9009132e7..62bdb5918 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 @@ -18,136 +18,17 @@ </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> - <div class="card-body max-height-list" - *ngFor="let file of templates.files | keyvalue; let mapIndex = index"> + <div class="card-body max-height-list"> <div class="row"> - <div class="col" style="color:white"> - <a (click)="setSourceCodeEditor(file.key)" class="template-mapping-list active">{{file.key}} - <span>Mapping</span> - <span>Template</span> + <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">--> + <div class="col-4" style="color:white" *ngFor="let file of getKeys(templateAndMappingMap)"> + <a (click)="setSourceCodeEditor(file)" + class="template-mapping-list active">{{file}} + <span *ngIf="getValue(file).isMapping">Mapping</span> + <span *ngIf="getValue(file).isTemplate">Template</span> </a> </div> - <!-- <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div>--> </div> - <!-- <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - <span>Mapping</span> - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - <span>Template</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - <span>Mapping</span> - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - <span>Mapping</span> - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - <span>Template</span> - </a> - </div> - </div>--> </div> </div> </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 9a0cdcdac..46e67fc07 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,7 +1,8 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {PackageCreationStore} from '../../package-creation.store'; -import {Template} from '../../mapping-models/CBAPacakge.model'; +import {Mapping, Template} from '../../mapping-models/CBAPacakge.model'; import {TemplateInfo, TemplateStore} from '../../template.store'; +import {TemplateAndMapping} from '../TemplateAndMapping'; @Component({ selector: 'app-templ-mapp-listing', @@ -10,8 +11,9 @@ import {TemplateInfo, TemplateStore} from '../../template.store'; }) export class TemplMappListingComponent implements OnInit { @Output() showCreationViewParentNotification = new EventEmitter<any>(); + private templateAndMappingMap = new Map<string, TemplateAndMapping>(); private templates: Template; - private sourceCodeEditorContnet: string; + private mapping: Mapping; constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) { } @@ -20,10 +22,40 @@ export class TemplMappListingComponent implements OnInit { this.packageCreationStore.state$.subscribe(cba => { if (cba.templates) { this.templates = cba.templates; + this.mapping = cba.mapping; + let templateAndMapping; + this.templateAndMappingMap.clear(); + this.templates.files.forEach((value, key) => { + templateAndMapping = new TemplateAndMapping(); + templateAndMapping.isTemplate = true; + const isFromTemplate = true; + this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); + }); + this.mapping.files.forEach((value, key) => { + templateAndMapping = new TemplateAndMapping(); + templateAndMapping.isMapping = true; + const isFromTemplate = false; + this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); + }); + console.log('hello there '); + console.log(this.templateAndMappingMap); } }); } + private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) { + const nameOfFile = key.split('/')[1].split('.')[0].split('-')[0]; + if (this.templateAndMappingMap.has(nameOfFile)) { + const templateAndMappingExisted = this.templateAndMappingMap.get(nameOfFile); + !isFromTemplate ? templateAndMappingExisted.isMapping = true : templateAndMappingExisted.isTemplate = true; + this.templateAndMappingMap.set(nameOfFile, templateAndMappingExisted); + } else { + + this.templateAndMappingMap.set(nameOfFile, templateAndMapping); + } + + } + openCreationView() { this.showCreationViewParentNotification.emit('tell parent to open create views'); } @@ -39,4 +71,13 @@ export class TemplMappListingComponent implements OnInit { } }); } + + getKeys(templateAndMappingMap: Map<string, TemplateAndMapping>) { + return Array.from(this.templateAndMappingMap.keys()); + } + + getValue(file: string) { + return this.templateAndMappingMap.get(file); + } + } |