From: Ahmed <ahmed.eldeeb.ext@orange.com>
Date: Mon, 2 Mar 2020 10:11:29 +0000 (+0200)
Subject: Display Mapping result in view table.
X-Git-Tag: 0.7.0~19^2
X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=refs%2Fchanges%2F30%2F102730%2F2;p=ccsdk%2Fcds.git

Display Mapping result in view table.

Update Modals

Issue-ID: CCSDK-2065

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

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 0cd56732d..bb7647449 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -1,4 +1,3 @@
-
 <app-header></app-header>
 
 <div class="new-wrapper">
@@ -7,12 +6,13 @@
             <div class="row">
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
-                        <li>CBA Packages</li>
+                        <li><a routerLink="/packages">CBA Packages</a></li>
                         <li>Package Name</li>
                     </ul>
                 </h2>
                 <div class="col d-flex justify-content-end header-button-save">
-                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()" >Discard Changes</button>
+                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()">Discard
+                        Changes</button>
                     <button class="float btn btn-sm btn-primary" (click)="editBluePrint()">Apply Changes</button>
                 </div>
             </div>
@@ -23,7 +23,7 @@
         <div class="container-fluid body-container">
 
             <div class="container">
-               <!-- <div class="creat-action-container">
+                <!-- <div class="creat-action-container">
                     <a href="#" class="action-button">
                         <i class="icon-clone" aria-hidden="true"></i>
                         <span>Clone</span>
@@ -54,7 +54,8 @@
                                                 <i class="icon-deploy"></i>
                                             </div>
                                             <div class="col-12 package-description">
-                                                Last modified {{ viewedPackage.createdDate | date:'short' }} By {{viewedPackage.updatedBy}}
+                                                Last modified {{ viewedPackage.createdDate | date:'short' }} By
+                                                {{viewedPackage.updatedBy}}
                                             </div>
                                         </div>
 
@@ -63,8 +64,11 @@
                             </div>
                         </div>
                         <div class="col-4 package-view-button">
-                            <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i class="fa fa-play-circle"></i> Deploy</button>
-                            <button class="btn btn-sm btn-outline-secondary" (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"><i class="fa"></i> Download</button>
+                            <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i
+                                    class="fa fa-play-circle"></i> Deploy</button>
+                            <button class="btn btn-sm btn-outline-secondary"
+                                (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"><i
+                                    class="fa"></i> Download</button>
 
                             <button class="btn btn-sm btn-primary">Designer Mode</button>
                         </div>
@@ -77,22 +81,17 @@
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
-                               href="#nav-metadata"
-                               role="tab" aria-controls="nav-metadata"
-                               aria-selected="true"  autofocus  #nameit (focusout)="saveMetaData()">METADATA</a>
+                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
+                                autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
-                               role="tab" aria-controls="nav-template"
-                               aria-selected="false">TEMPLATE & MAPPING</a>
+                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
-                               role="tab" aria-controls="nav-scripts"
-                               aria-selected="false">SCRIPTS</a>
+                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
                             <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
-                               role="tab" aria-controls="nav-imports"
-                               aria-selected="false">IMPORTS</a>
+                                role="tab" aria-controls="nav-imports" aria-selected="false">IMPORTS</a>
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
-                               href="#nav-authentication"
-                               role="tab" aria-controls="nav-authentication"
-                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                         </div>
                     </div>
 
@@ -101,24 +100,24 @@
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                 aria-labelledby="nav-metadata-tab">
+                                aria-labelledby="nav-metadata-tab">
                                 <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                 aria-labelledby="nav-template-tab">
+                                aria-labelledby="nav-template-tab">
                                 <app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                 aria-labelledby="nav-scripts-tab">
+                                aria-labelledby="nav-scripts-tab">
                                 <app-scripts-tab></app-scripts-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
-                                 aria-labelledby="nav-imports-tab">
+                                aria-labelledby="nav-imports-tab">
                                 <app-imports-tab></app-imports-tab>
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                 aria-labelledby="nav-authentication-tab">
+                                aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
                                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
@@ -131,5 +130,4 @@
             </div>
         </div>
     </div>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index 63d392e35..d80ed16b2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -5,7 +5,7 @@
             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
         </div>
         <span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
-                data-target="#exampleModal">Import File</a></span>
+                data-target="#importModal">Import File</a></span>
 
     </div>
 
@@ -82,12 +82,12 @@
 
 </div>
 
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+                <h5 class="modal-title" id="importModalLabel">Import File</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index af5ed4f21..67beca2a1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -6,12 +6,13 @@
             <div class="row">
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
-                        <li>CBA Packages</li>
+                        <li><a routerLink="/packages">CBA Packages</a></li>
                         <li>Package Name</li>
                     </ul>
                 </h2>
                 <div class="col d-flex justify-content-end header-button-save">
-                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()" >Discard Changes</button>
+                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()">Discard
+                        Changes</button>
                     <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
                 </div>
             </div>
@@ -44,22 +45,17 @@
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
-                               href="#nav-metadata"
-                               role="tab" aria-controls="nav-metadata"
-                               aria-selected="false"  autofocus  #nameit (focusout)="test()">METADATA</a>
+                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
+                                autofocus #nameit (focusout)="test()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
-                               role="tab" aria-controls="nav-template"
-                               aria-selected="false">TEMPLATE & MAPPING</a>
+                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
-                               role="tab" aria-controls="nav-scripts"
-                               aria-selected="false">SCRIPTS</a>
+                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
                             <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
-                               role="tab" aria-controls="nav-imports"
-                               aria-selected="false">IMPORTS</a>
+                                role="tab" aria-controls="nav-imports" aria-selected="false">IMPORTS</a>
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
-                               href="#nav-authentication"
-                               role="tab" aria-controls="nav-authentication"
-                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                         </div>
                     </div>
 
@@ -68,24 +64,24 @@
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                 aria-labelledby="nav-metadata-tab">
+                                aria-labelledby="nav-metadata-tab">
                                 <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                 aria-labelledby="nav-template-tab">
+                                aria-labelledby="nav-template-tab">
                                 <app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                 aria-labelledby="nav-scripts-tab">
+                                aria-labelledby="nav-scripts-tab">
                                 <app-scripts-tab></app-scripts-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
-                                 aria-labelledby="nav-imports-tab">
+                                aria-labelledby="nav-imports-tab">
                                 <app-imports-tab></app-imports-tab>
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                 aria-labelledby="nav-authentication-tab">
+                                aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
                                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
@@ -98,4 +94,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
index b2268f060..0808223cd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -19,15 +19,15 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Store} from '../../../../common/core/stores/Store';
+import { Store } from '../../../../common/core/stores/Store';
 
-import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model';
-import {PackageCreationService} from './package-creation.service';
-import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
-import {Observable} from 'rxjs';
-import {ResourceDictionary} from './mapping-models/ResourceDictionary.model';
+import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationService } from './package-creation.service';
+import { MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
+import { Observable } from 'rxjs';
+import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
 
 
 @Injectable({
@@ -73,7 +73,6 @@ export class PackageCreationStore extends Store<CBAPackage> {
     }
 
     addScripts(name: string, content: string) {
-
         this.setState({
             ...this.state,
             scripts: this.state.scripts.setScripts(name, content)
@@ -110,4 +109,8 @@ export class PackageCreationStore extends Store<CBAPackage> {
     getTemplateAndMapping(variables: string[]): Observable<ResourceDictionary[]> {
         return this.packageCreationService.getTemplateAndMapping(variables);
     }
+
+    clear() {
+        this.setState(new CBAPackage());
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 54491488e..8d1894c57 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -30,9 +30,9 @@
                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
                     data-parent="#accordion-script">
                     <div class="card-body">
-                        <ace-editor [(text)]="file.value"  (textChange)="textChanges($event,file.key)"  [mode]="'kotlin'" [autoUpdateContent]="true"
-                            [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
-                            style="height:300px;">
+                        <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'"
+                            #editor style="height:300px;">
                         </ace-editor>
                     </div>
                 </div>
@@ -54,7 +54,7 @@
                 </button>
             </div>
             <div class="modal-body">
-                <ngx-file-drop accept=".kt" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
+                <ngx-file-drop accept=".kt,.py" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
                     (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
                         <div class="folder-upload">
@@ -68,7 +68,7 @@
                                 Files
                             </button>
                         </div>
-                        <div class="folder-upload-type">Allowed file type: Kotlin(Kt)</div>
+                        <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div>
                     </ng-template>
                 </ngx-file-drop>
                 <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
@@ -91,4 +91,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index d211e943e..8a43b010b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -53,10 +53,10 @@
                                 </span>
                             </label>
                         </div>
-                    </div> 
+                    </div>
                     <div class="create-template-import">Use the editor to add parameters or you can also
                         <a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]"
-                            data-target="#exampleModal">Import
+                            data-target="#templateModal">Import
                             File</a></div>
                     <div class="editor-container">
                         <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
@@ -83,7 +83,7 @@
                             <br />
                             <span>Use Current Template Instance</span>
                         </a>
-                        <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#exampleModal"
+                        <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal"
                             class="mapping-source-load">
                             <i class="icon-Upload-attribute"></i>
                             <br />
@@ -125,7 +125,7 @@
                                 <td>{{ dict.name }}</td>
                                 <td>{{ dict.name }}</td>
                                 <td>
-                                    <select class="custom-select" (click)="testOption(dict,$event)">
+                                    <select class="custom-select" (click)="selectSource(dict,$event)">
                                         <option *ngFor="let val of dict.definition.sources | keyvalue">
                                             {{initMap(dict.name,val)}}
                                         </option>
@@ -149,6 +149,45 @@
                     </table>
                 </div>
 
+                <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mx-4 my-2">
+                    <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover">
+                        <thead>
+                            <tr>
+                                <th>Required</th>
+                                <th>Parameter Name</th>
+                                <th>Dictionary Name</th>
+                                <th>Dictionary Source</th>
+                                <th>Dependancies</th>
+                                <th>Default</th>
+                                <th>Data Type</th>
+                                <th>Entry Schema</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let dict of mappingRes">
+                                <td>
+                                    <i *ngIf="dict.definition?.property?.required" class="fa fa-check-square mx-2"></i>
+                                    <i *ngIf="!dict.definition?.property?.required" class="fa fa-square mx-2"></i>
+                                </td>
+                                <td>{{ dict['name'] }}</td>
+                                <td>{{ dict['name'] }}</td>
+                                <td>
+                                    <input type="text" class="form-control" [value]="dict['dictionary-source']"
+                                        disabled>
+
+                                </td>
+                                <td>
+                                    <input type="text" class="form-control" [value]="dict['dependencies']" disabled>
+                                    <!-- {{ dict.definition.sources }} -->
+                                </td>
+                                <td>{{ dict['property']['default'] }}</td>
+                                <td>{{ dict['property']['type'] }}</td>
+                                <td>{{ dict['property']['entry_schema'] }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
 
             </div>
 
@@ -162,12 +201,12 @@
 </div>
 
 
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalLabel"
     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+                <h5 class="modal-title" id="templateModalLabel">Import File</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
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 f4797fc9c..628d963ce 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
@@ -28,6 +28,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     // We use this trigger because fetching the list of persons can be quite long,
     // thus we ensure the data is fetched before rendering
     dtTrigger = new Subject();
+    resTableDtTrigger = new Subject();
     resourceDictionaryRes: ResourceDictionary[] = [];
     allowedExt = ['.vtl'];
     @ViewChild(DataTableDirective, { static: false })
@@ -38,6 +39,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     templateExt = 'Velcoity';
     dependancies = new Map<string, Array<string>>();
     dependanciesSource = new Map<string, string>();
+    mappingRes = [];
 
 
 
@@ -50,17 +52,25 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.templateStore.state$.subscribe(templateInfo => {
+            console.log('----------');
             console.log(templateInfo);
             this.templateInfo = templateInfo;
             this.fileName = templateInfo.fileName.split('/')[1];
-            this.templateFileContent = templateInfo.fileContent;
+            if (templateInfo.type === 'mapping') {
+                this.mappingRes = templateInfo.mapping;
+                this.resourceDictionaryRes = [];
+                this.resTableDtTrigger.next();
+            } else {
+
+                this.templateFileContent = templateInfo.fileContent;
+            }
         });
 
         this.dtOptions = {
             pagingType: 'full_numbers',
             pageLength: 10,
             destroy: true,
-            // retrieve: true,
+            retrieve: true,
         };
     }
 
@@ -122,6 +132,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     }
 
     uploadFile() {
+        this.dependancies.clear();
+        this.dependanciesSource.clear();
         if (this.allowedExt.includes('.csv')) {
             this.fetchCSVkeys();
         } else {
@@ -181,7 +193,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     public fileLeave(event) {
         console.log(event);
     }
-
+    //
     resetTheUploadedFiles() {
         this.uploadedFiles = [];
     }
@@ -191,12 +203,14 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     }
 
     getMappingTableFromTemplate(e) {
+        this.resourceDictionaryRes = [];
         if (e) {
             e.preventDefault();
         }
         if (this.variables && this.variables.length > 0) {
             console.log('base');
             this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => {
+                this.mappingRes = [];
                 this.resourceDictionaryRes = res;
                 console.log(this.resourceDictionaryRes);
                 this.rerender();
@@ -232,7 +246,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         }
     }
 
-    testOption(dict, e) {
+    selectSource(dict, e) {
         const source = e.target.value;
         let keyDepend = null;
         try {
@@ -242,12 +256,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         console.log(source);
         if (keyDepend) {
             this.dependancies.set(dict.name, keyDepend);
-            this.dependanciesSource.set(dict.name, source);
         } else {
             // this.dependancies.delete(dict.name);
             // this.dependanciesSource.delete(dict.name);
         }
+        this.dependanciesSource.set(dict.name, source);
         console.log(this.dependancies);
+        console.log(this.dependanciesSource);
     }
 
     getKeys(map: Map<string, any>) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
index e69de29bb..054b5686e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
@@ -0,0 +1,3 @@
+.template-mapping-list {
+    cursor: pointer;
+}
\ No newline at end of file
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 3ed055c5a..ab97159b6 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
@@ -1,4 +1,4 @@
-<a (click)="openCreationView()" class="create-template-mapping-button">
+<a *ngIf="isCreate" (click)="openCreationView()" class="create-template-mapping-button">
     <i class="fa fa-plus"></i> <span>Create</span>
 </a>
 
@@ -21,8 +21,7 @@
                     <div class="row">
                         <!-- <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}}
+                            <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>
@@ -33,4 +32,4 @@
         </div>
 
     </div>
-</div>
+</div>
\ No newline at end of file
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 d459dac67..372fbca03 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,8 +1,10 @@
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {PackageCreationStore} from '../../package-creation.store';
-import {Mapping, Template} from '../../mapping-models/CBAPacakge.model';
-import {TemplateInfo, TemplateStore} from '../../template.store';
-import {TemplateAndMapping} from '../TemplateAndMapping';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { PackageCreationStore } from '../../package-creation.store';
+import { Mapping, Template } from '../../mapping-models/CBAPacakge.model';
+import { TemplateInfo, TemplateStore } from '../../template.store';
+import { TemplateAndMapping } from '../TemplateAndMapping';
+import { ActivatedRoute } from '@angular/router';
+
 
 @Component({
     selector: 'app-templ-mapp-listing',
@@ -14,11 +16,19 @@ export class TemplMappListingComponent implements OnInit {
     private templateAndMappingMap = new Map<string, TemplateAndMapping>();
     private templates: Template;
     private mapping: Mapping;
+    isCreate = true;
 
-    constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
+    constructor(
+        private packageCreationStore: PackageCreationStore,
+        private templateStore: TemplateStore,
+        private route: ActivatedRoute
+    ) {
     }
 
     ngOnInit() {
+        if (this.route.snapshot.paramMap.has('id')) {
+            this.isCreate = false;
+        }
         this.packageCreationStore.state$.subscribe(cba => {
             if (cba.templates) {
                 this.templates = cba.templates;
@@ -62,16 +72,27 @@ export class TemplMappListingComponent implements OnInit {
     }
 
     setSourceCodeEditor(key: string) {
-        key = 'Templates/' + key + '-template.vtl';
+        const templateKey = 'Templates/' + key + '-template.vtl';
         this.packageCreationStore.state$.subscribe(cba => {
-            if (cba.templates) {
-                console.log(cba.templates);
-                console.log(key);
-                const fileContent = cba.templates.getValue(key.trim());
+            console.log('cba ------');
+            console.log(cba);
+            console.log(key);
+            console.log(this.templateAndMappingMap);
+            if (cba.templates && cba.templates.files.has(templateKey)) {
+                const fileContent = cba.templates.getValue(templateKey.trim());
                 console.log(fileContent);
                 const templateInfo = new TemplateInfo();
                 templateInfo.fileContent = fileContent;
-                templateInfo.fileName = key;
+                templateInfo.fileName = templateKey;
+                this.templateStore.changeTemplateInfo(templateInfo);
+            }
+            const mappingKey = 'Templates/' + key + '-mapping.json';
+            if (cba.mapping && cba.mapping.files.has(mappingKey)) {
+                const obj = JSON.parse(cba.mapping.getValue(mappingKey));
+                const templateInfo = new TemplateInfo();
+                templateInfo.mapping = obj;
+                templateInfo.fileName = mappingKey;
+                templateInfo.type = 'mapping';
                 this.templateStore.changeTemplateInfo(templateInfo);
             }
         });
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
index 7079f8404..106765834 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
@@ -1,4 +1,6 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PackageCreationStore } from '../package-creation.store';
 
 @Component({
     selector: 'app-template-mapping',
@@ -9,12 +11,19 @@ export class TemplateMappingComponent implements OnInit {
     creationView = true;
     listView = false;
 
-    constructor() {
+    constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) {
     }
 
     ngOnInit() {
+        if (this.route.snapshot.paramMap.has('id')) {
+            console.log('Edit mode');
+            this.creationView = false;
+            this.listView = false;
+        } else {
+            console.log('Create mode');
+            this.pakcageStore.clear();
+        }
     }
-
     openCreationView() {
         this.creationView = false;
         this.listView = true;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts
index b3a487bdc..9c8775514 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts
@@ -19,19 +19,22 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Store} from '../../../../common/core/stores/Store';
+import { Store } from '../../../../common/core/stores/Store';
 
 
 export class TemplateInfo {
     fileName: string;
     fileContent: string;
+    type: string;
+    mapping = [];
 
 
     constructor() {
         this.fileName = '';
         this.fileContent = '';
+        this.type = '';
     }