adding view package tabs

Issue-ID: CCSDK-2120

Signed-off-by: ahmedeldeeb50  <ahmed.eldeeb.ext@orange.com>
Change-Id: I21af8c2b193b3fec4e5bc59e44b7a3b852f3b784

9 files changed, 103 insertions, 67 deletions

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<PackageDashboardState> {
     }
 
     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<PackageDashboardState> {
         });
     }
 
+    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<string, string>;
 
+    constructor() {
+        this.scripts = new Scripts();
+        this.templates = new Template();
+        this.mapping = new Mapping();
+        this.imports = new Map<string, string>();
+    }
+
 }
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 <shaaban.eltanany.ext@orange.con>\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<string, string> = new Map<string, string>();
     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<string>();
     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<string> = 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 @@
             </div>
             <div class="card-footer row">
                 <div class="col">
-                    <a routerLink="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create
+                    <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
+                        class="btn-create-package float">Create
                     </a>
                 </div>
                 <div class="col">
@@ -25,10 +26,11 @@
                 <div class="card-body">
                     <div class="row">
                         <div class="col-9 pr-0">
-                            <h5 class="card-title" [routerLink]="['/packages/package', bluePrint.id]" (click)="testDispatch(bluePrint)">
+                            <a class="card-title" [routerLink]="['/packages/package', bluePrint.id]"
+                                (click)="testDispatch(bluePrint)">
                                 <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
                                 {{bluePrint.artifactName}}
-                            </h5>
+                            </a>
 
                         </div>
                         <div class="col-3">
@@ -56,25 +58,24 @@
                     <div class="row">
                         <div class="col">
                             <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }}
-                         </p>
-                         <p>By {{bluePrint.updatedBy}}</p>
+                            </p>
+                            <p>By {{bluePrint.updatedBy}}</p>
                             <ul class="package-contributers">
                                 <li>
                                     <button type="button" class="border-fade" data-toggle="tooltip"
-                                            data-placement="bottom"
-                                            title="User name">
+                                        data-placement="bottom" title="User name">
                                         <img src="/assets/img/img-user1.jpeg">
                                     </button>
                                 </li>
                                 <li>
                                     <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                            title="User name">
+                                        title="User name">
                                         <img src="/assets/img/img-user2.jpg">
                                     </button>
                                 </li>
                                 <li>
                                     <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                            title="User name">
+                                        title="User name">
                                         <img src="/assets/img/img-user3.jpg">
                                     </button>
                                 </li>
@@ -101,4 +102,4 @@
 
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file