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 <shaaban.eltanany.ext@orange.com>
Change-Id: If930b257a9dd7b8e094958aad006ff3769810cb3

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);
+    }
+
 }