Display Mapping result in view table.

Update Modals

Issue-ID: CCSDK-2065

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

2 files changed, 65 insertions, 11 deletions

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>) {