From 71f6d98f1003dc9acc212e4132f03bb21c0b73c8 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Wed, 26 Feb 2020 17:47:04 +0200 Subject: adding view package tabs Issue-ID: CCSDK-2120 Signed-off-by: ahmedeldeeb50 Change-Id: I21af8c2b193b3fec4e5bc59e44b7a3b852f3b784 --- .../src/app/common/core/stores/Store.ts | 6 +++- .../configuration-dashboard.component.ts | 33 ++++++++++----------- .../configuration-dashboard/package.store.ts | 34 ++++++++++++---------- .../packages/model/package-dashboard.state.ts | 11 +++++-- .../creationModes/DesignerCreationMode.ts | 3 +- .../creationModes/PackageCreationModes.ts | 12 +++++++- .../mapping-models/metadata/MetaDataTab.model.ts | 1 - .../metadata-tab/metadata-tab.component.ts | 26 ++++++++++------- .../scripts-tab/scripts-tab.component.ts | 29 +++++++++++++----- .../package-list/package-list.component.html | 21 ++++++------- 10 files changed, 108 insertions(+), 68 deletions(-) (limited to 'cds-ui/designer-client/src/app') diff --git a/cds-ui/designer-client/src/app/common/core/stores/Store.ts b/cds-ui/designer-client/src/app/common/core/stores/Store.ts index 1d5b0afc1..0be804270 100644 --- a/cds-ui/designer-client/src/app/common/core/stores/Store.ts +++ b/cds-ui/designer-client/src/app/common/core/stores/Store.ts @@ -1,4 +1,4 @@ -import {Observable, BehaviorSubject} from 'rxjs'; +import { Observable, BehaviorSubject } from 'rxjs'; import { Injectable } from '@angular/core'; export class Store { @@ -19,4 +19,8 @@ export class Store { this.subject.next(nextState); } + public unsubscribe() { + this.subject.unsubscribe(); + } + } 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 a25f43444..766e0b120 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 @@ -1,7 +1,7 @@ -import {Component, OnInit} from '@angular/core'; -import {ActivatedRoute} from '@angular/router'; -import {PackageStore} from './package.store'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { PackageStore } from './package.store'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; @Component({ @@ -13,23 +13,22 @@ export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); constructor(private route: ActivatedRoute, private configurationStore: PackageStore) { - - const id = this.route.snapshot.paramMap.get('id'); - this.configurationStore.getPagedPackages(id); - - } - + // test ngOnInit() { - this.configurationStore.state$.subscribe( - el => { - if (el && el.configuration) { - this.viewedPackage = el.configuration; + const id = this.route.snapshot.paramMap.get('id'); + this.configurationStore.getPagedPackages(id).subscribe( + (bluePrintDetailModels) => { + console.log('-------------xxxxxxxxxxx----------------'); + console.log(bluePrintDetailModels); + this.configurationStore.setConfiguration(bluePrintDetailModels); + + console.log('----------------- id ' + id); + if (bluePrintDetailModels) { this.configurationStore.downloadResource( - this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion); + bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion); } - } - ); + }); } } 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 cf2d42db7..4669ef12d 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 @@ -19,11 +19,11 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Injectable} from '@angular/core'; -import {Store} from '../../../../common/core/stores/Store'; -import {ConfigurationDashboardService} from './configuration-dashboard.service'; -import {PackageDashboardState} from '../model/package-dashboard.state'; -import {BlueprintURLs} from '../../../../common/constants/app-constants'; +import { Injectable } from '@angular/core'; +import { Store } from '../../../../common/core/stores/Store'; +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({ @@ -38,23 +38,20 @@ export class PackageStore extends Store { } getPagedPackages(id: string) { - this.configurationDashboardService.getBluePrintModel(id).subscribe( - (bluePrintDetailModels) => { - this.setState({ - ...this.state, - configuration: bluePrintDetailModels[0] - }); - }); + return this.configurationDashboardService.getBluePrintModel(id); } public downloadResource(path: string) { + console.log('download resource xx'); this.configurationDashboardService.downloadResource(BlueprintURLs.download + path).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); + console.log('try to download '); + const blob = new Blob([response], { type: 'application/octet-stream' }); this.zipFile.loadAsync(blob).then((zip) => { Object.keys(zip.files).forEach((filename) => { + console.log(filename); zip.files[filename].async('string').then((fileData) => { if (fileData) { - if (filename.includes('scripts/')) { + if (filename.includes('Scripts/')) { this.setScripts(filename, fileData); } else if (filename.includes('templates/')) { this.setTemplates(filename, fileData); @@ -68,10 +65,17 @@ export class PackageStore extends Store { }); } + setConfiguration(bluePrintDetailModels) { + this.setState({ + ...this.state, + configuration: bluePrintDetailModels[0] + }); + } + private setScripts(filename: string, fileData: any) { this.setState({ ...this.state, - scripts: this.state.scripts.setScripts(name, fileData) + scripts: this.state.scripts.setScripts(filename, fileData) }); } 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 cb936413c..b010f7a69 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 @@ -20,8 +20,8 @@ limitations under the License. */ -import {BluePrintDetailModel} from './BluePrint.detail.model'; -import {Mapping, Scripts, Template} from '../package-creation/mapping-models/CBAPacakge.model'; +import { BluePrintDetailModel } from './BluePrint.detail.model'; +import { Mapping, Scripts, Template } from '../package-creation/mapping-models/CBAPacakge.model'; export class PackageDashboardState { configuration: BluePrintDetailModel; @@ -30,4 +30,11 @@ export class PackageDashboardState { public mapping: Mapping; public imports: Map; + constructor() { + this.scripts = new Scripts(); + this.templates = new Template(); + this.mapping = new Mapping(); + this.imports = new Map(); + } + } 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 162efff9e..1606d6574 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 @@ -47,7 +47,6 @@ export class DesignerCreationMode extends PackageCreationModes { metadata.template_author = 'Shaaban Ebrahim'; 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'; @@ -58,12 +57,12 @@ export class DesignerCreationMode extends PackageCreationModes { let fullTags = ''; let setCount = 0; cbaPackage.metaData.templateTags.forEach(val => { + setCount++; if (setCount === cbaPackage.metaData.templateTags.size) { fullTags += val; } else { fullTags += val + ', '; } - setCount++; }); metadata.template_tags = fullTags; vlbDefinition.metadata = metadata; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts index 2d234958c..b2a9d14b3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts @@ -31,6 +31,16 @@ export abstract class PackageCreationModes { } getValueOfMetaData(metaDataTab: MetaDataTabModel): string { + let tags = ''; + let count = 0; + for (const tag of metaDataTab.templateTags) { + count++; + if (count === metaDataTab.templateTags.size) { + tags += tag; + } else { + tags += tag + ', '; + } + } return 'TOSCA-Meta-File-Version: 1.0.0\n' + 'CSAR-Version: 1.0\n' + 'Created-By: Shaaban Ebrahim \n' + @@ -38,7 +48,7 @@ export abstract class PackageCreationModes { 'Template-Name:' + metaDataTab.name + '\n' + 'Template-Version:' + metaDataTab.version + '\n' + 'Template-Type: ' + metaDataTab.mode + '\n' + - 'Template-Tags:' + metaDataTab.tags; + 'Template-Tags:' + tags; } 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 57b9408c2..1f8783d5b 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 @@ -26,7 +26,6 @@ export class MetaDataTabModel { name: string; description: string; version: string; - tags: string; mapOfCustomKey: Map = new Map(); entryFileName: string; templateName: 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 28b76033b..eb486cf4f 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 @@ -1,8 +1,8 @@ -import {Component, OnInit} from '@angular/core'; -import {PackageCreationService} from '../package-creation.service'; -import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; -import {PackageCreationStore} from '../package-creation.store'; -import {PackageStore} from '../../configuration-dashboard/package.store'; +import { Component, OnInit } from '@angular/core'; +import { PackageCreationService } from '../package-creation.service'; +import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model'; +import { PackageCreationStore } from '../package-creation.store'; +import { PackageStore } from '../../configuration-dashboard/package.store'; @Component({ @@ -16,14 +16,16 @@ export class MetadataTabComponent implements OnInit { tags = new Set(); customKeysMap = new Map(); modes: object[] = [ - {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, - {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}, - {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}]; + { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, + { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }, + { name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode' }]; private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; - constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore, - private packageStore: PackageStore) { + constructor( + private packageCreationService: PackageCreationService, + private packageCreationStore: PackageCreationStore, + private packageStore: PackageStore) { } @@ -34,10 +36,12 @@ export class MetadataTabComponent implements OnInit { this.packageStore.state$.subscribe(element => { if (element && element.configuration) { + console.log('from element2'); + console.log(element); this.metaDataTab.name = element.configuration.artifactName; this.metaDataTab.version = element.configuration.artifactVersion; - this.metaDataTab.tags = element.configuration.tags; this.metaDataTab.description = element.configuration.artifactDescription; + this.tags = new Set(element.configuration.tags.split(',')); } }); 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 index c70109fc5..bce14c980 100644 --- 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 @@ -1,9 +1,10 @@ -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'; +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'; import 'ace-builds/src-noconflict/ace'; import 'ace-builds/webpack-resolver'; +import { PackageStore } from '../../configuration-dashboard/package.store'; @Component({ selector: 'app-scripts-tab', @@ -17,16 +18,28 @@ export class ScriptsTabComponent implements OnInit { public files: NgxFileDropEntry[] = []; private fileNames: Set = new Set(); - constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { + constructor( + private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private packageStore: PackageStore + ) { + + } + + + ngOnInit() { this.packageCreationStore.state$.subscribe(cbaPackage => { if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) { this.scriptsFiles = cbaPackage.scripts.files; } }); - } - - ngOnInit() { + this.packageStore.state$.subscribe(res => { + // this.scriptsFiles = + console.log('from scripts'); + console.log(res.scripts); + this.scriptsFiles = res.scripts.files; + }); } public dropped(files: NgxFileDropEntry[]) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 7f6c0a6f4..9322ee783 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -7,7 +7,8 @@
- Create + Create
@@ -25,10 +26,11 @@
-
+ {{bluePrint.artifactName}} -
+
@@ -56,25 +58,24 @@

Last modified {{ bluePrint.createdDate | date:'short' }} -

-

By {{bluePrint.updatedBy}}

+

+

By {{bluePrint.updatedBy}}

    • @@ -101,4 +102,4 @@
-
+
\ No newline at end of file -- cgit 1.2.3-korg