Apply style to mat-table in Mapping

Issue-ID: CCSDK-2795

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I1a2d977055835906ab86390986a2eea92d0422ae

1 files changed, 47 insertions, 83 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 be84e7127..70b1644ab 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,33 +130,32 @@
                 </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"
-                                id="customCheck1"
-                                [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size">
-                            <label class="custom-control-label" for="customCheck1"></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 style="line-height: 35px;font-size: 10px;">
-                            <span>{{selectedProps.size}} selected </span>
-                            <span>({{resourceDictionaryRes.length}} attributes in total)</span>
-                        </div>
-                    </div>
-
                     <div class="mat-elevation-z8">
+                        <!--Edit Buttons-->
+                        <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="customCheck1"
+                                    [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size">
+                                <label class="custom-control-label" for="customCheck1"></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 style="line-height: 35px;font-size: 10px;">
+                                <span>{{selectedProps.size}} selected </span>
+                                <span>({{resourceDictionaryRes.length}} attributes in total)</span>
+                            </div>
+                        </div>
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+                        <mat-form-field class="tableFilter float-right">
+                            <mat-label>Filter</mat-label>
+                            <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input>
+                        </mat-form-field>
                         <table mat-table [dataSource]="initDataSource" matSort>
-
-                            <!-- Required Column -->
+                            <!-- select Column -->
                             <ng-container matColumnDef="select">
                                 <th mat-header-cell *matHeaderCellDef> </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -180,8 +179,7 @@
                                     </div>
                                 </td>
                             </ng-container>
-
-                            <!-- Name Column -->
+                            <!-- Template Input Column -->
                             <ng-container matColumnDef="Template Input">
                                 <th mat-header-cell *matHeaderCellDef> Template Input </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -193,19 +191,17 @@
                                     </div>
                                 </td>
                             </ng-container>
-
-                            <!-- Weight Column -->
+                            <!-- Parameter Name 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 -->
+                            <!-- Dictionary Name 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 -->
+                            <!-- Dictionary Source Column -->
                             <ng-container matColumnDef="dictionary-source">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -217,23 +213,19 @@
                                     </select>
                                 </td>
                             </ng-container>
-
-
-                            <!-- Symbol Column -->
+                            <!-- Dependancies 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)">
                                 </td>
                             </ng-container>
-
-                            <!-- Symbol Column -->
+                            <!-- Default 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 -->
+                            <!-- Velocity Column -->
                             <ng-container matColumnDef="Velocity">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -244,43 +236,34 @@
 
 
                             </ng-container>
-
-                            <!-- Symbol Column -->
+                            <!-- Data Type 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 -->
+                            <!-- Entry Schema 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>
                         </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">
-
-
-                    <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">
+                        <mat-form-field class="tableFilter float-right">
+                            <mat-label>Filter</mat-label>
+                            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
+                        </mat-form-field>
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
                         <table mat-table [dataSource]="dataSource" matSort>
-
                             <!-- Required Column -->
                             <ng-container matColumnDef="Required">
                                 <th mat-header-cell *matHeaderCellDef> Required </th>
@@ -289,8 +272,7 @@
                                     <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg">
                                 </td>
                             </ng-container>
-
-                            <!-- Name Column -->
+                            <!-- Template Input Column -->
                             <ng-container matColumnDef="Template Input">
                                 <th mat-header-cell *matHeaderCellDef> Template Input </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -298,19 +280,17 @@
                                     <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg">
                                 </td>
                             </ng-container>
-
-                            <!-- Weight Column -->
+                            <!-- Parameter Name 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 -->
+                            <!-- Dictionary Name 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 -->
+                            <!-- Dictionary Source Column -->
                             <ng-container matColumnDef="dictionary-source">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -318,23 +298,19 @@
                                         disabled>
                                 </td>
                             </ng-container>
-
-
-                            <!-- Symbol Column -->
+                            <!-- Dependancies 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>
                                 </td>
                             </ng-container>
-
-                            <!-- Symbol Column -->
+                            <!-- default 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 -->
+                            <!-- Velocity Column -->
                             <ng-container matColumnDef="Velocity">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
                                 <td mat-cell *matCellDef="let dict">
@@ -347,39 +323,27 @@
 
 
                             </ng-container>
-
-                            <!-- Symbol Column -->
+                            <!-- Data Type 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 -->
+                            <!-- Entry Schema 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>
                         </table>
-
-                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
                     </div>
-
                 </div>
-
-
             </div>
-
-
         </div>
-
     </div>
 </div>