You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2020/07/30 14:51:26 UTC
[incubator-streampipes] 01/02: Add search and sort to table widget
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 61d3c0fc59a66a6d5426f301e5ac28221ff586b5
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Thu Jul 30 13:48:45 2020 +0200
Add search and sort to table widget
---
.../widgets/table/table-widget.component.html | 27 ++++++++++++++--------
.../widgets/table/table-widget.component.ts | 19 +++++++++++++++
2 files changed, 36 insertions(+), 10 deletions(-)
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
index f768afb..02d491d 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
@@ -16,11 +16,15 @@
~
-->
-<!--<div>-->
-
<div fxLayout="column" fxLayoutAlign="stretch">
<div class="assemblyOptionsDataExplorer sp-blue-bg m-0 row header h-40" style="margin-left: 0px;margin-right: 0px;">
+
<div fxFlex="100" layout="row" fxLayoutAlign="end center" style="margin-left: 0px;margin-right: 0px;">
+ <mat-form-field appearance="outline" class="sp_form_field_wrapper" style="margin-right: 5px;">
+ <mat-label>Search</mat-label>
+ <input matInput (input)="onFilterChange($event.target.value)" >
+ </mat-form-field>
+
<sp-select-properties
label="Select Columns"
multiple = true
@@ -44,19 +48,23 @@
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
- <table *ngIf="showData" mat-table [dataSource]="dataSource" matSort >
- <ng-container *ngFor="let element of this.selectedColumns" [cdkColumnDef]="element.runtimeName">
+ <table
+ mat-table
+ mat-sort
+ *ngIf="showData"
+ [dataSource]="dataSource" matSort
+ (matSortChange)="sortData($event)">
+ <ng-container
+ *ngFor="let element of this.selectedColumns"
+ [cdkColumnDef]="element.runtimeName">
<div *ngIf="!isTimestamp(element)">
- <!-- <td *ngIf="isTimestamp(property)">{{runtimeData[property.properties.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>-->
- <th mat-header-cell *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element.runtimeName}}</label></th>
+ <th mat-header-cell mat-sort-header *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element.runtimeName}}</label></th>
<td mat-cell *matCellDef="let row"style="text-align: center;">{{row[element.runtimeName]}}</td>
-
</div>
<div *ngIf="isTimestamp(element)">
- <th mat-header-cell *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element.runtimeName}}</label></th>
+ <th mat-header-cell mat-sort-header *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element.runtimeName}}</label></th>
<td mat-cell *matCellDef="let row"style="text-align: left;">{{row[element.runtimeName]| date:'yyyy-MM-dd HH:mm:ss'}}</td>
-
</div>
</ng-container>
@@ -67,4 +75,3 @@
</div>
</div>
-<!--</div>-->
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
index d90ff99..4c83e05 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
@@ -101,6 +101,25 @@ export class TableWidgetComponent extends BaseDataExplorerWidget implements OnIn
this.dataSource.data = [];
}
+ onFilterChange(searchValue: string): void {
+ this.dataSource.filter = searchValue.trim().toLowerCase();
+ }
+
+ sortData(event) {
+ if (event.direction === 'asc') {
+ this.dataSource.data = this.dataSource.data.sort(
+ (a, b) => (a[event.active] > b[event.active]) ? 1 : ((b[event.active] > a[event.active]) ? -1 : 0));
+ }
+ if (event.direction === 'desc') {
+ this.dataSource.data = this.dataSource.data.sort(
+ (a, b) => (a[event.active] > b[event.active]) ? -1 : ((b[event.active] > a[event.active]) ? 1 : 0));
+ }
+
+ if (event.direction === '') {
+ this.dataSource.data = this.dataSource.data.sort(
+ (a, b) => (a['timestamp'] > b['timestamp']) ? 1 : ((b['timestamp'] > a['timestamp']) ? -1 : 0));
+ }
+ }
}