diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html')
-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 | 281 |
1 files changed, 183 insertions, 98 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> |