Refactor Actions column to use mat-menu dropdown pattern

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

@@ -22,9 +22,11 @@
   [reportModel]="reportModel"
   [paginationTemplate]="paginatorTpl"
   [toolbarTemplate]="toolbarTpl"
+  [queryParams]="queryParams"
   (showRemoveCaseModal)="showRemoveCaseModal($event)"
   (showArchiveCaseModal)="showArchiveCaseModal($event)"
   (downloadPdf)="onDownloadPdf($event)"
+  (editCase)="onEditCase($event)"
   (sortChange)="getReport()"
 ></app-report-table>
 

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

@@ -104,30 +104,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
       pinned: 'right',
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          type: 'icon',
-          icon: 'edit',
-          color: 'accent',
-          tooltip: this.translateService.stream('Edit Case'),
-          click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
-        },
-        {
-          type: 'icon',
-          icon: 'picture_as_pdf',
-          color: 'accent',
-          tooltip: this.translateService.stream('Download PDF'),
-          click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
-        },
-        {
-          color: 'warn',
-          type: 'icon',
-          icon: 'delete',
-          tooltip: this.translateService.stream('Delete Case'),
-          click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
-        },
-      ]
+      width: '160px',
     },
   ];
   public selectReportFiltersNameFilter$ = this.store.select(selectReportFiltersNameFilter);
@@ -254,30 +231,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
           pinned: 'right',
           header: this.translateService.stream('Actions'),
           field: 'actions',
-          type: 'button',
-          buttons: [
-            {
-              type: 'icon',
-              icon: 'edit',
-              color: 'accent',
-              tooltip: this.translateService.stream('Edit Case'),
-              click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
-            },
-            {
-              type: 'icon',
-              icon: 'picture_as_pdf',
-              color: 'accent',
-              tooltip: this.translateService.stream('Download PDF'),
-              click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
-            },
-            {
-              color: 'warn',
-              type: 'icon',
-              icon: 'delete',
-              tooltip: this.translateService.stream('Delete Case'),
-              click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
-            },
-          ]
+          width: '160px',
         },
       ];
     }
@@ -382,30 +336,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
           pinned: 'right',
           header: this.translateService.stream('Actions'),
           field: 'actions',
-          type: 'button',
-          buttons: [
-            {
-              type: 'icon',
-              icon: 'edit',
-              color: 'accent',
-              tooltip: this.translateService.stream('Edit Case'),
-              click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
-            },
-            {
-              type: 'icon',
-              icon: 'picture_as_pdf',
-              color: 'accent',
-              tooltip: this.translateService.stream('Download PDF'),
-              click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
-            },
-            {
-              color: 'warn',
-              type: 'icon',
-              icon: 'delete',
-              tooltip: this.translateService.stream('Delete Case'),
-              click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
-            },
-          ]
+          width: '160px',
         },
       ];
     }
@@ -522,30 +453,7 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
           pinned: 'right',
           header: this.translateService.stream('Actions'),
           field: 'actions',
-          type: 'button',
-          buttons: [
-            {
-              type: 'icon',
-              icon: 'edit',
-              color: 'accent',
-              tooltip: this.translateService.stream('Edit Case'),
-              click: (rowData: ReportCaseModel) => this.router.navigate(['/cases/edit/' + rowData.id + '/' + rowData.templateId], {queryParams: this.queryParams}),
-            },
-            {
-              type: 'icon',
-              icon: 'picture_as_pdf',
-              color: 'accent',
-              tooltip: this.translateService.stream('Download PDF'),
-              click: (rowData: ReportCaseModel) => this.onDownloadPdf(rowData),
-            },
-            {
-              color: 'warn',
-              type: 'icon',
-              icon: 'delete',
-              tooltip: this.translateService.stream('Delete Case'),
-              click: (rowData: ReportCaseModel) => this.onShowRemoveCaseModal(rowData),
-            },
-          ]
+          width: '160px',
         },
       ];
     }
@@ -763,6 +671,10 @@ export class ReportContainerComponent implements OnInit, OnDestroy {
     this.showArchiveCaseModal(reportCaseModel);
   }
 
+  onEditCase(model: ReportCaseModel) {
+    this.router.navigate(['/cases/edit/' + model.id + '/' + model.templateId], {queryParams: this.queryParams});
+  }
+
   // onDownloadPdf(model: ReportCaseModel) {
   //   this.downloadPdf.emit(model);
   // }

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

@@ -1,6 +1,9 @@
 <mtx-grid
   [data]="reportModel.entities"
   [columns]="tableHeaders"
+  [cellTemplate]="{
+    actions: actionsTpl
+  }"
   [showPaginator]="true"
   [paginationTemplate]="paginationTemplate"
   [pageOnFront]="false"
@@ -13,21 +16,38 @@
   (sortChange)="sortTable($event)"
 ></mtx-grid>
 
-<!--<ng-template #statusTpl let-row let-i=index>-->
-<!--  <button-->
-<!--    mat-icon-button-->
-<!--    color="primary"-->
-<!--    (click)="editEntity(row)"-->
-<!--    [disabled]="!reportModel.canEdit"-->
-<!--  >-->
-<!--    <mat-icon>edit</mat-icon>-->
-<!--  </button>-->
-<!--  <button-->
-<!--    mat-icon-button-->
-<!--    color="warn"-->
-<!--    (click)="deleteEntity(row)"-->
-<!--    [disabled]="!reportModel.canDelete"-->
-<!--  >-->
-<!--    <mat-icon>delete</mat-icon>-->
-<!--  </button>-->
-<!--</ng-template>-->
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="report-actions" id="action-items-{{i}}">
+    <button id="actionMenu-{{i}}" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        id="editCaseBtn-{{i}}"
+        (click)="onEditCase(row)"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit Case' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="downloadPdfBtn-{{i}}"
+        (click)="onDownloadPdf(row)"
+      >
+        <mat-icon>picture_as_pdf</mat-icon>
+        <span>{{ 'Download PDF' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        color="warn"
+        id="deleteCaseBtn-{{i}}"
+        (click)="onDeleteCase(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete Case' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>

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

@@ -32,10 +32,12 @@ export class ReportTableComponent implements OnInit {
   @Input() tableHeaders: MtxGridColumn[];
   @Input() paginationTemplate!: TemplateRef<any>;
   @Input() toolbarTemplate!: TemplateRef<any>;
+  @Input() queryParams: any;
   @Output() showArchiveCaseModal: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
   @Output() showRemoveCaseModal: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
   @Output() downloadPdf: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
   @Output() sortChange: EventEmitter<void> = new EventEmitter<void>();
+  @Output() editCase: EventEmitter<ReportCaseModel> = new EventEmitter<ReportCaseModel>();
 
   get greateBeltPnClaims() {
     return GreateBeltPnClaims;
@@ -59,4 +61,16 @@ export class ReportTableComponent implements OnInit {
     this.reportStateService.onSortTable(sort.active);
     this.sortChange.emit();
   }
+
+  onEditCase(row: ReportCaseModel) {
+    this.editCase.emit(row);
+  }
+
+  onDownloadPdf(row: ReportCaseModel) {
+    this.downloadPdf.emit(row);
+  }
+
+  onDeleteCase(row: ReportCaseModel) {
+    this.showRemoveCaseModal.emit(row);
+  }
 }