</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"
<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)}}
</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>
Code Review / ccsdk / cds.git / blobdiff