Skip to content

Commit 1173ad8

Browse files
fcv-iteratorItfcv-iteratorIt
committed
Fix gateway and device table sorts
1 parent 9ec8f13 commit 1173ad8

File tree

5 files changed

+105
-82
lines changed

5 files changed

+105
-82
lines changed

‎src/app/applications/applications-list/applications-table/applications-table.component.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
146146
applicationSavedColumns = "applicationSavedColumns";
147147
@ViewChild(MatPaginator) paginator: MatPaginator;
148148
@ViewChild(MatSort) sort: MatSort;
149+
protected columnDefinitions = columnDefinitions;
149150

150151
constructor(
151152
public translate: TranslateService,
@@ -163,9 +164,6 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
163164
this.translate.use("da");
164165
}
165166

166-
announceSortChange(event: { active: string; direction: string }) {
167-
this.columnDefinitions.find(column => column.id === event.active).sort = event.direction as "asc" | "desc";
168-
}
169167
ngAfterViewInit() {
170168
// If the user changes the sort order, reset back to the first page.
171169
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
@@ -306,9 +304,12 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
306304
} as ApplicationDialogModel,
307305
});
308306
}
307+
308+
announceSortChange(event: { active: string; direction: string }) {
309+
this.columnDefinitions.find(column => column.id === event.active).sort = event.direction as "asc" | "desc";
310+
}
311+
309312
getSortDirection(id: string) {
310313
return columnDefinitions.find(c => c.id === id).sort;
311314
}
312-
313-
protected columnDefinitions = columnDefinitions;
314315
}

‎src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html‎

Lines changed: 60 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,17 @@
66
></app-column-selector>
77

88
<div class="mat-elevation-z8">
9-
<div class="loading-shade" *ngIf="isLoadingResults">
9+
<div *ngIf="isLoadingResults" class="loading-shade">
1010
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
1111
</div>
12-
<table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
12+
<table
13+
(matSortChange)="announceSortChange($event)"
14+
[dataSource]="data"
15+
mat-table
16+
matSort
17+
matSortActive="name"
18+
matSortDirection="asc"
19+
matSortDisableClear>
1320
<ng-template #notSupported>
1421
<span>{{ "IOTDEVICE-TABLE-ROW.NOT-SUPPORTED-SHORT" | translate }}</span>
1522
</ng-template>
@@ -19,86 +26,86 @@
1926

2027
<!-- Name Column -->
2128
<ng-container matColumnDef="name">
22-
<th mat-sort-header="name" *matHeaderCellDef mat-header-cell>
29+
<th *matHeaderCellDef mat-header-cell mat-sort-header="name">
2330
<div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
2431
{{ "APPLICATION-TABLE.NAME" | translate }}
2532
</div>
26-
<app-table-sort-icon [sortDirection]="getSortDirection('name')" />
33+
<app-table-sort-icon [sortDirection]="getSortDirection('name')"/>
2734
</th>
28-
<td mat-cell *matCellDef="let iotDevice">
29-
<a [routerLink]="['../iot-device', iotDevice.id]" routerLinkActive="active" class="device-link">{{
30-
iotDevice.name
31-
}}</a>
35+
<td *matCellDef="let iotDevice" mat-cell>
36+
<a [routerLink]="['../iot-device', iotDevice.id]" class="device-link" routerLinkActive="active">{{
37+
iotDevice.name
38+
}}</a>
3239
</td>
3340
</ng-container>
3441

3542
<!-- Technology Column -->
3643
<ng-container matColumnDef="type">
37-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
44+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
3845
<div [ngClass]="this.sort.active === 'type' ? 'column-title-color' : 'column-title-color-inactive'">
3946
{{ "IOT-TABLE.NETWORK-TECHNOLOGY" | translate }}
4047
</div>
41-
<app-table-sort-icon [sortDirection]="getSortDirection('type')" />
48+
<app-table-sort-icon [sortDirection]="getSortDirection('type')"/>
4249
</th>
43-
<td mat-cell *matCellDef="let iotDevice">{{ "IOT-DEVICE-TYPES." + iotDevice.type | translate }}</td>
50+
<td *matCellDef="let iotDevice" mat-cell>{{ "IOT-DEVICE-TYPES." + iotDevice.type | translate }}</td>
4451
</ng-container>
4552

4653
<ng-container matColumnDef="commentOnLocation">
47-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
54+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
4855
<div
4956
[ngClass]="this.sort.active === 'commentOnLocation' ? 'column-title-color' : 'column-title-color-inactive'"
5057
>
5158
{{ "GATEWAY.PLACEMENT-LABEL" | translate }}
5259
</div>
53-
<app-table-sort-icon [sortDirection]="getSortDirection('commentOnLocation')" />
60+
<app-table-sort-icon [sortDirection]="getSortDirection('commentOnLocation')"/>
5461
</th>
55-
<td mat-cell *matCellDef="let iotDevice">
62+
<td *matCellDef="let iotDevice" mat-cell>
5663
{{ iotDevice.commentOnLocation ? truncateText(iotDevice.commentOnLocation) : "-" }}
5764
</td>
5865
</ng-container>
5966

6067
<ng-container matColumnDef="deviceModel">
61-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
68+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
6269
<div [ngClass]="this.sort.active === 'deviceModel' ? 'column-title-color' : 'column-title-color-inactive'">
6370
{{ "IOTDEVICE.DEVICEMODEL" | translate }}
6471
</div>
65-
<app-table-sort-icon [sortDirection]="getSortDirection('deviceModel')" />
72+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceModel')"/>
6673
</th>
67-
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceModel?.body?.name ?? "-" }}</td>
74+
<td *matCellDef="let iotDevice" mat-cell>{{ iotDevice.deviceModel?.body?.name ?? "-" }}</td>
6875
</ng-container>
6976

7077
<ng-container matColumnDef="deviceProfileName">
71-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
78+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
7279
<div
7380
[ngClass]="this.sort.active === 'deviceProfileName' ? 'column-title-color' : 'column-title-color-inactive'"
7481
>
7582
{{ "IOTDEVICE.LORA.DEVICEPROFILE" | translate }}
7683
</div>
77-
<app-table-sort-icon [sortDirection]="getSortDirection('deviceProfileName')" />
84+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceProfileName')"/>
7885
</th>
79-
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceProfileName ?? "-" }}</td>
86+
<td *matCellDef="let iotDevice" mat-cell>{{ iotDevice.deviceProfileName ?? "-" }}</td>
8087
</ng-container>
8188

8289
<ng-container matColumnDef="deviceEUI">
83-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
90+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
8491
<div [ngClass]="this.sort.active === 'deviceEUI' ? 'column-title-color' : 'column-title-color-inactive'">
8592
{{ "IOT-TABLE.DEV-EUI" | translate }}
8693
</div>
87-
<app-table-sort-icon [sortDirection]="getSortDirection('deviceEUI')" />
94+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceEUI')"/>
8895
</th>
89-
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceEUI ?? "-" }}</td>
96+
<td *matCellDef="let iotDevice" mat-cell>{{ iotDevice.deviceEUI ?? "-" }}</td>
9097
</ng-container>
9198

9299
<ng-container matColumnDef="OTAAapplicationKey">
93-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
100+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
94101
<div
95102
[ngClass]="this.sort.active === 'OTAAapplicationKey' ? 'column-title-color' : 'column-title-color-inactive'"
96103
>
97104
{{ "IOT-TABLE.APP-KEY" | translate }}
98105
</div>
99-
<app-table-sort-icon [sortDirection]="getSortDirection('OTAAapplicationKey')" />
106+
<app-table-sort-icon [sortDirection]="getSortDirection('OTAAapplicationKey')"/>
100107
</th>
101-
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.OTAAapplicationKey ?? "-" }}</td>
108+
<td *matCellDef="let iotDevice" mat-cell>{{ iotDevice.OTAAapplicationKey ?? "-" }}</td>
102109
</ng-container>
103110

104111
<!-- RSSI column -->
@@ -107,9 +114,9 @@
107114
<div [ngClass]="this.sort.active === 'rssi' ? 'column-title-color' : 'column-title-color-inactive'">
108115
{{ "IOT-TABLE.RSSI" | translate }}
109116
</div>
110-
<app-table-sort-icon [sortDirection]="getSortDirection('rssi')" />
117+
<app-table-sort-icon [sortDirection]="getSortDirection('rssi')"/>
111118
</th>
112-
<td mat-cell *matCellDef="let iotDevice">
119+
<td *matCellDef="let iotDevice" mat-cell>
113120
<ng-container *ngIf="iotDevice.type === 'LORAWAN' || iotDevice.type === 'SIGFOX'; else notSupported">
114121
<div *ngIf="iotDevice.latestReceivedMessage?.rssi; else notAvailable">
115122
{{ iotDevice.latestReceivedMessage.rssi }}
@@ -124,9 +131,9 @@
124131
<div [ngClass]="this.sort.active === 'snr' ? 'column-title-color' : 'column-title-color-inactive'">
125132
{{ "IOT-TABLE.SNR" | translate }}
126133
</div>
127-
<app-table-sort-icon [sortDirection]="getSortDirection('snr')" />
134+
<app-table-sort-icon [sortDirection]="getSortDirection('snr')"/>
128135
</th>
129-
<td mat-cell *matCellDef="let iotDevice">
136+
<td *matCellDef="let iotDevice" mat-cell>
130137
<ng-container *ngIf="iotDevice.type === 'LORAWAN' || iotDevice.type === 'SIGFOX'; else notSupported">
131138
<div *ngIf="iotDevice.latestReceivedMessage?.snr; else notAvailable">
132139
{{ iotDevice.latestReceivedMessage?.snr }}
@@ -136,21 +143,21 @@
136143
</ng-container>
137144

138145
<ng-container matColumnDef="dataTargets">
139-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
146+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
140147
<div [ngClass]="this.sort.active === 'dataTargets' ? 'column-title-color' : 'column-title-color-inactive'">
141148
{{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
142149
</div>
143-
<app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')" />
150+
<app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')"/>
144151
</th>
145-
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.connections?.length ?? 0 }}</td>
152+
<td *matCellDef="let iotDevice" mat-cell>{{ iotDevice.connections?.length ?? 0 }}</td>
146153
</ng-container>
147154

148155
<!-- Battery Column -->
149156
<ng-container matColumnDef="battery">
150157
<th *matHeaderCellDef mat-header-cell>
151158
{{ "IOT-TABLE.BATTERY" | translate }}
152159
</th>
153-
<td mat-cell *matCellDef="let iotDevice">
160+
<td *matCellDef="let iotDevice" mat-cell>
154161
<div *ngIf="iotDevice.type === 'LORAWAN'; else noBatteryStatus">
155162
<app-batteri-status [color]="batteryStatusColor" [percentage]="getBatteryProcentage(iotDevice)">
156163
</app-batteri-status>
@@ -165,38 +172,38 @@
165172

166173
<!-- Active Column -->
167174
<ng-container matColumnDef="active">
168-
<th mat-header-cell *matHeaderCellDef mat-sort-header="active">
175+
<th *matHeaderCellDef mat-header-cell mat-sort-header="active">
169176
<div [ngClass]="this.sort.active === 'active' ? 'column-title-color' : 'column-title-color-inactive'">
170177
{{ "IOT-TABLE.ACTIVE" | translate }}
171178
</div>
172-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
179+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
173180
</th>
174-
<td mat-cell *matCellDef="let iotDevice">{{ lastActive(iotDevice) }}</td>
181+
<td *matCellDef="let iotDevice" mat-cell>{{ lastActive(iotDevice) }}</td>
175182
</ng-container>
176183

177184
<ng-container matColumnDef="menu">
178-
<th mat-header-cell *matHeaderCellDef></th>
179-
<td mat-cell *matCellDef="let iotDevice">
180-
<div class="dropdown" *ngIf="canEdit">
185+
<th *matHeaderCellDef mat-header-cell></th>
186+
<td *matCellDef="let iotDevice" mat-cell>
187+
<div *ngIf="canEdit" class="dropdown">
181188
<a
182-
href="#"
183-
role="button"
184-
id="tableRowDropdown-{{ iotDevice.id }}"
189+
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
190+
aria-expanded="false"
185191
class="applicationRow__edit dropdown-toggle"
186192
data-toggle="dropdown"
187-
aria-expanded="false"
188-
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
193+
href="#"
194+
id="tableRowDropdown-{{ iotDevice.id }}"
195+
role="button"
189196
></a>
190-
<ul class="dropdown-menu dropdown-menu--table" attr.aria-labelledby="tableRowDropdown-{{ iotDevice.id }}">
197+
<ul attr.aria-labelledby="tableRowDropdown-{{ iotDevice.id }}" class="dropdown-menu dropdown-menu--table">
191198
<li class="dropdown-item">
192199
<a [routerLink]="['../iot-device-edit', iotDevice.id]" routerLinkActive="active"
193-
>{{ "IOTDEVICE-TABLE-ROW.EDIT" | translate }}
200+
>{{ "IOTDEVICE-TABLE-ROW.EDIT" | translate }}
194201
</a>
195202
</li>
196-
<li class="dropdown-item" *ngIf="iotDevice.type !== deviceTypes.SIGFOX">
203+
<li *ngIf="iotDevice.type !== deviceTypes.SIGFOX" class="dropdown-item">
197204
<a (click)="onOpenChangeApplicationDialog(iotDevice.id)" routerLinkActive="active">{{
198-
"IOTDEVICE.CHANGE-APPLICATION.TITLE" | translate
199-
}}</a>
205+
"IOTDEVICE.CHANGE-APPLICATION.TITLE" | translate
206+
}}</a>
200207
</li>
201208
<li class="dropdown-item">
202209
<a (click)="clickDelete(iotDevice)" [routerLink]="[]">{{ "IOTDEVICE-TABLE-ROW.DELETE" | translate }}</a>
@@ -206,13 +213,13 @@
206213
</td>
207214
</ng-container>
208215

209-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
210-
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
216+
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
217+
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
211218
</table>
212219
<mat-paginator
220+
[length]="resultsLength"
213221
[pageSizeOptions]="pageSizeOptions"
214222
[pageSize]="pageSize"
215-
[length]="resultsLength"
216223
showFirstLastButtons
217224
>
218225
</mat-paginator>

‎src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,10 @@ export class IotDevicesTableComponent implements AfterViewInit, OnInit {
263263
});
264264
}
265265

266+
announceSortChange(event: { active: string; direction: string }) {
267+
this.columnDefinitions.find(column => column.id === event.active).sort = event.direction as "asc" | "desc";
268+
}
269+
266270
getSortDirection(id: string) {
267271
return columnDefinitions.find(c => c.id === id).sort;
268272
}

0 commit comments

Comments
 (0)