Standardize Actions column across tables to use mat-menu dropdown pattern

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

@@ -3,6 +3,7 @@ <h3>{{'Halebid' | translate}}</h3>
   <mtx-grid
     [data]="tableItemsForAreaRulesDefaultT3"
     [columns]="tableHeadersT3"
+    [cellTemplate]="{actions: actionsT3Tpl}"
     [showPaginator]="false"
     [pageOnFront]="false"
     [rowStriped]="true"
@@ -17,6 +18,7 @@ <h3>{{'Morning tour' | translate}}</h3>
   <mtx-grid
     [data]="tableItemsForAreaRulesDefaultT10b"
     [columns]="tableHeadersT10b_"
+    [cellTemplate]="{actions: actionsT10bTpl}"
     [showPaginator]="false"
     [pageOnFront]="false"
     [rowStriped]="true"
@@ -140,4 +142,60 @@ <h3 class="mt-3">{{'Chemicals' | translate}}</h3>
       <mat-icon svgIcon="file-pdf"></mat-icon>
     </a>
   </ng-template>
+
+  <ng-template #actionsT3Tpl let-row let-i="index">
+    <div class="area-rules-actions" id="action-items-t3-{{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
+          id="showAreaRulePlanningBtn-t3-{{i}}"
+          (click)="onShowPlanAreaRule(row)"
+        >
+          <mat-icon color="accent">assignment</mat-icon>
+          <span>{{ 'Plan and assign' | translate }}</span>
+        </button>
+        <button
+          mat-menu-item
+          id="updateEntityList-t3-{{i}}"
+          class="updateEntityList"
+          (click)="onShowEditEntityListModal(selectedArea.groupId)"
+        >
+          <mat-icon color="accent">list</mat-icon>
+          <span>{{ 'Edit list of stables for tailbites' | translate }}</span>
+        </button>
+      </mat-menu>
+    </div>
+  </ng-template>
+
+  <ng-template #actionsT10bTpl let-row let-i="index">
+    <div class="area-rules-actions" id="action-items-t10b-{{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
+          id="showAreaRulePlanningBtn-t10b-{{i}}"
+          (click)="onShowPlanAreaRule(row)"
+        >
+          <mat-icon color="accent">assignment</mat-icon>
+          <span>{{ 'Plan and assign' | translate }}</span>
+        </button>
+        <button
+          mat-menu-item
+          *ngIf="!row.isDefault && selectedArea.type !== 9 && !row.planningStatus"
+          id="showEditRuleBtn-t10b-{{i}}"
+          (click)="onShowEditRuleModal(row)"
+        >
+          <mat-icon color="accent">edit</mat-icon>
+          <span>{{ 'Edit rule' | translate }}</span>
+        </button>
+      </mat-menu>
+    </div>
+  </ng-template>
 </ng-container>

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

@@ -200,24 +200,6 @@ export class AreaRulesTableComponent implements OnChanges, OnInit {
     {
       field: 'actions',
       header: this.translateService.stream('Actions'),
-      type: 'button',
-      buttons: [
-        {
-          type: 'icon',
-          color: 'accent',
-          icon: 'assignment',
-          click: (rowData: AreaRuleSimpleModel) => this.onShowPlanAreaRule(rowData),
-          tooltip: this.translateService.stream('Plan and assign'),
-        },
-        {
-          type: 'icon',
-          color: 'accent',
-          icon: 'list',
-          click: () => this.onShowEditEntityListModal(this.selectedArea.groupId),
-          tooltip: this.translateService.stream('Edit list of stables for tailbites'),
-          class: 'updateEntityList',
-        },
-      ]
     },
   ];
 
@@ -416,24 +398,6 @@ export class AreaRulesTableComponent implements OnChanges, OnInit {
     {
       field: 'actions',
       header: this.translateService.stream('Actions'),
-      type: 'button',
-      buttons: [
-        {
-          type: 'icon',
-          color: 'accent',
-          icon: 'assignment',
-          click: (rowData: AreaRuleSimpleModel) => this.onShowPlanAreaRule(rowData),
-          tooltip: this.translateService.stream('Plan and assign'),
-        },
-        {
-          type: 'icon',
-          color: 'accent',
-          icon: 'edit',
-          iif: (rowData: AreaRuleSimpleModel) => !rowData.isDefault && this.selectedArea.type !== 9 && !rowData.planningStatus,
-          click: (rowData: AreaRuleSimpleModel) => this.onShowEditRuleModal(rowData),
-          tooltip: this.translateService.stream('Edit rule'),
-        },
-      ]
     },
   ];
 

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

@@ -1,7 +1,7 @@
 <mtx-grid
   [data]="_files.entities"
   [columns]="tableHeaders"
-  [cellTemplate]="{select: selectTpl, property: propertyTpl, tags: tagsTpl}"
+  [cellTemplate]="{select: selectTpl, property: propertyTpl, tags: tagsTpl, actions: actionsTpl}"
   [headerExtraTemplate]="selectHeaderTpl"
   [showPaginator]="false"
   [pageOnFront]="false"
@@ -69,3 +69,41 @@
     </button>
   </div>
 </ng-template>
+
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="files-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
+        id="viewPdfBtn-{{i}}"
+        class="viewPdfBtn"
+        (click)="onOpenView(row)"
+      >
+        <mat-icon>visibility</mat-icon>
+        <span>{{ 'View File' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="editFilenameBtn-{{i}}"
+        class="editFilenameBtn"
+        (click)="onShowEditDocumentModal(row)"
+      >
+        <mat-icon color="accent">edit</mat-icon>
+        <span>{{ 'Edit file name' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="deleteFileBtn-{{i}}"
+        class="deleteFileBtn"
+        (click)="onOpenDeleteModal(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete file' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>

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

@@ -69,35 +69,9 @@ export class FilesTableComponent implements OnInit {
     {
       field: 'actions',
       header: this.translateService.stream('Actions'),
-      type: 'button',
       width: '200px',
       pinned: 'right',
       right: '0px',
-      buttons: [
-        {
-          type: 'icon',
-          icon: 'visibility',
-          tooltip: this.translateService.stream('View File'),
-          click: (filesModel: FilesModel) => this.onOpenView(filesModel),
-          class: 'viewPdfBtn',
-        },
-        {
-          color: 'accent',
-          type: 'icon',
-          icon: 'edit',
-          tooltip: this.translateService.stream('Edit file name'),
-          click: (filesModel: FilesModel) => this.onShowEditDocumentModal(filesModel),
-          class: 'editFilenameBtn',
-        },
-        {
-          color: 'warn',
-          type: 'icon',
-          icon: 'delete',
-          tooltip: this.translateService.stream('Delete file'),
-          click: (filesModel: FilesModel) => this.onOpenDeleteModal(filesModel),
-          class: 'deleteFileBtn',
-        },
-      ],
     },
   ];
   pdfSub$: any;

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

@@ -2,7 +2,7 @@
   <mtx-grid
     [data]="workOrderCases"
     [columns]="tableHeaders"
-    [cellTemplate]="{propertyName: propertyNameTpl, createdByName: createdByNameTpl, lastAssignedTo: lastAssignedToTpl, lastUpdatedBy: lastUpdatedByTpl, priority: priorityTpl, status: statusTpl}"
+    [cellTemplate]="{propertyName: propertyNameTpl, createdByName: createdByNameTpl, lastAssignedTo: lastAssignedToTpl, lastUpdatedBy: lastUpdatedByTpl, priority: priorityTpl, status: statusTpl, actions: actionsTpl}"
     [showPaginator]="false"
     [pageOnFront]="false"
     [rowStriped]="true"
@@ -55,3 +55,32 @@
     <span>{{row.status | translate}}</span>
   </mat-chip>
 </ng-template>
+
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="task-management-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
+        id="taskManagementViewBtn-{{i}}"
+        class="taskManagementViewBtn"
+        (click)="onOpenViewModal(row.id)"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit task' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="taskManagementDeleteTaskBtn-{{i}}"
+        class="taskManagementDeleteTaskBtn"
+        (click)="onOpenDeleteModal(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete task' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>

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

@@ -78,27 +78,9 @@ export class TaskManagementTableComponent implements OnInit {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
       width: '100px',
       pinned: 'right',
       right: '0px',
-      buttons: [
-        {
-          type: 'icon',
-          icon: 'edit',
-          click: (rowData: WorkOrderCaseModel) => this.onOpenViewModal(rowData.id),
-          tooltip: this.translateService.stream('Edit task'),
-          class: 'taskManagementViewBtn',
-        },
-        {
-          type: 'icon',
-          icon: 'delete',
-          color: 'warn',
-          click: (rowData: WorkOrderCaseModel) => this.onOpenDeleteModal(rowData),
-          tooltip: this.translateService.stream('Delete task'),
-          class: 'taskManagementDeleteTaskBtn',
-        },
-      ]
     },
   ];
 

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

@@ -1,7 +1,7 @@
 <mtx-grid
   [data]="tasks"
   [columns]="tableHeaders"
-  [cellTemplate]="{tags: tagsTpl}"
+  [cellTemplate]="{tags: tagsTpl, actions: actionsTpl}"
   [showPaginator]="false"
   [pageOnFront]="false"
   [rowStriped]="true"
@@ -23,6 +23,35 @@
   </div>
 </ng-template>
 
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="task-tracker-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.createdInWizard && !row.taskIsExpired) || (row.taskIsExpired && row.createdInWizard && !row.movedToExpiredFolder)"
+        id="editTaskBtn-{{i}}"
+        (click)="redirectToCompliance(row)"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        *ngIf="row.createdInWizard && !row.movedToExpiredFolder"
+        id="deleteTaskBtn-{{i}}"
+        (click)="onShowDeleteComplianceModal(row)"
+      >
+        <mat-icon>delete</mat-icon>
+        <span>{{ 'Delete Case' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>
+
 
 <!--<div class="mtx-grid">-->
 <!--  <div class="mtx-grid-main mtx-grid-layout">-->

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

@@ -70,26 +70,6 @@ export class TaskTrackerTableComponent implements OnInit, OnChanges {
     // actions column with custom buttons
     {header: this.translateService.stream('Actions'), field: 'actions', sortable: false, width: '100px',
       pinned: 'right',
-      type: 'button',
-      buttons: [  // action buttons for each row
-        {
-          // eslint-disable-next-line max-len
-          iif: (record: TaskModel) => (record.createdInWizard && !record.taskIsExpired) || (record.taskIsExpired && record.createdInWizard && !record.movedToExpiredFolder),
-          type: 'icon',
-          icon: 'edit',
-          tooltip: this.translateService.stream('Edit'),
-          click: (record: TaskModel) => this.redirectToCompliance(record),
-        },
-        {
-          // eslint-disable-next-line max-len
-          iif: (record: TaskModel) => record.createdInWizard && !record.movedToExpiredFolder,
-          type: 'icon',
-          tooltip:  this.translateService.stream('Delete Case'),
-          icon: 'delete',
-          //color: (record: TaskModel) => this.deleteIconColor(record), // TODO: Uncomment when the logic is implemented
-          click: (record: TaskModel) => this.onShowDeleteComplianceModal(record),
-        }
-      ],
     },
   ];
   complianceDeleteComponentAfterClosedSub$: Subscription;