Mapping Table Editing

Issue-ID: CCSDK-2795

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

3 files changed, 79 insertions, 10 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 dfd8c31a8..4566f34d7 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
@@ -9,8 +9,8 @@
             class="btn btn-outline-danger" title="Delete Template">Delete</button>
         <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit"
             class="btn btn-outline-secondary">Clear</button>
-        <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close"
-            class="btn btn-primary">Finish</button>
+        <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0"
+            title="Submit template and close" class="btn btn-primary">Finish</button>
     </div>
 </div>
 <div class="card creat-card">
@@ -31,8 +31,8 @@
         <div class="card">
             <div class="card-header" id="headingOne">
                 <h5 class="mb-0 d-flex justify-content-between">
-                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" id="templateTab" aria-expanded="true"
-                        aria-controls="collapseOne">
+                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" id="templateTab"
+                        aria-expanded="true" aria-controls="collapseOne">
                         1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span>
                     </button>
 
@@ -59,7 +59,8 @@
                                     Jinja
                                 </span>
                             </label>
-                            <label tourAnchor="tm-templateContent" name="trst" (click)="allowedExt=['.kt'];templateExt='kt'">
+                            <label tourAnchor="tm-templateContent" name="trst"
+                                (click)="allowedExt=['.kt'];templateExt='kt'">
                                 <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
                                     name="exampleRadios" id="exampleRadios1" value=kt>
 
@@ -70,8 +71,7 @@
                         </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" 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>
@@ -86,8 +86,9 @@
         <div class="card">
             <div class="card-header" id="headingTwo">
                 <h5 class="mb-0">
-                    <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" data-toggle="collapse"
-                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab"
+                        data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
+                        aria-controls="collapseTwo">
                         2. Manage Mapping <span
                             class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span>
                     </button>
@@ -127,6 +128,7 @@
                     <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                         <thead>
                             <tr>
+                                <th></th>
                                 <th>Required</th>
                                 <th>Parameter Name</th>
                                 <th>Dictionary Name</th>
@@ -139,6 +141,8 @@
                         </thead>
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
+                                <td><input type="checkbox" [checked]="selectedProps.has(dict.name)"
+                                        (click)="selectProp(dict.name)"></td>
                                 <td>
                                     <img *ngIf="dict.definition?.property?.required"
                                         src="/assets/img/icon-required-yes.svg">
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 78449fba9..94fa3db99 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
@@ -54,6 +54,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     edit = false;
     fileToDelete: any = {};
     parserFactory = new ParserFactory();
+    selectedProps = new Set<string>();
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -88,7 +89,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 this.resourceDictionaryRes = [];
             }
             this.templateFileContent = templateInfo.fileContent;
-            this.templateExt = this.templateInfo.ext || this.templateExt ;
+            this.templateExt = this.templateInfo.ext || this.templateExt;
             this.currentTemplate = Object.assign({}, templateInfo);
 
             if (templateInfo.type === 'template' || templateInfo.type.includes('template')) {
@@ -101,6 +102,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
         });
 
+
         this.sharedService.isEdit().subscribe(res => {
             console.log('------------------------....');
             console.log(res);
@@ -131,6 +133,68 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         };
     }
 
+    selectProp(value) {
+        console.log(value);
+        if (this.selectedProps.has(value)) {
+            this.selectedProps.delete(value);
+        } else {
+            this.selectedProps.add(value);
+        }
+    }
+
+    removeProps() {
+        console.log(this.selectedProps);
+        this.selectedProps.forEach(prop => {
+            this.resourceDictionaryRes.forEach((res, index) => {
+                if (res.name === prop) {
+                    console.log('delete...');
+                    this.resourceDictionaryRes.splice(index, 1);
+                    this.selectedProps.delete(prop);
+                }
+            });
+        });
+    }
+    selectAllProps() {
+        if (this.resourceDictionaryRes.length === this.selectedProps.size) {
+            this.selectedProps = new Set<string>();
+        } else {
+            this.resourceDictionaryRes.forEach(prop => {
+                console.log(prop);
+                this.selectedProps.add(prop.name);
+            });
+        }
+
+    }
+    reMap() {
+        let currentResDictionary = [];
+        if (this.selectedProps && this.selectedProps.size > 0) {
+            console.log('base');
+            this.packageCreationService.getTemplateAndMapping([...this.selectedProps]).subscribe(res => {
+                let message = 'Re-Auto mapping';
+                this.mappingRes = [];
+                currentResDictionary = res;
+                console.log(currentResDictionary);
+                if (currentResDictionary && currentResDictionary.length <= 0) {
+                    message = 'No values for those attributes';
+                }
+
+                // Replcae new values with the old ones
+                currentResDictionary.forEach(curr => {
+                    for (let i = 0; i < this.resourceDictionaryRes.length; i++) {
+                        if (this.resourceDictionaryRes[i].name === curr.name) {
+                            this.resourceDictionaryRes[i] = curr;
+                        }
+                    }
+                });
+                this.rerender();
+                this.toastr.success(message, 'Success');
+            }, err => {
+                this.toastr.error('Error');
+            });
+        }
+
+    }
+
     getFileExtension() {
         switch (this.templateExt) {
             case 'vtl':
diff --git a/cds-ui/designer-client/src/assets/img/trash-solid.svg b/cds-ui/designer-client/src/assets/img/trash-solid.svg
new file mode 100644
index 000000000..e40a23d12
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/trash-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" class="svg-inline--fa fa-trash fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>
\ No newline at end of file