extractor varaibles from template with import or copy&paste file content

add velocity column to mapping table

Issue-ID: CCSDK-2795

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

3 files changed, 32 insertions, 8 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 b4de578b9..6d980190e 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
@@ -10,10 +10,11 @@ export class MappingAdapter {
         private dependanciesSource: Map<string, string>) { }
 
     ToMapping(): Mapping {
+       // console.log(this.resourceDictionary.definition.property);
         const mapping = new Mapping();
         mapping.name = this.resourceDictionary.name;
         mapping.dictionaryName = this.resourceDictionary.name;
-        mapping.property = this.resourceDictionary.definition.property;
+        mapping.property = Object.assign({}, this.resourceDictionary.definition.property);
         mapping.inputParam = false;
         mapping.dictionarySource = this.dependanciesSource.get(mapping.name);
         if (this.dependancies.get(mapping.name)) {
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 870770ac5..495f8e19c 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
@@ -71,7 +71,8 @@
                         </div>
                     </div>
                     <div class="create-template-import">Use the editor to add parameters or you can also
-                        <a href="#" data-toggle="modal" data-target="#templateModal"><b>Import
+                        <a href="#" data-toggle="modal" (click)="allowedExt=['.'+templateExt]"
+                            data-target="#templateModal"><b>Import
                                 File</b></a>. <br /> <span class="templateNote"><i class="icon-info"
                                 aria-hidden="true"></i> When you import new file, the new attributes will replace
                             current attributes.</span></div>
@@ -98,8 +99,8 @@
                 <div class="card-body">
                     <p class="text-center"><b>Select a source to load config parameters</b></p>
                     <div class="text-center">
-                        <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)"
-                            (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0
+                        <button [disabled]="!(templateFileContent?.trim()?.length > 0)"
+                            (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="templateFileContent?.trim()?.length > 0
                             ?'hover-enable':'hover-disable'">
                             <i class="icon-use-attributes"></i>
                             <br />
@@ -153,12 +154,13 @@
                                 <th>Dictionary Source</th>
                                 <th>Dependancies</th>
                                 <th>Default</th>
+                                <th>Velocity</th>
                                 <th>Data Type</th>
                                 <th>Entry Schema</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr *ngFor="let dict of resourceDictionaryRes">
+                            <tr *ngFor="let dict of resourceDictionaryRes;let i=index;trackBy: identify">
                                 <td>
                                     <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
                                         <input type="checkbox" class="custom-control-input"
@@ -189,12 +191,13 @@
                                     <!-- <select class="custom-select">
                                         <option *ngFor="let val of getKeys(dependancies)">
                                             {{ getValue(dict.name)}}</option>
-
                                     </select> -->
                                     <input type="text" class="form-control" [ngModel]="getValue(dict.name)">
                                     <!-- {{ dict.definition.sources }} -->
                                 </td>
                                 <td>{{ dict.definition?.property?.default }}</td>
+                                <td><input type="text" class="form-control" #velocity
+                                        (input)="setVelocity(i,velocity.value)"></td>
                                 <td>{{ dict.definition?.property?.type }}</td>
                                 <td>{{ dict.definition?.property['entry_schema'] }}</td>
                             </tr>
@@ -225,6 +228,7 @@
                                 <th>Dictionary Source</th>
                                 <th>Dependancies</th>
                                 <th>Default</th>
+                                <th>Velocity</th>
                                 <th>Data Type</th>
                                 <th>Entry Schema</th>
                             </tr>
@@ -257,6 +261,10 @@
                                     <!-- {{ dict.definition.sources }} -->
                                 </td>
                                 <td>{{ dict['property']['default'] }}</td>
+                                <td *ngIf="dict?.property?.metadata">
+                                    {{dict?.property?.metadata['transform-template']}}
+                                </td>
+                                <td *ngIf="!dict?.property?.metadata"></td>
                                 <td>{{ dict['property']['type'] }}</td>
                                 <td>{{ dict['property']['entry_schema'] }}</td>
                             </tr>
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 9d94b6bf8..a99f65b86 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
@@ -301,8 +301,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 const fileReader = new FileReader();
                 fileReader.onload = (e) => {
                     this.templateFileContent = fileReader.result.toString();
-                    this.variables = this.getTemplateVariable(this.templateFileContent);
-                    console.log(this.variables);
+                    // this.variables = this.getTemplateVariable(this.templateFileContent);
+                    // console.log(this.variables);
 
                 };
                 fileReader.readAsText(file);
@@ -338,12 +338,27 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.showCreationView.emit('close create form and open list');
     }
 
+    identify(index, item) {
+        return item.name;
+    }
+    setVelocity(index, value) {
+        // console.log('velocity value = ' + value);
+        // console.log(this.resourceDictionaryRes[index]);
+        // tslint:disable-next-line: no-string-literal
+        this.resourceDictionaryRes[index].definition.property['metadata'] = {
+            'transform-template': value
+        };
+        console.log(this.resourceDictionaryRes[index]);
+    }
+
     getMappingTableFromTemplate(e) {
         console.log('-' + this.templateFileContent + '-');
         this.resourceDictionaryRes = [];
         if (e) {
             e.preventDefault();
         }
+        this.variables = this.getTemplateVariable(this.templateFileContent);
+        console.log(this.variables);
         if (this.variables && this.variables.length > 0) {
             console.log('base');
             this.packageCreationService.getTemplateAndMapping(this.variables).subscribe(res => {