Mapping Table Editing - add table opreation buttons.

Issue-ID: CCSDK-2795

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

2 files changed, 49 insertions, 16 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 34644c42c..870770ac5 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
@@ -123,18 +123,26 @@
 
 
                     </div>
-                    
+
                 </div>
-                
+
                 <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2">
                     <div class="btn-group mapping-editBar" role="group">
-                          <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
-                            <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
+                        <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
+                            <input type="checkbox" (click)="selectAllProps()" class="custom-control-input"
+                                id="customCheck1"
+                                [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size">
                             <label class="custom-control-label" for="customCheck1"></label>
-                          </div>
-                        <button type="button" class="btn" tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button>
-                        <button type="button" class="btn" tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button>
-                      </div>
+                        </div>
+                        <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()"
+                            tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button>
+                        <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()"
+                            tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button>
+                        <div style="line-height: 35px;font-size: 10px;">
+                            <span>{{selectedProps.size}} selected </span>
+                            <span>({{resourceDictionaryRes.length}} attributes in total)</span>
+                        </div>
+                    </div>
                     <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                         <thead>
                             <tr>
@@ -152,13 +160,15 @@
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
                                 <td>
-                                <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
-                            <input type="checkbox" class="custom-control-input" id="customCheck2" [checked]="selectedProps.has(dict.name)"
-                                        (click)="selectProp(dict.name)">
-                            <label class="custom-control-label" for="customCheck2"></label>
-                          </div>
-                                <!-- <input type="checkbox" [checked]="selectedProps.has(dict.name)"
+                                    <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
+                                        <input type="checkbox" class="custom-control-input"
+                                            id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)"
+                                            (click)="selectProp(dict.name)">
+                                        <label class="custom-control-label" for="customCheck-{{dict.name}}"></label>
+                                    </div>
+                                    <!-- <input type="checkbox" [checked]="selectedProps.has(dict.name)"
                                         (click)="selectProp(dict.name)"></td> -->
+                                </td>
                                 <td>
                                     <img *ngIf="dict.definition?.property?.required"
                                         src="/assets/img/icon-required-yes.svg">
@@ -193,9 +203,22 @@
                 </div>
 
                 <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
+                    <!-- <div class="btn-group mapping-editBar" role="group">
+                        <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
+                            <input type="checkbox" (click)="selectAllProps()" class="custom-control-input"
+                                id="customCheck2"
+                                [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size">
+                            <label class="custom-control-label" for="customCheck2"></label>
+                        </div>
+                        <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()"
+                            tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button>
+                        <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()"
+                            tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button>
+                    </div> -->
                     <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover">
                         <thead>
                             <tr>
+                                <!-- <th></th> -->
                                 <th>Required</th>
                                 <th>Parameter Name</th>
                                 <th>Dictionary Name</th>
@@ -208,6 +231,14 @@
                         </thead>
                         <tbody>
                             <tr *ngFor="let dict of mappingRes">
+                                <!-- <td>
+                                    <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
+                                        <input type="checkbox" class="custom-control-input"
+                                            id="customCheck2-{{dict.name}}" [checked]="selectedProps.has(dict.name)"
+                                            (click)="selectProp(dict.name)">
+                                        <label class="custom-control-label" for="customCheck2-{{dict.name}}"></label>
+                                    </div>
+                                </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 94fa3db99..9d94b6bf8 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
@@ -53,8 +53,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     currentMapping: any;
     edit = false;
     fileToDelete: any = {};
-    parserFactory = new ParserFactory();
-    selectedProps = new Set<string>();
+    parserFactory: ParserFactory;
+    selectedProps: Set<string>;
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -68,6 +68,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
+        this.selectedProps = new Set<string>();
+        this.parserFactory = new ParserFactory();
         this.templateStore.state$.subscribe(templateInfo => {
             // init Template&mapping vars
             console.log('Oninit');