Refactor report-table Actions column to use menu dropdown pattern

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

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

@@ -1,10 +1,50 @@
 <mtx-grid
   [data]="items"
   [columns]="mergedTableHeaders"
+  [cellTemplate]="{
+    actions: actionsTpl
+  }"
   [showPaginator]="false"
   [pageOnFront]="false"
   [rowStriped]="true"
   [showToolbar]="false"
   [showColumnMenuButton]="false"
 >
 </mtx-grid>
+
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="report-actions" id="action-items-{{i}}">
+    <button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        *ngIf="row.imagesCount !== 0"
+        id="viewImagesBtn-{{i}}"
+        (click)="onClickViewPicture(row.microtingSdkCaseId)"
+      >
+        <mat-icon>image</mat-icon>
+        <span>{{ 'View images' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="editCaseBtn-{{i}}"
+        (click)="onClickEditCase(row.microtingSdkCaseId, row.eFormId, row.id)"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        color="warn"
+        id="deleteCaseBtn-{{i}}"
+        (click)="onShowDeletePlanningCaseModal(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>

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

@@ -49,29 +49,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          tooltip: this.translateService.stream('View images'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
-          icon: 'image',
-          iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
-        },
-        {
-          tooltip: this.translateService.stream('Edit'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
-          icon: 'edit',
-        },
-        {
-          tooltip: this.translateService.stream('Delete'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
-          color: 'warn',
-          icon: 'delete',
-        }
-      ]
+      width: '160px',
+      pinned: 'right',
     },
     {header: this.translateService.stream('Employee no'), field: 'employeeNo'},
   ];
@@ -87,29 +66,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          tooltip: this.translateService.stream('View images'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
-          icon: 'image',
-          iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
-        },
-        {
-          tooltip: this.translateService.stream('Edit'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
-          icon: 'edit',
-        },
-        {
-          tooltip: this.translateService.stream('Delete'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
-          color: 'warn',
-          icon: 'delete',
-        }
-      ]
+      width: '160px',
+      pinned: 'right',
     },
     {header: this.translateService.stream('Employee no'), field: 'employeeNo'},
   ];
@@ -161,9 +119,6 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
       let isAdmin = false;
       this.selectAuthIsAdmin$.subscribe((selectAuthIsAdmin$) => isAdmin = selectAuthIsAdmin$);
       const tableHeaders = [...(isAdmin ? [...this.adminTableHeaders] : [...this.tableHeaders])];
-      const index = tableHeaders
-        .findIndex(x => x.field === 'actions');
-      tableHeaders[index].width = this.items.filter(x => x.imagesCount > 0).length > 0 ? '160px' : '110px';
 
       this.mergedTableHeaders = [
         ...tableHeaders,