Skip to content

Commit a89055f

Browse files
Copilotrenemadsen
Copilot
and
renemadsen
committed
Refactor Actions column to use mat-menu following reference pattern
Co-authored-by: renemadsen <[email protected]>
1 parent 1f36f36 commit a89055f

File tree

4 files changed

+61
-114
lines changed

4 files changed

+61
-114
lines changed

‎eform-client/src/app/plugins/modules/greate-belt-pn/components/report/report-page/report-container/report-container.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@
2222
[reportModel]="reportModel"
2323
[paginationTemplate]="paginatorTpl"
2424
[toolbarTemplate]="toolbarTpl"
25+
[queryParams]="queryParams"
2526
(showRemoveCaseModal)="showRemoveCaseModal($event)"
2627
(showArchiveCaseModal)="showArchiveCaseModal($event)"
2728
(downloadPdf)="onDownloadPdf($event)"
29+
(editCase)="onEditCase($event)"
2830
(sortChange)="getReport()"
2931
></app-report-table>
3032

‎eform-client/src/app/plugins/modules/greate-belt-pn/components/report/report-page/report-container/report-container.component.ts‎

Lines changed: 8 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -104,30 +104,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
104104
pinned: 'right',
105105
header: this.translateService.stream('Actions'),
106106
field: 'actions',
107-
type: 'button',
108-
buttons: [
109-
{
110-
type: 'icon',
111-
icon: 'edit',
112-
color: 'accent',
113-
tooltip: this.translateService.stream('Edit Case'),
114-
click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
115-
},
116-
{
117-
type: 'icon',
118-
icon: 'picture_as_pdf',
119-
color: 'accent',
120-
tooltip: this.translateService.stream('Download PDF'),
121-
click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
122-
},
123-
{
124-
color: 'warn',
125-
type: 'icon',
126-
icon: 'delete',
127-
tooltip: this.translateService.stream('Delete Case'),
128-
click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
129-
},
130-
]
107+
width: '160px',
131108
},
132109
];
133110
public selectReportFiltersNameFilter$ = this.store.select(selectReportFiltersNameFilter);
@@ -254,30 +231,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
254231
pinned: 'right',
255232
header: this.translateService.stream('Actions'),
256233
field: 'actions',
257-
type: 'button',
258-
buttons: [
259-
{
260-
type: 'icon',
261-
icon: 'edit',
262-
color: 'accent',
263-
tooltip: this.translateService.stream('Edit Case'),
264-
click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
265-
},
266-
{
267-
type: 'icon',
268-
icon: 'picture_as_pdf',
269-
color: 'accent',
270-
tooltip: this.translateService.stream('Download PDF'),
271-
click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
272-
},
273-
{
274-
color: 'warn',
275-
type: 'icon',
276-
icon: 'delete',
277-
tooltip: this.translateService.stream('Delete Case'),
278-
click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
279-
},
280-
]
234+
width: '160px',
281235
},
282236
];
283237
}
@@ -382,30 +336,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
382336
pinned: 'right',
383337
header: this.translateService.stream('Actions'),
384338
field: 'actions',
385-
type: 'button',
386-
buttons: [
387-
{
388-
type: 'icon',
389-
icon: 'edit',
390-
color: 'accent',
391-
tooltip: this.translateService.stream('Edit Case'),
392-
click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
393-
},
394-
{
395-
type: 'icon',
396-
icon: 'picture_as_pdf',
397-
color: 'accent',
398-
tooltip: this.translateService.stream('Download PDF'),
399-
click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
400-
},
401-
{
402-
color: 'warn',
403-
type: 'icon',
404-
icon: 'delete',
405-
tooltip: this.translateService.stream('Delete Case'),
406-
click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
407-
},
408-
]
339+
width: '160px',
409340
},
410341
];
411342
}
@@ -522,30 +453,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
522453
pinned: 'right',
523454
header: this.translateService.stream('Actions'),
524455
field: 'actions',
525-
type: 'button',
526-
buttons: [
527-
{
528-
type: 'icon',
529-
icon: 'edit',
530-
color: 'accent',
531-
tooltip: this.translateService.stream('Edit Case'),
532-
click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
533-
},
534-
{
535-
type: 'icon',
536-
icon: 'picture_as_pdf',
537-
color: 'accent',
538-
tooltip: this.translateService.stream('Download PDF'),
539-
click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
540-
},
541-
{
542-
color: 'warn',
543-
type: 'icon',
544-
icon: 'delete',
545-
tooltip: this.translateService.stream('Delete Case'),
546-
click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
547-
},
548-
]
456+
width: '160px',
549457
},
550458
];
551459
}
@@ -763,6 +671,10 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
763671
this.showArchiveCaseModal(reportCaseModel);
764672
}
765673

674+
onEditCase(model: ReportCaseModel) {
675+
this.router.navigate(['/cases/edit/' + model.id + '/' + model.templateId], {queryParams: this.queryParams});
676+
}
677+
766678
// onDownloadPdf(model: ReportCaseModel) {
767679
// this.downloadPdf.emit(model);
768680
// }

‎eform-client/src/app/plugins/modules/greate-belt-pn/components/report/report-page/report-table/report-table.component.html‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<mtx-grid
22
[data]="reportModel.entities"
33
[columns]="tableHeaders"
4+
[cellTemplate]="{
5+
actions: actionsTpl
6+
}"
47
[showPaginator]="true"
58
[paginationTemplate]="paginationTemplate"
69
[pageOnFront]="false"
@@ -13,21 +16,37 @@
1316
(sortChange)="sortTable($event)"
1417
></mtx-grid>
1518

16-
<!--<ng-template #statusTpl let-row let-i=index>-->
17-
<!-- <button-->
18-
<!-- mat-icon-button-->
19-
<!-- color="primary"-->
20-
<!-- (click)="editEntity(row)"-->
21-
<!-- [disabled]="!reportModel.canEdit"-->
22-
<!-- >-->
23-
<!-- <mat-icon>edit</mat-icon>-->
24-
<!-- </button>-->
25-
<!-- <button-->
26-
<!-- mat-icon-button-->
27-
<!-- color="warn"-->
28-
<!-- (click)="deleteEntity(row)"-->
29-
<!-- [disabled]="!reportModel.canDelete"-->
30-
<!-- >-->
31-
<!-- <mat-icon>delete</mat-icon>-->
32-
<!-- </button>-->
33-
<!--</ng-template>-->
19+
<ng-template #actionsTpl let-row let-i="index">
20+
<div class="report-actions" id="action-items-{{i}}">
21+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
22+
<mat-icon>more_vert</mat-icon>
23+
</button>
24+
25+
<mat-menu #menu="matMenu">
26+
<button
27+
mat-menu-item
28+
id="editCaseBtn-{{i}}"
29+
(click)="onEditCase(row)"
30+
>
31+
<mat-icon>edit</mat-icon>
32+
<span>{{ 'Edit Case' | translate }}</span>
33+
</button>
34+
<button
35+
mat-menu-item
36+
id="downloadPdfBtn-{{i}}"
37+
(click)="onDownloadPdf(row)"
38+
>
39+
<mat-icon>picture_as_pdf</mat-icon>
40+
<span>{{ 'Download PDF' | translate }}</span>
41+
</button>
42+
<button
43+
mat-menu-item
44+
id="deleteCaseBtn-{{i}}"
45+
(click)="onDeleteCase(row)"
46+
>
47+
<mat-icon color="warn">delete</mat-icon>
48+
<span>{{ 'Delete Case' | translate }}</span>
49+
</button>
50+
</mat-menu>
51+
</div>
52+
</ng-template>

‎eform-client/src/app/plugins/modules/greate-belt-pn/components/report/report-page/report-table/report-table.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ export class ReportTableComponent implements OnInit {
3232
@Input() tableHeaders: MtxGridColumn[];
3333
@Input() paginationTemplate!: TemplateRef<any>;
3434
@Input() toolbarTemplate!: TemplateRef<any>;
35+
@Input() queryParams: any;
3536
@Output() showArchiveCaseModal: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
3637
@Output() showRemoveCaseModal: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
3738
@Output() downloadPdf: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
3839
@Output() sortChange: EventEmitter<void> = new EventEmitter<void>();
40+
@Output() editCase: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
3941

4042
get greateBeltPnClaims() {
4143
return GreateBeltPnClaims;
@@ -59,4 +61,16 @@ export class ReportTableComponent implements OnInit {
5961
this.reportStateService.onSortTable(sort.active);
6062
this.sortChange.emit();
6163
}
64+
65+
onEditCase(row: ReportCaseModel) {
66+
this.editCase.emit(row);
67+
}
68+
69+
onDownloadPdf(row: ReportCaseModel) {
70+
this.downloadPdf.emit(row);
71+
}
72+
73+
onDeleteCase(row: ReportCaseModel) {
74+
this.showRemoveCaseModal.emit(row);
75+
}
6276
}

0 commit comments

Comments
 (0)