From ac31d2159014a84de91b6c7baeb29adf90284c10 Mon Sep 17 00:00:00 2001 From: shaaban Altanany Date: Wed, 26 Feb 2020 10:05:02 +0200 Subject: add view feature and decompress zip file -decompress package zip file -getting content and file names Issue-ID: CCSDK-2120 Signed-off-by: shaaban Altanany Change-Id: If930b257a9dd7b8e094958aad006ff3769810cb3 --- .../app/common/core/services/api.typed.service.ts | 10 +- .../configuration-dashboard.component.ts | 16 ++- .../configuration-dashboard.service.ts | 8 +- .../configuration-dashboard/package.store.ts | 45 +++++-- .../packages/model/package-dashboard.state.ts | 7 +- .../metadata-tab/metadata-tab.component.ts | 1 + .../template-mapping/TemplateAndMapping.ts | 7 ++ .../templ-mapp-creation.component.ts | 49 ++++---- .../templ-mapp-listing.component.html | 133 ++------------------- .../templ-mapp-listing.component.ts | 45 ++++++- 10 files changed, 146 insertions(+), 175 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/TemplateAndMapping.ts (limited to 'cds-ui') 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 { @@ -60,4 +60,8 @@ export class ApiService { const options = {params: httpParams}; return this.httpClient.get(url, options); } + + getCustomized(url: string, params?: any): Observable { + 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) { } @@ -18,4 +16,10 @@ export class ConfigurationDashboardService { getBluePrintModel(id: string): Observable { 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 { + private zipFile: JSZip = new JSZip(); constructor(private configurationDashboardService: ConfigurationDashboardService) { super(new PackageDashboardState()); @@ -44,15 +45,41 @@ export class PackageStore extends Store { 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; } 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 @@
-
+
-
- {{file.key}} - Mapping - Template + +
+ {{file}} + Mapping + Template
-
-
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(); + private templateAndMappingMap = new Map(); 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) { + return Array.from(this.templateAndMappingMap.keys()); + } + + getValue(file: string) { + return this.templateAndMappingMap.get(file); + } + } -- cgit 1.2.3-korg