Replace the existing mapping table with MatTable

Issue-ID: CCSDK-2920

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

2 files changed, 246 insertions, 122 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 6dc120728..be84e7127 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
@@ -130,6 +130,12 @@
                 </div>
 
                 <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2">
+
+                    <mat-form-field>
+                        <mat-label>Filter</mat-label>
+                        <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input>
+                    </mat-form-field>
+
                     <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"
@@ -146,53 +152,63 @@
                             <span>({{resourceDictionaryRes.length}} attributes in total)</span>
                         </div>
                     </div>
-                    <table datatable id="init-table" [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger"
-                        class="row-border hover">
-                        <thead>
-                            <tr>
-                                <th></th>
-                                <th>Required</th>
-                                <th>Template Input</th>
-                                <th>Parameter Name</th>
-                                <th>Dictionary Name</th>
-                                <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;let i=index;trackBy: identify">
-                                <td>
+
+                    <div class="mat-elevation-z8">
+                        <table mat-table [dataSource]="initDataSource" matSort>
+
+                            <!-- Required Column -->
+                            <ng-container matColumnDef="select">
+                                <th mat-header-cell *matHeaderCellDef> </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <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>
+                            </ng-container>
+                            <!-- Required Column -->
+                            <ng-container matColumnDef="Required">
+                                <th mat-header-cell *matHeaderCellDef> Required </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <div class="custom-control custom-checkbox reuiredInput">
                                         <input type="checkbox" class="custom-control-input" #requiredInput
-                                            (click)="setProp(requiredInput,'required',i)"
+                                            (click)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))"
                                             id="requiredCheck-{{dict.name}}">
                                         <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label>
                                     </div>
                                 </td>
-                                <td>
+                            </ng-container>
+
+                            <!-- Name Column -->
+                            <ng-container matColumnDef="Template Input">
+                                <th mat-header-cell *matHeaderCellDef> Template Input </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <div class="custom-control custom-checkbox reuiredInput">
                                         <input type="checkbox" class="custom-control-input" #tempInput
-                                            (click)="setProp(tempInput,'input-param',i)" id="inputCheck-{{dict.name}}">
+                                            (click)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))"
+                                            id="inputCheck-{{dict.name}}">
                                         <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label>
                                     </div>
                                 </td>
-                                <td>{{ dict.name }}</td>
-                                <td>{{ dict.name }}</td>
-                                <td>
+                            </ng-container>
+
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="name">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+                            </ng-container>
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="Dictionary Name">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="dictionary-source">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <select class="custom-select" (click)="selectSource(dict,$event)">
                                         <option *ngFor="let val of dict.definition.sources | keyvalue">
                                             {{initMap(dict.name,val)}}
@@ -200,93 +216,162 @@
 
                                     </select>
                                 </td>
-                                <td>
-                                    <!-- <select class="custom-select">
-                                        <option *ngFor="let val of getKeys(dependancies)">
-                                            {{ getValue(dict.name)}}</option>
-                                    </select> -->
+                            </ng-container>
+
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="dependencies">
+                                <th mat-header-cell *matHeaderCellDef> Dependancies </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <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>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="default">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
+                                <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="Velocity">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
+                                <td mat-cell *matCellDef="let dict">
+                                    <input type="text" class="form-control" #velocity
+                                        (input)="setVelocity(initDataSource.filteredData.indexOf(dict),velocity.value)">
+                                </td>
+
+
+
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="Data Type">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
+                                <td mat-cell *matCellDef="let dict"> {{  dict.definition?.property?.type  }} </td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="Entry Schema">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td>
+                            </ng-container>
+
+                            <tr mat-header-row *matHeaderRowDef="initColumn"></tr>
+                            <tr mat-row *matRowDef="let row; columns: initColumn;"></tr>
+
+                            <!-- Row shown when there is no matching data. -->
+                            <tr class="mat-row" *matNoDataRow>
+                                <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                             </tr>
-                        </tbody>
-                    </table>
-                </div>
+                        </table>
 
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+                    </div>
+                </div>
+                <!------ View Table------->
                 <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 id="res-table" [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger"
-                        class="row-border hover">
-                        <thead>
-                            <tr>
-                                <!-- <th></th> -->
-                                <th>Required</th>
-                                <th>Template Input</th>
-                                <th>Parameter Name</th>
-                                <th>Dictionary Name</th>
-                                <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 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>
+
+
+                    <mat-form-field>
+                        <mat-label>Filter</mat-label>
+                        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
+                    </mat-form-field>
+
+                    <div class="mat-elevation-z8">
+                        <table mat-table [dataSource]="dataSource" matSort>
+
+                            <!-- Required Column -->
+                            <ng-container matColumnDef="Required">
+                                <th mat-header-cell *matHeaderCellDef> Required </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg">
                                     <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg">
                                 </td>
-                                <td>
+                            </ng-container>
+
+                            <!-- Name Column -->
+                            <ng-container matColumnDef="Template Input">
+                                <th mat-header-cell *matHeaderCellDef> Template Input </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg">
                                     <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg">
                                 </td>
-                                <td>{{ dict['name'] }}</td>
-                                <td>{{ dict['name'] }}</td>
-                                <td>
+                            </ng-container>
+
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="name">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+                            </ng-container>
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="Dictionary Name">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="dictionary-source">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <input type="text" class="form-control" [value]="dict['dictionary-source']"
                                         disabled>
-
                                 </td>
-                                <td>
+                            </ng-container>
+
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="dependencies">
+                                <th mat-header-cell *matHeaderCellDef> Dependancies </th>
+                                <td mat-cell *matCellDef="let dict">
                                     <input type="text" class="form-control" [value]="dict['dependencies']" disabled>
-                                    <!-- {{ dict.definition.sources }} -->
                                 </td>
-                                <td>{{ dict['property']['default'] }}</td>
-                                <td *ngIf="dict?.property?.metadata">
-                                    {{dict?.property?.metadata['transform-template']}}
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="default">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="Velocity">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
+                                <td mat-cell *matCellDef="let dict">
+                                    <span *ngIf="dict?.property?.metadata">
+                                        {{dict?.property?.metadata['transform-template']}}
+                                    </span>
+                                    <span *ngIf="!dict?.property?.metadata"></span>
                                 </td>
-                                <td *ngIf="!dict?.property?.metadata"></td>
-                                <td>{{ dict['property']['type'] }}</td>
-                                <td>{{ dict['property']['entry_schema'] }}</td>
+
+
+
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="Data Type">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
+                                <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="Entry Schema">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
+                                <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td>
+                            </ng-container>
+
+                            <tr mat-header-row *matHeaderRowDef="resColumns"></tr>
+                            <tr mat-row *matRowDef="let row; columns: resColumns;"></tr>
+
+                            <!-- Row shown when there is no matching data. -->
+                            <tr class="mat-row" *matNoDataRow>
+                                <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                             </tr>
-                        </tbody>
-                    </table>
+                        </table>
+
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+                    </div>
+
                 </div>
 
 
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 3a8a94bf2..0bf4d9c54 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,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, 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';
@@ -15,14 +15,17 @@ import { TourService } from 'ngx-tour-md-menu';
 import { PackageCreationService } from '../../package-creation.service';
 import { ParserFactory } from '../utils/ParserFactory/ParserFactory';
 import { TemplateType, FileExtension } from '../utils/TemplateType';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ChangeDetectorRef } from '@angular/core';
 declare var $: any;
 
+
 @Component({
     selector: 'app-templ-mapp-creation',
     templateUrl: './templ-mapp-creation.component.html',
     styleUrls: ['./templ-mapp-creation.component.css']
 })
-export class TemplMappCreationComponent implements OnInit, OnDestroy {
+export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewInit {
     @Output() showListView = new EventEmitter<any>();
     @Output() showCreationView = new EventEmitter<any>();
     public uploadedFiles: FileSystemFileEntry[] = [];
@@ -56,6 +59,25 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     fileToDelete: any = {};
     parserFactory: ParserFactory;
     selectedProps: Set<string>;
+    resColumns: string[] = [
+        'Required', 'Template Input',
+        'name', 'Dictionary Name',
+        'dictionary-source', 'dependencies',
+        'default', 'Velocity', 'Data Type',
+        'Entry Schema'
+    ];
+    initColumn: string[] = ['select', ...this.resColumns];
+
+
+
+    // displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
+    dataSource: MatTableDataSource<{}>;
+    initDataSource: MatTableDataSource<{}>;
+    // dataSource = new MatTableDataSource();
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    @ViewChild(MatSort, { static: true }) sort: MatSort;
+    @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator;
+    @ViewChild(MatSort, { static: true }) initSort: MatSort;
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -65,10 +87,21 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         private sharedService: SharedService,
         private packageCreationService: PackageCreationService,
         private tourService: TourService,
+        private cdr: ChangeDetectorRef
     ) {
     }
 
+    ngAfterViewInit() {
+        try {
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+            this.initDataSource.paginator = this.initPaginator;
+            this.initDataSource.sort = this.initSort;
+        } catch (e) { }
+    }
+
     ngOnInit() {
+
         this.selectedProps = new Set<string>();
         this.parserFactory = new ParserFactory();
         this.templateStore.state$.subscribe(templateInfo => {
@@ -85,7 +118,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 this.mappingRes = templateInfo.mapping;
                 this.currentMapping = Object.assign({}, templateInfo);
                 this.resourceDictionaryRes = [];
-                this.resTableDtTrigger.next();
+                // Assign the data to the data source for the table to render
+                this.dataSource = new MatTableDataSource(this.mappingRes);
+                //   this.cdr.detectChanges();
+                this.dataSource.paginator = this.paginator;
+                this.dataSource.sort = this.sort;
+
+
             } else {
                 this.mappingRes = [];
                 this.currentMapping = Any;
@@ -124,26 +163,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             }
         });
 
-        this.initDtOptions = {
-            pagingType: 'full_numbers',
-            pageLength: 25,
-            destroy: true,
-            retrieve: true,
-            columnDefs: [
-                {
-                    targets: [0, 1, 2], // column or columns numbers
-                    orderable: false, // set orderable for selected columns
-                    searchable: false,
-                },
-
-            ],
-        };
-        this.dtOptions = {
-            pagingType: 'full_numbers',
-            pageLength: 25,
-            destroy: true,
-            retrieve: true,
-        };
     }
 
     setProp(e, propName, index) {
@@ -159,6 +178,22 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         }
     }
 
+    applyFilter(event: Event) {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+        if (this.dataSource.paginator) {
+            this.dataSource.paginator.firstPage();
+        }
+    }
+
+    initApplyFilter(event: Event) {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.initDataSource.filter = filterValue.trim().toLowerCase();
+        if (this.initDataSource.paginator) {
+            this.initDataSource.paginator.firstPage();
+        }
+    }
+
     removeProps() {
         console.log(this.selectedProps);
         this.selectedProps.forEach(prop => {
@@ -167,6 +202,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                     console.log('delete...');
                     this.resourceDictionaryRes.splice(index, 1);
                     this.selectedProps.delete(prop);
+                    this.rerender();
                 }
             });
         });
@@ -481,7 +517,10 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     }
 
     rerender(): void {
-        this.dtTrigger.next();
+        this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes);
+        //   this.cdr.detectChanges();
+        this.initDataSource.paginator = this.initPaginator;
+        this.initDataSource.sort = this.initSort;
     }
 
     ngOnDestroy(): void {