diff options
author | 2020-10-19 13:06:09 +0000 | |
---|---|---|
committer | 2020-10-19 13:06:09 +0000 | |
commit | 75946c76fe61ff7f773288335eea314efa245fad (patch) | |
tree | 8e8e3ea345a4b8cc0ed2b9acd1c99a4b9dd74c2e /cds-ui/designer-client/src/app | |
parent | 2798e38a91475a7853f5c66840bf312f82ee9525 (diff) | |
parent | b72d631ca318edcc48629c896e318b4da41a6dbd (diff) |
Merge "Apply style to mat-table in Mapping"
Diffstat (limited to 'cds-ui/designer-client/src/app')
-rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html | 130 |
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> |