Skip to content

Commit b951f88

Browse files
fcv-iteratorItfcv-iteratorIt
committed
Add pointer to application table-row and tabs
1 parent fbef96a commit b951f88

File tree

3 files changed

+81
-70
lines changed

3 files changed

+81
-70
lines changed

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

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="loading-shade" *ngIf="isLoadingResults">
1+
<div *ngIf="isLoadingResults" class="loading-shade">
22
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
33
</div>
44
<div *ngIf="errorMessage" class="error-messages p-3 m-2">
@@ -8,35 +8,35 @@
88
<div class="table-container">
99
<div class="table-container">
1010
<table
11-
mat-table
11+
(matSortChange)="announceSortChange($event)"
1212
[dataSource]="data"
1313
class="mat-elevation-z0"
14+
mat-table
1415
matSort
1516
matSortActive="name"
16-
matSortDisableClear
1717
matSortDirection="asc"
18-
(matSortChange)="announceSortChange($event)"
18+
matSortDisableClear
1919
>
2020
<ng-container matColumnDef="statusCheck">
21-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
21+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
2222
<div [ngClass]="this.sort.active === 'statusCheck' ? 'column-title-color' : 'column-title-color-inactive'">
2323
{{ "APPLICATION-TABLE.STATUS" | translate }}
2424
</div>
25-
<app-table-sort-icon [sortDirection]="getSortDirection('statusCheck')" />
25+
<app-table-sort-icon [sortDirection]="getSortDirection('statusCheck')"/>
2626
</th>
27-
<td mat-cell *matCellDef="let application">
28-
<app-status-icon [iconType]="application.statusCheck" />
27+
<td *matCellDef="let application" mat-cell>
28+
<app-status-icon [iconType]="application.statusCheck"/>
2929
</td>
3030
</ng-container>
3131

3232
<ng-container matColumnDef="status">
33-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
33+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
3434
<div [ngClass]="this.sort.active === 'status' ? 'column-title-color' : 'column-title-color-inactive'">
3535
{{ "APPLICATION-TABLE.STATE" | translate }}
3636
</div>
37-
<app-table-sort-icon [sortDirection]="getSortDirection('status')" />
37+
<app-table-sort-icon [sortDirection]="getSortDirection('status')"/>
3838
</th>
39-
<td mat-cell *matCellDef="let application">
39+
<td *matCellDef="let application" mat-cell>
4040
<div class="options-container">
4141
<app-option-field
4242
[title]="'APPLICATION.STATUS.' + application.status | translate"
@@ -47,13 +47,13 @@
4747
</ng-container>
4848

4949
<ng-container matColumnDef="name">
50-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
50+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
5151
<div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
5252
{{ "APPLICATION-TABLE.NAME" | translate }}
5353
</div>
54-
<app-table-sort-icon [sortDirection]="getSortDirection('name')" />
54+
<app-table-sort-icon [sortDirection]="getSortDirection('name')"/>
5555
</th>
56-
<td mat-cell *matCellDef="let element" class="name-and-description">
56+
<td *matCellDef="let element" class="name-and-description" mat-cell>
5757
<div class="name-and-description">
5858
<div class="application-name">
5959
{{ element.name }}
@@ -66,185 +66,187 @@
6666
</ng-container>
6767

6868
<ng-container matColumnDef="data">
69-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
69+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
7070
<div [ngClass]="this.sort.active === 'data' ? 'column-title-color' : 'column-title-color-inactive'">
7171
{{ "APPLICATION-TABLE.CONTROLLED-PROPERTIES" | translate }}
7272
</div>
73-
<app-table-sort-icon [sortDirection]="getSortDirection('data')" />
73+
<app-table-sort-icon [sortDirection]="getSortDirection('data')"/>
7474
</th>
75-
<td mat-cell *matCellDef="let application">
75+
<td *matCellDef="let application" mat-cell>
7676
<div class="options-container">
7777
@for (property of application.controlledProperties; track $index) {
78-
<app-option-field [title]="property.type" />
78+
<app-option-field [title]="property.type"/>
7979
}
8080
</div>
8181
</td>
8282
</ng-container>
8383

8484
<ng-container matColumnDef="devices">
85-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
85+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
8686
<div [ngClass]="this.sort.active === 'devices' ? 'column-title-color' : 'column-title-color-inactive'">
8787
{{ "APPLICATION-TABLE.IOT-DEVICES" | translate }}
8888
</div>
89-
<app-table-sort-icon [sortDirection]="getSortDirection('devices')" />
89+
<app-table-sort-icon [sortDirection]="getSortDirection('devices')"/>
9090
</th>
91-
<td mat-cell *matCellDef="let element">
91+
<td *matCellDef="let element" mat-cell>
9292
{{ element?.iotDevices?.length ?? 0 }}
9393
</td>
9494
</ng-container>
9595

9696
<ng-container matColumnDef="owner">
97-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
97+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
9898
<div [ngClass]="this.sort.active === 'owner' ? 'column-title-color' : 'column-title-color-inactive'">
9999
{{ "APPLICATION-TABLE.OWNER" | translate }}
100100
</div>
101-
<app-table-sort-icon [sortDirection]="getSortDirection('owner')" />
101+
<app-table-sort-icon [sortDirection]="getSortDirection('owner')"/>
102102
</th>
103-
<td mat-cell *matCellDef="let application">
103+
<td *matCellDef="let application" mat-cell>
104104
{{ application.owner ?? "-" }}
105105
</td>
106106
</ng-container>
107107

108108
<!-- Not default columns -->
109109

110110
<ng-container matColumnDef="contactPerson">
111-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
111+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
112112
<div [ngClass]="this.sort.active === 'contactPerson' ? 'column-title-color' : 'column-title-color-inactive'">
113113
{{ "APPLICATION-TABLE.CONTACT-PERSON" | translate }}
114114
</div>
115-
<app-table-sort-icon [sortDirection]="getSortDirection('contactPerson')" />
115+
<app-table-sort-icon [sortDirection]="getSortDirection('contactPerson')"/>
116116
</th>
117-
<td mat-cell *matCellDef="let application">
117+
<td *matCellDef="let application" mat-cell>
118118
{{ application.contactPerson ?? "-" }}
119119
</td>
120120
</ng-container>
121121

122122
<ng-container matColumnDef="dataTargets">
123-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
123+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
124124
<div [ngClass]="this.sort.active === 'dataTargets' ? 'column-title-color' : 'column-title-color-inactive'">
125125
{{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
126126
</div>
127-
<app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')" />
127+
<app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')"/>
128128
</th>
129-
<td mat-cell *matCellDef="let application">
129+
<td *matCellDef="let application" mat-cell>
130130
{{ application?.dataTargets?.length ?? 0 }}
131131
</td>
132132
</ng-container>
133133

134134
<ng-container matColumnDef="openDataDkEnabled">
135-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
135+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
136136
<div
137137
[ngClass]="this.sort.active === 'openDataDkEnabled' ? 'column-title-color' : 'column-title-color-inactive'"
138138
>
139139
{{ "APPLICATION-TABLE.OPEN-DATA-DK" | translate }}
140140
</div>
141-
<app-table-sort-icon [sortDirection]="getSortDirection('openDataDkEnabled')" />
141+
<app-table-sort-icon [sortDirection]="getSortDirection('openDataDkEnabled')"/>
142142
</th>
143-
<td mat-cell *matCellDef="let application">
143+
<td *matCellDef="let application" mat-cell>
144144
{{ isOpenDataDK(application.dataTargets) | yesNo }}
145145
</td>
146146
</ng-container>
147147

148148
<ng-container matColumnDef="personalData">
149-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
149+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
150150
<div [ngClass]="this.sort.active === 'personalData' ? 'column-title-color' : 'column-title-color-inactive'">
151151
{{ "APPLICATION-TABLE.PERSONAL-DATA" | translate }}
152152
</div>
153-
<app-table-sort-icon [sortDirection]="getSortDirection('personalData')" />
153+
<app-table-sort-icon [sortDirection]="getSortDirection('personalData')"/>
154154
</th>
155-
<td mat-cell *matCellDef="let application">
155+
<td *matCellDef="let application" mat-cell>
156156
<fa-icon *ngIf="application.personalData" [icon]="faFlagIcon" class="flag-icon"></fa-icon>
157157
{{ !application.personalData ? "-" : "" }}
158158
</td>
159159
</ng-container>
160160

161161
<ng-container matColumnDef="startDate">
162-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
162+
<th *matHeaderCellDef class="col-1" mat-header-cell mat-sort-header>
163163
<div [ngClass]="this.sort.active === 'startDate' ? 'column-title-color' : 'column-title-color-inactive'">
164164
{{ "APPLICATION-TABLE.START-DATE" | translate }}
165165
</div>
166-
<app-table-sort-icon [sortDirection]="getSortDirection('startDate')" />
166+
<app-table-sort-icon [sortDirection]="getSortDirection('startDate')"/>
167167
</th>
168-
<td mat-cell *matCellDef="let application">
168+
<td *matCellDef="let application" mat-cell>
169169
{{ (application.startDate | dateOnly) ?? "-" }}
170170
</td>
171171
</ng-container>
172172

173173
<ng-container matColumnDef="endDate">
174-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
174+
<th *matHeaderCellDef class="col-1" mat-header-cell mat-sort-header>
175175
<div [ngClass]="this.sort.active === 'endDate' ? 'column-title-color' : 'column-title-color-inactive'">
176176
{{ "APPLICATION-TABLE.END-DATE" | translate }}
177177
</div>
178-
<app-table-sort-icon [sortDirection]="getSortDirection('endDate')" />
178+
<app-table-sort-icon [sortDirection]="getSortDirection('endDate')"/>
179179
</th>
180-
<td mat-cell *matCellDef="let application">
180+
<td *matCellDef="let application" mat-cell>
181181
{{ (application.endDate | dateOnly) ?? "-" }}
182182
</td>
183183
</ng-container>
184184

185185
<ng-container matColumnDef="category">
186-
<th mat-header-cell *matHeaderCellDef class="col-1">
186+
<th *matHeaderCellDef class="col-1" mat-header-cell>
187187
<div [ngClass]="this.sort.active === 'category' ? 'column-title-color' : 'column-title-color-inactive'">
188188
{{ "APPLICATION-TABLE.CATEGORY" | translate }}
189189
</div>
190-
<app-table-sort-icon [sortDirection]="getSortDirection('category')" />
190+
<app-table-sort-icon [sortDirection]="getSortDirection('category')"/>
191191
</th>
192-
<td mat-cell *matCellDef="let application">
192+
<td *matCellDef="let application" mat-cell>
193193
{{ application.category ?? "-" }}
194194
</td>
195195
</ng-container>
196196

197197
<ng-container matColumnDef="deviceTypes">
198-
<th mat-header-cell *matHeaderCellDef class="col-1">
198+
<th *matHeaderCellDef class="col-1" mat-header-cell>
199199
<div [ngClass]="this.sort.active === 'deviceTypes' ? 'column-title-color' : 'column-title-color-inactive'">
200200
{{ "APPLICATION-TABLE.DEVICE-TYPES" | translate }}
201201
</div>
202-
<app-table-sort-icon [sortDirection]="getSortDirection('deviceTypes')" />
202+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceTypes')"/>
203203
</th>
204-
<td mat-cell *matCellDef="let application">
204+
<td *matCellDef="let application" mat-cell>
205205
{{ mapDeviceTypes(application.deviceTypes) ?? "-" }}
206206
</td>
207207
</ng-container>
208208

209209
<ng-container matColumnDef="menu">
210-
<th mat-header-cell *matHeaderCellDef class="col-1"></th>
210+
<th *matHeaderCellDef class="col-1" mat-header-cell></th>
211211

212-
<td mat-cell *matCellDef="let element">
213-
<div class="dropdown" *ngIf="element?.id | canEditApplication">
212+
<td *matCellDef="let element" mat-cell>
213+
<div *ngIf="element?.id | canEditApplication" class="dropdown">
214214
<a
215-
href="#"
216-
role="button"
217-
id="tableRowDropdown-{{ element.id }}"
215+
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
216+
aria-expanded="false"
218217
class="applicationRow__edit dropdown-toggle"
219218
data-toggle="dropdown"
220-
aria-expanded="false"
221-
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
219+
href="#"
220+
id="tableRowDropdown-{{ element.id }}"
221+
role="button"
222222
></a>
223-
<ul class="dropdown-menu dropdown-menu--table" attr.aria-labelledby="tableRowDropdown-{{ element.id }}">
223+
<ul attr.aria-labelledby="tableRowDropdown-{{ element.id }}" class="dropdown-menu dropdown-menu--table">
224224
<li class="dropdown-item">
225225
<a (click)="navigateToEditPage(element.id)" routerLinkActive="active">{{
226-
"APPLICATION-TABLE-ROW.EDIT" | translate
227-
}}</a>
226+
"APPLICATION-TABLE-ROW.EDIT" | translate
227+
}}</a>
228228
</li>
229229
<li class="dropdown-item">
230230
<a (click)="onOpenChangeOrganizationDialog(element.id)" routerLinkActive="active">{{
231-
"APPLICATION.CHANGE-ORGANIZATION.TITLE" | translate
232-
}}</a>
231+
"APPLICATION.CHANGE-ORGANIZATION.TITLE" | translate
232+
}}</a>
233233
</li>
234234
<li class="dropdown-item">
235235
<a (click)="deleteApplication(element.id)" [routerLink]="[]">{{
236-
"APPLICATION-TABLE-ROW.DELETE" | translate
237-
}}</a>
236+
"APPLICATION-TABLE-ROW.DELETE" | translate
237+
}}</a>
238238
</li>
239239
</ul>
240240
</div>
241241
</td>
242242
</ng-container>
243243

244-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
245-
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['/applications', row.id]"></tr>
244+
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
245+
<tr *matRowDef="let row; columns: displayedColumns" [routerLink]="['/applications', row.id]"
246+
class="table-row-pointer"
247+
mat-row></tr>
246248
</table>
247-
<mat-paginator class="paginator" [length]="resultsLength" [pageSizeOptions]="pageSizeOptions"> </mat-paginator>
249+
<mat-paginator [length]="resultsLength" [pageSizeOptions]="pageSizeOptions" class="paginator"></mat-paginator>
248250
</div>
249251
<div class="tool-container">
250252
<app-column-selector
@@ -255,5 +257,5 @@
255257
</div>
256258
</div>
257259
<div>
258-
<app-table-paginator [paginator]="paginator" />
260+
<app-table-paginator [paginator]="paginator"/>
259261
</div>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
}
5656

5757
.mat-sort-header-arrow {
58-
display: none !important;
58+
display: none;
5959
}
6060

6161
.column-title-color {
@@ -66,3 +66,7 @@
6666
.column-title-color-inactive {
6767
color: $default-icon-color;
6868
}
69+
70+
.table-row-pointer {
71+
cursor: pointer;
72+
}

‎src/app/shared/components/basic-tab-switch/basic-tab-switch.component.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,23 @@
1414
justify-content: center;
1515
font-size: 16px;
1616
padding: 0 20px;
17+
cursor: pointer;
18+
}
19+
20+
.tab-base:hover {
21+
background-color: $white;
1722
}
1823

1924
.active-tab {
20-
background-color: $white !important;
25+
background-color: $white;
2126
color: $default-icon-color;
2227
fill: $default-icon-color;
2328
}
2429

2530
.inactive-tab {
2631
fill: $color-link !important;
2732
color: $color-link;
28-
background-color: transparent !important;
33+
background-color: transparent;
2934
}
3035

3136
.active-tab-icon {

0 commit comments

Comments
 (0)