Skip to content

Commit 6a3c4e4

Browse files
renemadsenrenemadsen
authored
Merge pull request #570 from microting/copilot/refactor-actions-table-style-again
Refactor report-table Actions columns to use menu dropdown pattern
2 parents 7865047 + 4271700 commit 6a3c4e4

File tree

4 files changed

+86
-99
lines changed

4 files changed

+86
-99
lines changed

‎eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,49 @@
11
<mtx-grid
22
[data]="items"
33
[columns]="mergedTableHeaders"
4+
[cellTemplate]="{
5+
actions: actionsTpl
6+
}"
47
[showPaginator]="false"
58
[pageOnFront]="false"
69
[rowStriped]="true"
710
[showToolbar]="false"
811
[showColumnMenuButton]="false"
912
>
1013
</mtx-grid>
14+
15+
<ng-template #actionsTpl let-row let-i="index">
16+
<div class="report-actions" id="action-items-{{i}}">
17+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
18+
<mat-icon>more_vert</mat-icon>
19+
</button>
20+
21+
<mat-menu #menu="matMenu">
22+
<button
23+
mat-menu-item
24+
*ngIf="row.imagesCount !== 0"
25+
id="viewImagesBtn-{{i}}"
26+
(click)="onClickViewPicture(row.microtingSdkCaseId)"
27+
>
28+
<mat-icon>image</mat-icon>
29+
<span>{{ 'View images' | translate }}</span>
30+
</button>
31+
<button
32+
mat-menu-item
33+
id="editCaseBtn-{{i}}"
34+
(click)="onClickEditCase(row.microtingSdkCaseId, row.eFormId, row.id)"
35+
>
36+
<mat-icon>edit</mat-icon>
37+
<span>{{ 'Edit' | translate }}</span>
38+
</button>
39+
<button
40+
mat-menu-item
41+
id="deleteCaseBtn-{{i}}"
42+
(click)="onShowDeletePlanningCaseModal(row)"
43+
>
44+
<mat-icon color="warn">delete</mat-icon>
45+
<span>{{ 'Delete' | translate }}</span>
46+
</button>
47+
</mat-menu>
48+
</div>
49+
</ng-template>

‎eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.ts‎

Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -54,29 +54,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
5454
{
5555
header: this.translateService.stream('Actions'),
5656
field: 'actions',
57-
type: 'button',
58-
buttons: [
59-
{
60-
tooltip: this.translateService.stream('View images'),
61-
type: 'icon',
62-
click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
63-
icon: 'image',
64-
iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
65-
},
66-
{
67-
tooltip: this.translateService.stream('Edit'),
68-
type: 'icon',
69-
click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
70-
icon: 'edit',
71-
},
72-
{
73-
tooltip: this.translateService.stream('Delete'),
74-
type: 'icon',
75-
click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
76-
color: 'warn',
77-
icon: 'delete',
78-
}
79-
]
57+
width: '160px',
58+
pinned: 'right',
8059
},
8160
];
8261
adminTableHeaders: MtxGridColumn[] = [
@@ -96,29 +75,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
9675
{
9776
header: this.translateService.stream('Actions'),
9877
field: 'actions',
99-
type: 'button',
100-
buttons: [
101-
{
102-
tooltip: this.translateService.stream('View images'),
103-
type: 'icon',
104-
click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
105-
icon: 'image',
106-
iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
107-
},
108-
{
109-
tooltip: this.translateService.stream('Edit'),
110-
type: 'icon',
111-
click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
112-
icon: 'edit',
113-
},
114-
{
115-
tooltip: this.translateService.stream('Delete'),
116-
type: 'icon',
117-
click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
118-
color: 'warn',
119-
icon: 'delete',
120-
}
121-
]
78+
width: '160px',
79+
pinned: 'right',
12280
},
12381
];
12482
mergedTableHeaders: MtxGridColumn[] = [];
@@ -169,12 +127,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
169127
};
170128
});
171129
if (this.isAdmin) {
172-
this.adminTableHeaders.find(x => x.field === 'actions').class = ((record: ReportEformItemModel, _) =>
173-
record ? `id-${record.id}` : '');//microtingSdkCaseId${record.microtingSdkCaseId}-eFormId${record.eFormId}-
174130
this.mergedTableHeaders = [...this.adminTableHeaders, ...itemHeaders];
175131
} else {
176-
this.tableHeaders.find(x => x.field === 'actions').class = ((record: ReportEformItemModel, _) =>
177-
record ? `id-${record.id}` : '');//microtingSdkCaseId${record.microtingSdkCaseId}-eFormId${record.eFormId}-
178132
this.mergedTableHeaders = [...this.tableHeaders, ...itemHeaders];
179133
}
180134
}

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,49 @@
11
<mtx-grid
22
[data]="items"
33
[columns]="mergedTableHeaders"
4+
[cellTemplate]="{
5+
actions: actionsTpl
6+
}"
47
[showPaginator]="false"
58
[pageOnFront]="false"
69
[rowStriped]="true"
710
[showToolbar]="false"
811
[showColumnMenuButton]="false"
912
>
1013
</mtx-grid>
14+
15+
<ng-template #actionsTpl let-row let-i="index">
16+
<div class="report-actions" id="action-items-{{i}}">
17+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
18+
<mat-icon>more_vert</mat-icon>
19+
</button>
20+
21+
<mat-menu #menu="matMenu">
22+
<button
23+
mat-menu-item
24+
*ngIf="row.imagesCount !== 0"
25+
id="viewImagesBtn-{{i}}"
26+
(click)="onClickViewPicture(row.microtingSdkCaseId)"
27+
>
28+
<mat-icon>image</mat-icon>
29+
<span>{{ 'View images' | translate }}</span>
30+
</button>
31+
<button
32+
mat-menu-item
33+
id="editCaseBtn-{{i}}"
34+
(click)="onClickEditCase(row.microtingSdkCaseId, row.eFormId, row.id)"
35+
>
36+
<mat-icon>edit</mat-icon>
37+
<span>{{ 'Edit' | translate }}</span>
38+
</button>
39+
<button
40+
mat-menu-item
41+
id="deleteCaseBtn-{{i}}"
42+
(click)="onShowDeletePlanningCaseModal(row)"
43+
>
44+
<mat-icon color="warn">delete</mat-icon>
45+
<span>{{ 'Delete' | translate }}</span>
46+
</button>
47+
</mat-menu>
48+
</div>
49+
</ng-template>

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.ts‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
4949
{
5050
header: this.translateService.stream('Actions'),
5151
field: 'actions',
52-
type: 'button',
53-
buttons: [
54-
{
55-
tooltip: this.translateService.stream('View images'),
56-
type: 'icon',
57-
click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
58-
icon: 'image',
59-
iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
60-
},
61-
{
62-
tooltip: this.translateService.stream('Edit'),
63-
type: 'icon',
64-
click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
65-
icon: 'edit',
66-
},
67-
{
68-
tooltip: this.translateService.stream('Delete'),
69-
type: 'icon',
70-
click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
71-
color: 'warn',
72-
icon: 'delete',
73-
}
74-
]
52+
width: '160px',
53+
pinned: 'right',
7554
},
7655
{header: this.translateService.stream('Employee no'), field: 'employeeNo'},
7756
];
@@ -87,29 +66,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
8766
{
8867
header: this.translateService.stream('Actions'),
8968
field: 'actions',
90-
type: 'button',
91-
buttons: [
92-
{
93-
tooltip: this.translateService.stream('View images'),
94-
type: 'icon',
95-
click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
96-
icon: 'image',
97-
iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
98-
},
99-
{
100-
tooltip: this.translateService.stream('Edit'),
101-
type: 'icon',
102-
click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
103-
icon: 'edit',
104-
},
105-
{
106-
tooltip: this.translateService.stream('Delete'),
107-
type: 'icon',
108-
click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
109-
color: 'warn',
110-
icon: 'delete',
111-
}
112-
]
69+
width: '160px',
70+
pinned: 'right',
11371
},
11472
{header: this.translateService.stream('Employee no'), field: 'employeeNo'},
11573
];
@@ -161,9 +119,6 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
161119
let isAdmin = false;
162120
this.selectAuthIsAdmin$.subscribe((selectAuthIsAdmin$) => isAdmin = selectAuthIsAdmin$);
163121
const tableHeaders = [...(isAdmin ? [...this.adminTableHeaders] : [...this.tableHeaders])];
164-
const index = tableHeaders
165-
.findIndex(x => x.field === 'actions');
166-
tableHeaders[index].width = this.items.filter(x => x.imagesCount > 0).length > 0 ? '160px' : '110px';
167122

168123
this.mergedTableHeaders = [
169124
...tableHeaders,

0 commit comments

Comments
 (0)