Skip to content

Commit ae520ae

Browse files
fcv-iteratorItfcv-iteratorIt
authored
IOT-1403: Implemented application table column selection (#149)
* Fixed routing of gateway list + fixed memory leak by unsubscribing properly from gateway fetches * Fixed routing errors in gateway list * Changed mqtt datatarget topic placeholder + added tooltip * Added additional text changes from Product Owner * Removed maxLenght from device AND gateway EUI, now removes non-hex digits on submit * Added sticky to name column on gateway status table * Implemented application table column selection * Removed unused controller name from select
1 parent 8743af2 commit ae520ae

File tree

8 files changed

+368
-32
lines changed

8 files changed

+368
-32
lines changed

‎src/app/applications/application.model.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ApplicationStatus } from './enums/status.enum';
66
import { IotDevice } from './iot-devices/iot-device.model';
77
import { ApplicationDeviceType } from './models/application-device-type.model';
88
import { PermissionResponse } from '@app/admin/permission/permission.model';
9+
import { Datatarget } from '@applications/datatarget/datatarget.model';
910

1011
export class Application {
1112
public id: number;
@@ -33,6 +34,7 @@ export class Application {
3334
public deviceTypes?: ApplicationDeviceType[];
3435
public permissions: PermissionResponse[];
3536
public permissionIds: number[];
37+
public dataTargets: Datatarget[];
3638
}
3739

3840
export class ApplicationRequest {

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

Lines changed: 139 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
<div class="select-container">
2+
<mat-select
3+
class="form-control table-select"
4+
multiple="true"
5+
[(value)]="optionalColumnsSelected"
6+
(selectionChange)="handleColumnSelection($event)"
7+
panelClass="tall"
8+
>
9+
<mat-option disabled>
10+
<button
11+
mat-raised-button
12+
class="mat-primary fill text-sm"
13+
(click)="selectAll()">
14+
{{'QUESTION.DATATARGET.SELECTALLDEVICES' | translate}}
15+
</button>
16+
<button
17+
mat-raised-button
18+
class="mat-primary fill text-sm"
19+
(click)="deSelectAll()">
20+
{{'QUESTION.DATATARGET.DESELECTALLDEVICES' | translate}}
21+
</button>
22+
</mat-option>
23+
<mat-option *ngFor="let option of optionalColumnOptions" [value]="option.id">
24+
{{option.display | translate}}
25+
</mat-option>
26+
</mat-select>
27+
</div>
28+
129
<div class="mat-elevation-z8">
230
<div class="loading-shade" *ngIf="isLoadingResults">
331
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
@@ -8,16 +36,34 @@
836
</div>
937

1038
<table mat-table [dataSource]="data" class="example-table" matSort matSortActive="name" matSortDisableClear
11-
matSortDirection="asc">
39+
matSortDirection="asc">
1240

1341
<!-- Name Column -->
1442
<ng-container matColumnDef="name">
15-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-6">
43+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-2">
1644
{{ 'APPLICATION-TABLE.NAME' | translate }}
1745
</th>
1846
<td mat-cell *matCellDef="let element">
1947
<a [routerLink]="['/applications', element.id]" routerLinkActive="active"
20-
class="application-link">{{element.name}}</a>
48+
class="application-link">{{element.name}}</a>
49+
</td>
50+
</ng-container>
51+
52+
<ng-container matColumnDef="owner">
53+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
54+
{{'APPLICATION-TABLE.OWNER' | translate}}
55+
</th>
56+
<td mat-cell *matCellDef="let application">
57+
{{application.owner ?? '-'}}
58+
</td>
59+
</ng-container>
60+
61+
<ng-container matColumnDef="contactPerson">
62+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
63+
{{'APPLICATION-TABLE.CONTACT-PERSON' | translate}}
64+
</th>
65+
<td mat-cell *matCellDef="let application">
66+
{{application.contactPerson ?? '-'}}
2167
</td>
2268
</ng-container>
2369

@@ -26,7 +72,89 @@
2672
<th mat-header-cell *matHeaderCellDef class="col-2">
2773
{{ 'APPLICATION-TABLE.IOT-DEVICES' | translate }}</th>
2874
<td mat-cell *matCellDef="let element">
29-
{{element ?.iotDevices?.length ? element?.iotDevices?.length : 0}}
75+
{{element?.iotDevices?.length ?? 0}}
76+
</td>
77+
</ng-container>
78+
79+
<ng-container matColumnDef="dataTargets">
80+
<th mat-header-cell *matHeaderCellDef class="col-1">
81+
{{ 'APPLICATION-TABLE.DATA-TARGETS' | translate}}
82+
</th>
83+
<td mat-cell *matCellDef="let application">
84+
{{application?.dataTargets?.length ?? 0}}
85+
</td>
86+
</ng-container>
87+
88+
<ng-container matColumnDef="openDataDkEnabled">
89+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
90+
{{ 'APPLICATION-TABLE.OPEN-DATA-DK' | translate }}
91+
</th>
92+
<td mat-cell *matCellDef="let application">
93+
{{isOpenDataDK(application.dataTargets) | yesNo}}
94+
</td>
95+
</ng-container>
96+
97+
<ng-container matColumnDef="status">
98+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
99+
{{'APPLICATION-TABLE.STATUS' | translate}}
100+
</th>
101+
<td mat-cell *matCellDef="let application">
102+
{{'APPLICATION.STATUS.' + application.status | translate}}
103+
</td>
104+
</ng-container>
105+
106+
<ng-container matColumnDef="personalData">
107+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
108+
{{'APPLICATION-TABLE.PERSONAL-DATA' | translate}}
109+
</th>
110+
<td mat-cell *matCellDef="let application">
111+
<fa-icon *ngIf="application.personalData" [icon]="faFlagIcon" class="flag-icon"></fa-icon>
112+
{{!application.personalData ? '-' : ''}}
113+
</td>
114+
</ng-container>
115+
116+
<ng-container matColumnDef="startDate">
117+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
118+
{{'APPLICATION-TABLE.START-DATE' | translate}}
119+
</th>
120+
<td mat-cell *matCellDef="let application">
121+
{{(application.startDate | dateOnly) ?? '-'}}
122+
</td>
123+
</ng-container>
124+
125+
<ng-container matColumnDef="endDate">
126+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
127+
{{'APPLICATION-TABLE.END-DATE' | translate}}
128+
</th>
129+
<td mat-cell *matCellDef="let application">
130+
{{(application.endDate | dateOnly) ?? '-'}}
131+
</td>
132+
</ng-container>
133+
134+
<ng-container matColumnDef="category">
135+
<th mat-header-cell *matHeaderCellDef class="col-1">
136+
{{'APPLICATION-TABLE.CATEGORY' | translate}}
137+
</th>
138+
<td mat-cell *matCellDef="let application">
139+
{{application.category ?? '-'}}
140+
</td>
141+
</ng-container>
142+
143+
<ng-container matColumnDef="controlledProperties">
144+
<th mat-header-cell *matHeaderCellDef class="col-1">
145+
{{'APPLICATION-TABLE.CONTROLLED-PROPERTIES' | translate}}
146+
</th>
147+
<td mat-cell *matCellDef="let application">
148+
{{mapControlledProperties(application.controlledProperties) ?? '-'}}
149+
</td>
150+
</ng-container>
151+
152+
<ng-container matColumnDef="deviceTypes">
153+
<th mat-header-cell *matHeaderCellDef class="col-1">
154+
{{'APPLICATION-TABLE.DEVICE-TYPES' | translate}}
155+
</th>
156+
<td mat-cell *matCellDef="let application">
157+
{{mapDeviceTypes(application.deviceTypes) ?? '-'}}
30158
</td>
31159
</ng-container>
32160

@@ -36,26 +164,28 @@
36164
<td mat-cell *matCellDef="let element">
37165
<div class="dropdown" *ngIf="element?.id | canEditApplication">
38166
<a href="#" role="button" id="tableRowDropdown-{{element.id}}" class="applicationRow__edit dropdown-toggle"
39-
data-toggle="dropdown" aria-expanded="false"
40-
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"></a>
167+
data-toggle="dropdown" aria-expanded="false"
168+
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"></a>
41169
<ul class="dropdown-menu dropdown-menu--table" attr.aria-labelledby="tableRowDropdown-{{element.id}}">
42170
<li class="dropdown-item">
43171
<a (click)="navigateToEditPage(element.id)"
44-
routerLinkActive="active">{{ 'APPLICATION-TABLE-ROW.EDIT' | translate }}</a>
172+
routerLinkActive="active">{{ 'APPLICATION-TABLE-ROW.EDIT' | translate }}</a>
45173
</li>
46174
<li class="dropdown-item">
47175
<a (click)="deleteApplication(element.id)"
48-
[routerLink]="[]">{{ 'APPLICATION-TABLE-ROW.DELETE' | translate }}</a>
176+
[routerLink]="[]">{{ 'APPLICATION-TABLE-ROW.DELETE' | translate }}</a>
49177
</li>
50178
</ul>
51179
</div>
52180
</td>
53181
</ng-container>
182+
54183
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
55184
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
56185
</table>
57186
</div>
58187

59-
<mat-paginator [length]="resultsLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" showFirstLastButtons>
188+
<mat-paginator [length]="resultsLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize"
189+
showFirstLastButtons>
60190
</mat-paginator>
61191
</div>

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
// .example-loading-shade {
2-
// position: absolute;
3-
// top: 0;
4-
// left: 0;
5-
// bottom: 0;
6-
// right: 0;
7-
// background: rgba(0, 0, 0, 0.15);
8-
// z-index: 1;
9-
// display: flex;
10-
// align-items: center;
11-
// justify-content: center;
12-
// }
1+
.table-select {
2+
width: 180px;
3+
margin: 5px;
4+
5+
}
6+
7+
.select-container {
8+
display: flex;
9+
flex-direction: row;
10+
justify-content: flex-end;
11+
}
12+
13+
.flag-icon {
14+
color: red;
15+
}

0 commit comments

Comments
 (0)