Skip to content

Commit f4764e3

Browse files
Copilotrenemadsen
Copilot
and
renemadsen
committed
Migrate HTML templates and WDIO page objects to actions menu pattern
Co-authored-by: renemadsen <[email protected]>
1 parent 0deede2 commit f4764e3

File tree

11 files changed

+286
-153
lines changed

11 files changed

+286
-153
lines changed

‎eform-client/e2e/Page objects/DeviceUsers.page.ts‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,12 @@ class DeviceUsersPage extends PageWithNavbarPage {
139139
name = '',
140140
surname = ''
141141
) {
142-
deviceUser.editBtn.click();
142+
await deviceUser.openRowMenu();
143+
const index = deviceUser.index - 1;
144+
const editBtn = await $(`#editDeviceUserBtn${index}`);
145+
await editBtn.waitForDisplayed({ timeout: 5000 });
146+
await editBtn.waitForClickable({ timeout: 5000 });
147+
await editBtn.click();
143148
// browser.pause(5000);
144149
await (await $('#firstName')).waitForDisplayed({ timeout: 40000 });
145150
if (name != null) {
@@ -164,13 +169,15 @@ export default deviceUsersPage;
164169
export class DeviceUsersRowObject {
165170
constructor() {}
166171

172+
index: number;
167173
siteId: number;
168174
firstName: string;
169175
lastName: string;
170176
editBtn;
171177
deleteBtn;
172178

173179
async getRow(rowNum: number) {
180+
this.index = rowNum;
174181
if ((await $$('#deviceUserId'))[rowNum - 1]) {
175182
this.siteId = +(await (await $$('#deviceUserId')[rowNum - 1]).getText());
176183
try {
@@ -189,9 +196,23 @@ export class DeviceUsersRowObject {
189196
return this;
190197
}
191198

199+
async openRowMenu() {
200+
const index = this.index - 1;
201+
const menuBtn = await $(`#action-items-${index} #actionMenu`);
202+
await menuBtn.waitForDisplayed({ timeout: 5000 });
203+
await menuBtn.waitForClickable({ timeout: 5000 });
204+
await menuBtn.scrollIntoView();
205+
await menuBtn.click();
206+
await browser.pause(200);
207+
}
208+
192209
async delete() {
193-
this.deleteBtn.waitForClickable({ timeout: 40000 });
194-
this.deleteBtn.click();
210+
const index = this.index - 1;
211+
await this.openRowMenu();
212+
const deleteBtn = await $(`#deleteDeviceUserBtn${index}`);
213+
await deleteBtn.waitForDisplayed({ timeout: 5000 });
214+
await deleteBtn.waitForClickable({ timeout: 5000 });
215+
await deleteBtn.click();
195216
await (await deviceUsersPage.saveDeleteBtn()).waitForClickable({
196217
timeout: 40000,
197218
});

‎eform-client/e2e/Page objects/Sites.page.ts‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ export default sitesPage;
139139
export class SitesRowObject {
140140
constructor() {}
141141

142+
index: number;
142143
element: WebdriverIO.Element;
143144
siteId: number;
144145
units: string;
@@ -148,6 +149,7 @@ export class SitesRowObject {
148149
deleteBtn: WebdriverIO.Element;
149150

150151
async getRow(rowNum): Promise<SitesRowObject> {
152+
this.index = rowNum;
151153
this.element = (await $$('tbody > tr'))[rowNum - 1];
152154
if (this.element) {
153155
this.siteId = +(await this.element.$('#siteUUId')).getText();
@@ -173,8 +175,23 @@ export class SitesRowObject {
173175
return this;
174176
}
175177

178+
async openRowMenu() {
179+
const index = this.index - 1;
180+
const menuBtn = await $(`#action-items-${index} #actionMenu`);
181+
await menuBtn.waitForDisplayed({ timeout: 5000 });
182+
await menuBtn.waitForClickable({ timeout: 5000 });
183+
await menuBtn.scrollIntoView();
184+
await menuBtn.click();
185+
await browser.pause(200);
186+
}
187+
176188
async openEditModal(site?: { name?: string; tags?: string[] }) {
177-
this.editBtn.click();
189+
await this.openRowMenu();
190+
const index = this.index - 1;
191+
const editBtn = await $(`#editSiteBtn${index}`);
192+
await editBtn.waitForDisplayed({ timeout: 5000 });
193+
await editBtn.waitForClickable({ timeout: 5000 });
194+
await editBtn.click();
178195
await browser.pause(500);
179196
await (await sitesPage.siteEditCancelBtn()).waitForDisplayed({ timeout: 40000 });
180197
if (site) {
@@ -209,7 +226,12 @@ export class SitesRowObject {
209226
}
210227

211228
async openDeleteModal() {
212-
await this.deleteBtn.click();
229+
await this.openRowMenu();
230+
const index = this.index - 1;
231+
const deleteBtn = await $(`#deleteSiteBtn${index}`);
232+
await deleteBtn.waitForDisplayed({ timeout: 5000 });
233+
await deleteBtn.waitForClickable({ timeout: 5000 });
234+
await deleteBtn.click();
213235
await browser.pause(500);
214236
await (await sitesPage.siteDeleteCancelBtn()).waitForClickable({ timeout: 40000 });
215237
}

‎eform-client/e2e/Page objects/UserAdministration.page.ts‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@ export default userAdministration;
196196
export class UserAdministrationRowObject {
197197
constructor() {}
198198

199+
index: number;
199200
element;
200201
id: number;
201202
email: string;
@@ -205,6 +206,7 @@ export class UserAdministrationRowObject {
205206
deleteBtn;
206207

207208
async getRow(rowNum: number): Promise<UserAdministrationRowObject> {
209+
this.index = rowNum;
208210
rowNum = rowNum - 1;
209211
this.id = +await (await $('#userAdministrationId-'+rowNum)).getText();
210212
this.email = await (await $('#userAdministrationEmail-'+rowNum)).getText();
@@ -215,8 +217,23 @@ export class UserAdministrationRowObject {
215217
return this;
216218
}
217219

220+
async openRowMenu() {
221+
const index = this.index - 1;
222+
const menuBtn = await $(`#action-items-${index} #actionMenu`);
223+
await menuBtn.waitForDisplayed({ timeout: 5000 });
224+
await menuBtn.waitForClickable({ timeout: 5000 });
225+
await menuBtn.scrollIntoView();
226+
await menuBtn.click();
227+
await browser.pause(200);
228+
}
229+
218230
public async openEdit(user: UserAdministrationObject) {
219-
await this.editBtn.click();
231+
await this.openRowMenu();
232+
const index = this.index - 1;
233+
const editBtn = await $(`#userAdministrationEditBtn-${index}`);
234+
await editBtn.waitForDisplayed({ timeout: 5000 });
235+
await editBtn.waitForClickable({ timeout: 5000 });
236+
await editBtn.click();
220237
await (await userAdministration.editFirstName()).waitForDisplayed({ timeout: 40000 });
221238
if (user.firstName) {
222239
await (await userAdministration.editFirstName()).clearValue();
@@ -278,7 +295,12 @@ export class UserAdministrationRowObject {
278295
}
279296

280297
public async openDelete() {
281-
await this.deleteBtn.click();
298+
await this.openRowMenu();
299+
const index = this.index - 1;
300+
const deleteBtn = await $(`#userAdministrationDeleteBtn-${index}`);
301+
await deleteBtn.waitForDisplayed({ timeout: 5000 });
302+
await deleteBtn.waitForClickable({ timeout: 5000 });
303+
await deleteBtn.click();
282304
await (await userAdministration.userDeleteCancelBtn()).waitForDisplayed({ timeout: 40000 });
283305
}
284306

‎eform-client/e2e/Page objects/Workers.page.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,12 @@ export class Workers extends PageWithNavbarPage {
5656
// browser.pause(16000);
5757
}
5858
public async editWorker(worker: WorkersRowObject, firstName: string, lastName: string) {
59-
await worker.editBtn.click();
59+
await worker.openRowMenu();
60+
const index = worker.index - 1;
61+
const editBtn = await $(`#workerEditBtn${index}`);
62+
await editBtn.waitForDisplayed({ timeout: 5000 });
63+
await editBtn.waitForClickable({ timeout: 5000 });
64+
await editBtn.click();
6065
// browser.pause(8000);
6166
await (await $('#firstNameEdit')).waitForDisplayed({timeout: 8000});
6267
await (await this.firstNameEditBox()).clearValue();
@@ -74,16 +79,28 @@ export default workers;
7479

7580
export class WorkersRowObject {
7681
constructor(rowNumber) {
82+
this.index = rowNumber + 1;
7783
this.siteId = +$$('#workerUID')[rowNumber + 1].getText();
7884
this.firstName = $$('#workerFirstName')[rowNumber + 1].getText();
7985
this.lastName = $$('#workerLastName')[rowNumber + 1].getText();
8086
this.editBtn = $$('#workerEditBtn')[rowNumber + 1];
8187
this.deleteBtn = $$('#workerDeleteBtn')[rowNumber + 1];
8288
}
8389

90+
index: number;
8491
siteId: number;
8592
firstName;
8693
lastName;
8794
editBtn;
8895
deleteBtn;
96+
97+
async openRowMenu() {
98+
const index = this.index - 1;
99+
const menuBtn = await $(`#action-items-${index} #actionMenu`);
100+
await menuBtn.waitForDisplayed({ timeout: 5000 });
101+
await menuBtn.waitForClickable({ timeout: 5000 });
102+
await menuBtn.scrollIntoView();
103+
await menuBtn.click();
104+
await browser.pause(200);
105+
}
89106
}

‎eform-client/src/app/modules/account-management/components/users/users-page/users-page.component.html‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -60,36 +60,42 @@
6060
</ng-template>
6161

6262
<ng-template #actionsTpl let-row let-i="index">
63-
<div class="d-flex">
64-
<button
65-
mat-icon-button
66-
color="accent"
67-
(click)="openEditModal(row.id)"
68-
*ngIf="selectCurrentUserClaimsUsersUpdate$ | async"
69-
matTooltip="{{ 'Edit user' | translate }}"
70-
id="userAdministrationEditBtn-{{i}}"
71-
>
72-
<mat-icon>edit</mat-icon>
73-
</button>
74-
<button
75-
mat-icon-button
76-
[disabled]="row.id === 1"
77-
color="warn"
78-
(click)="openRemoveUserModal(row)"
79-
*ngIf="selectCurrentUserClaimsUsersDelete$ | async"
80-
matTooltip="{{ 'Delete user' | translate }}"
81-
id="userAdministrationDeleteBtn-{{i}}"
82-
>
83-
<mat-icon>delete</mat-icon>
84-
</button>
85-
<button
86-
mat-icon-button
87-
color="primary"
88-
(click)="openSetPasswordModal(row)"
89-
matTooltip="{{ 'Set password' | translate }}"
90-
id="userAdministrationResetPasswordBtn-{{i}}">
91-
<mat-icon>vpn_key</mat-icon>
63+
<div class="user-actions" id="action-items-{{i}}">
64+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
65+
<mat-icon>more_vert</mat-icon>
9266
</button>
67+
68+
<mat-menu #menu="matMenu">
69+
<button
70+
mat-menu-item
71+
id="userAdministrationEditBtn-{{i}}"
72+
*ngIf="selectCurrentUserClaimsUsersUpdate$ | async"
73+
(click)="openEditModal(row.id)"
74+
>
75+
<mat-icon color="accent">edit</mat-icon>
76+
<span>{{ 'Edit user' | translate }}</span>
77+
</button>
78+
79+
<button
80+
mat-menu-item
81+
id="userAdministrationDeleteBtn-{{i}}"
82+
*ngIf="selectCurrentUserClaimsUsersDelete$ | async"
83+
[disabled]="row.id === 1"
84+
(click)="openRemoveUserModal(row)"
85+
>
86+
<mat-icon color="warn">delete</mat-icon>
87+
<span>{{ 'Delete user' | translate }}</span>
88+
</button>
89+
90+
<button
91+
mat-menu-item
92+
id="userAdministrationResetPasswordBtn-{{i}}"
93+
(click)="openSetPasswordModal(row)"
94+
>
95+
<mat-icon color="primary">vpn_key</mat-icon>
96+
<span>{{ 'Set password' | translate }}</span>
97+
</button>
98+
</mat-menu>
9399
</div>
94100
</ng-template>
95101

‎eform-client/src/app/modules/advanced/components/sites/sites/sites.component.html‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,27 +42,33 @@
4242
<app-eform-tag [tags]="getTagsBySiteDto(row)"/>
4343
</div>
4444
</ng-template>
45-
<ng-template #actionsTpl let-row>
46-
<div *ngIf="(selectCurrentUserClaimsSitesDelete$ | async) || (selectCurrentUserClaimsSitesUpdate$ | async)">
47-
<button
48-
mat-icon-button
49-
id="editSiteBtn"
50-
*ngIf="(selectCurrentUserClaimsSitesUpdate$ | async) && !row.isLocked"
51-
(click)="openEditModal(row)"
52-
matTooltip="{{ 'Edit site' | translate }}"
53-
>
54-
<mat-icon>edit</mat-icon>
55-
</button>
56-
<button
57-
mat-icon-button
58-
color="warn"
59-
id="deleteSiteBtn"
60-
*ngIf="(selectCurrentUserClaimsSitesDelete$ | async) && !row.isLocked"
61-
(click)="openDeleteModal(row)"
62-
matTooltip="{{ 'Delete site' | translate }}"
63-
>
64-
<mat-icon>delete</mat-icon>
45+
<ng-template #actionsTpl let-row let-i="index">
46+
<div class="site-actions" id="action-items-{{i}}" *ngIf="(selectCurrentUserClaimsSitesDelete$ | async) || (selectCurrentUserClaimsSitesUpdate$ | async)">
47+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
48+
<mat-icon>more_vert</mat-icon>
6549
</button>
50+
51+
<mat-menu #menu="matMenu">
52+
<button
53+
mat-menu-item
54+
id="editSiteBtn{{i}}"
55+
*ngIf="(selectCurrentUserClaimsSitesUpdate$ | async) && !row.isLocked"
56+
(click)="openEditModal(row)"
57+
>
58+
<mat-icon>edit</mat-icon>
59+
<span>{{ 'Edit site' | translate }}</span>
60+
</button>
61+
62+
<button
63+
mat-menu-item
64+
id="deleteSiteBtn{{i}}"
65+
*ngIf="(selectCurrentUserClaimsSitesDelete$ | async) && !row.isLocked"
66+
(click)="openDeleteModal(row)"
67+
>
68+
<mat-icon color="warn">delete</mat-icon>
69+
<span>{{ 'Delete site' | translate }}</span>
70+
</button>
71+
</mat-menu>
6672
</div>
6773
</ng-template>
6874

‎eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,32 @@
2121
[rowStriped]="true"
2222
[showColumnMenuButton]="false">
2323
</mtx-grid>
24-
<ng-template #actionsTpl let-row>
25-
<div *ngIf="(selectCurrentUserClaimsWorkersDelete$ | async) || (selectCurrentUserClaimsWorkersUpdate$ | async)">
26-
<button
27-
mat-icon-button
28-
id="workerEditBtn"
29-
(click)="openEditModal(row)"
30-
*ngIf="(selectCurrentUserClaimsWorkersUpdate$ | async) && !row.isLocked"
31-
matTooltip="{{ 'Edit Worker' | translate }}"
32-
>
33-
<mat-icon>edit</mat-icon>
34-
</button>
35-
<button
36-
mat-icon-button
37-
color="warn"
38-
id="workerDeleteBtn"
39-
(click)="openDeleteModal(row)"
40-
*ngIf="(selectCurrentUserClaimsWorkersDelete$ | async) && !row.isLocked"
41-
matTooltip="{{ 'Delete Worker' | translate }}"
42-
>
43-
<mat-icon>delete</mat-icon>
24+
<ng-template #actionsTpl let-row let-i="index">
25+
<div class="worker-actions" id="action-items-{{i}}" *ngIf="(selectCurrentUserClaimsWorkersDelete$ | async) || (selectCurrentUserClaimsWorkersUpdate$ | async)">
26+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
27+
<mat-icon>more_vert</mat-icon>
4428
</button>
29+
30+
<mat-menu #menu="matMenu">
31+
<button
32+
mat-menu-item
33+
id="workerEditBtn{{i}}"
34+
*ngIf="(selectCurrentUserClaimsWorkersUpdate$ | async) && !row.isLocked"
35+
(click)="openEditModal(row)"
36+
>
37+
<mat-icon>edit</mat-icon>
38+
<span>{{ 'Edit Worker' | translate }}</span>
39+
</button>
40+
41+
<button
42+
mat-menu-item
43+
id="workerDeleteBtn{{i}}"
44+
*ngIf="(selectCurrentUserClaimsWorkersDelete$ | async) && !row.isLocked"
45+
(click)="openDeleteModal(row)"
46+
>
47+
<mat-icon color="warn">delete</mat-icon>
48+
<span>{{ 'Delete Worker' | translate }}</span>
49+
</button>
50+
</mat-menu>
4551
</div>
4652
</ng-template>

0 commit comments

Comments
 (0)