adding dependacies to mapping table

Issue-ID: CCSDK-2065

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

2 files changed, 83 insertions, 27 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 d08ada98d..d211e943e 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,9 +53,10 @@
                                 </span>
                             </label>
                         </div>
-                    </div>
-                    <div class="create-template-import">Use the editor to add parameters or you can also <a href="#"
-                            data-toggle="modal" data-target="#exampleModal">Import
+                    </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
                             File</a></div>
                     <div class="editor-container">
                         <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
@@ -117,28 +118,32 @@
                         </thead>
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
-                                <td>{{ dict.definition?.property?.required }}</td>
+                                <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>
-                                    <select class="custom-select">
-                                        <option *ngFor="let val of dict.definition.sources | keyvalue">{{val.key}}
+                                    <select class="custom-select" (click)="testOption(dict,$event)">
+                                        <option *ngFor="let val of dict.definition.sources | keyvalue">
+                                            {{initMap(dict.name,val)}}
                                         </option>
 
                                     </select>
                                 </td>
                                 <td>
-                                    <select class="custom-select">
-                                        <option
-                                            *ngFor="let val of dict?.definition?.sources?.sdnc?.properties['key-dependencies'] ">
-                                            {{val}}</option>
+                                    <!-- <select class="custom-select">
+                                        <option *ngFor="let val of getKeys(dependancies)">
+                                            {{ getValue(dict.name)}}</option>
 
-                                    </select>
+                                    </select> -->
+                                    <input type="text" class="form-control" [ngModel]="getValue(dict.name)">
                                     <!-- {{ dict.definition.sources }} -->
                                 </td>
                                 <td>{{ dict.definition?.property?.default }}</td>
-                                <td>{{ dict.dataType }}</td>
-                                <td>{{ dict.entrySchema }}</td>
+                                <td>{{ dict.definition?.property?.type }}</td>
+                                <td>{{ dict.definition?.property['entry_schema'] }}</td>
                             </tr>
                         </tbody>
                     </table>
@@ -182,7 +187,9 @@
                                 Files
                             </button>
                         </div>
-                        <div class="folder-upload-type">Allowed file type: json</div>
+                        <div class="folder-upload-type">Allowed file type:
+                            {{allowedExt}}
+                        </div>
                     </ng-template>
                 </ngx-file-drop>
                 <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
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 1514392ed..f4797fc9c 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, 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';
+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',
@@ -24,19 +24,21 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     fileName: any;
     templateInfo = new TemplateInfo();
     private variables: string[] = [];
-    private mappingFileValues = [];
     dtOptions: DataTables.Settings = {};
     // 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();
     resourceDictionaryRes: ResourceDictionary[] = [];
     allowedExt = ['.vtl'];
-    @ViewChild(DataTableDirective, {static: false})
+    @ViewChild(DataTableDirective, { static: false })
     dtElement: DataTableDirective;
     MappingAdapter: MappingAdapter;
     mapping = new Map();
     templateFileContent: string;
     templateExt = 'Velcoity';
+    dependancies = new Map<string, Array<string>>();
+    dependanciesSource = new Map<string, string>();
+
 
 
     constructor(
@@ -51,6 +53,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             console.log(templateInfo);
             this.templateInfo = templateInfo;
             this.fileName = templateInfo.fileName.split('/')[1];
+            this.templateFileContent = templateInfo.fileContent;
         });
 
         this.dtOptions = {
@@ -144,7 +147,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     private convertDictionaryToMap(resourceDictionaries: ResourceDictionary[]): Mapping[] {
         const mapArray: Mapping[] = [];
         for (const resourceDictionary of resourceDictionaries) {
-            this.MappingAdapter = new MappingAdapter(resourceDictionary);
+            this.MappingAdapter = new MappingAdapter(resourceDictionary, this.dependancies, this.dependanciesSource);
             mapArray.push(this.MappingAdapter.ToMapping());
         }
         console.log(mapArray);
@@ -201,7 +204,15 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         }
     }
 
+    initMap(key, map) {
+        if (!this.dependanciesSource.has(key)) {
+            this.dependanciesSource.set(key, map.key);
+        }
+        return map.key;
+    }
     saveToStore() {
+        console.log(this.dependancies);
+        console.log(this.dependanciesSource);
         if (this.fileName) {
             // Save Mapping to Store
             if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) {
@@ -221,6 +232,32 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         }
     }
 
+    testOption(dict, e) {
+        const source = e.target.value;
+        let keyDepend = null;
+        try {
+            keyDepend = dict.definition.sources[source].properties['key-dependencies'] || null;
+        } catch (e) { }
+        console.log(dict);
+        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);
+        }
+        console.log(this.dependancies);
+    }
+
+    getKeys(map: Map<string, any>) {
+        return Array.from(map.keys());
+    }
+
+    getValue(key) {
+        return this.dependancies.get(key);
+    }
+
     rerender(): void {
         if (this.dtElement.dtInstance) {
             console.log('rerender');
@@ -240,3 +277,15 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.dtTrigger.unsubscribe();
     }
 }
+
+class DependancyVal {
+    source: string;
+    keyDepend: any;
+    constructor(
+        source: string,
+        keyDepend: any
+    ) {
+        this.source = source;
+        this.keyDepend = keyDepend;
+    }
+}