adding dependacies to mapping table

Issue-ID: CCSDK-2065

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

5 files changed, 113 insertions, 47 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
index 638654a95..b4de578b9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
@@ -1,10 +1,13 @@
 import { ResourceDictionary } from './ResourceDictionary.model';
 import { JsonObject, JsonProperty, JsonConvert } from 'json2typescript';
 
-// Convert ResourceDictionary object to store Mapping
+// Convert ResourceDictionary object to store Mapping.
 export class MappingAdapter {
 
-    constructor(private resourceDictionary: ResourceDictionary) { }
+    constructor(
+        private resourceDictionary: ResourceDictionary,
+        private dependancies: Map<string, Array<string>>,
+        private dependanciesSource: Map<string, string>) { }
 
     ToMapping(): Mapping {
         const mapping = new Mapping();
@@ -12,8 +15,12 @@ export class MappingAdapter {
         mapping.dictionaryName = this.resourceDictionary.name;
         mapping.property = this.resourceDictionary.definition.property;
         mapping.inputParam = false;
-        mapping.dictionarySource = 'sdnc';
-        mapping.dependencies = [];
+        mapping.dictionarySource = this.dependanciesSource.get(mapping.name);
+        if (this.dependancies.get(mapping.name)) {
+            mapping.dependencies = this.dependancies.get(mapping.name);
+        } else {
+            mapping.dependencies = [];
+        }
         mapping.version = 0;
         return mapping;
     }
@@ -32,7 +39,7 @@ export class Mapping {
     @JsonProperty('dictionary-source')
     dictionarySource: string;
     @JsonProperty()
-    dependencies: [];
+    dependencies: string[];
     @JsonProperty()
     version: number;
 }
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;
+    }
+}
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 62bdb5918..129576cbe 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
@@ -9,8 +9,7 @@
             <div class="card-header" id="headingThree">
                 <h5 class="mb-0 d-flex justify-content-between">
                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"
-                            aria-expanded="true"
-                            aria-controls="collapseThree">
+                        aria-expanded="true" aria-controls="collapseThree">
                         Template and Mapping List
                     </button>
 
@@ -22,8 +21,8 @@
                     <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.split(',')[1])"
+                                class="template-mapping-list active">{{file.split(',')[0]}}
                                 <span *ngIf="getValue(file).isMapping">Mapping</span>
                                 <span *ngIf="getValue(file).isTemplate">Template</span>
                             </a>
@@ -34,4 +33,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 46e67fc07..61c376c51 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,8 @@
-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';
 
 @Component({
     selector: 'app-templ-mapp-listing',
@@ -45,13 +45,14 @@ export class TemplMappListingComponent implements OnInit {
 
     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);
+        const fullName = nameOfFile + ',' + key;
+        if (this.templateAndMappingMap.has(fullName)) {
+            const templateAndMappingExisted = this.templateAndMappingMap.get(fullName);
             !isFromTemplate ? templateAndMappingExisted.isMapping = true : templateAndMappingExisted.isTemplate = true;
-            this.templateAndMappingMap.set(nameOfFile, templateAndMappingExisted);
+            this.templateAndMappingMap.set(fullName, templateAndMappingExisted);
         } else {
 
-            this.templateAndMappingMap.set(nameOfFile, templateAndMapping);
+            this.templateAndMappingMap.set(fullName, templateAndMapping);
         }
 
     }
@@ -63,7 +64,10 @@ export class TemplMappListingComponent implements OnInit {
     setSourceCodeEditor(key: string) {
         this.packageCreationStore.state$.subscribe(cba => {
             if (cba.templates) {
-                const fileContent = cba.templates.getValue(key);
+                console.log(cba.templates);
+                console.log(key);
+                const fileContent = cba.templates.getValue(key.trim());
+                console.log(fileContent);
                 const templateInfo = new TemplateInfo();
                 templateInfo.fileContent = fileContent;
                 templateInfo.fileName = key;