Apply same refactoring to components/reports/report-table

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

Author: Copilot

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

@@ -1,10 +1,49 @@
 <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
+        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/components/reports/report-table/report-table.component.ts

@@ -54,29 +54,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',
     },
   ];
   adminTableHeaders: MtxGridColumn[] = [
@@ -96,29 +75,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',
     },
   ];
   mergedTableHeaders: MtxGridColumn[] = [];
@@ -169,12 +127,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
         };
       });
       if (this.isAdmin) {
-        this.adminTableHeaders.find(x => x.field === 'actions').class = ((record: ReportEformItemModel, _) =>
-          record ? `id-${record.id}` : '');//microtingSdkCaseId${record.microtingSdkCaseId}-eFormId${record.eFormId}-
         this.mergedTableHeaders = [...this.adminTableHeaders, ...itemHeaders];
       } else {
-        this.tableHeaders.find(x => x.field === 'actions').class = ((record: ReportEformItemModel, _) =>
-          record ? `id-${record.id}` : '');//microtingSdkCaseId${record.microtingSdkCaseId}-eFormId${record.eFormId}-
         this.mergedTableHeaders = [...this.tableHeaders, ...itemHeaders];
       }
     }