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

4 files changed, 83 insertions, 151 deletions

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