Skip to content

Commit 893181f

Browse files
renemadsenrenemadsen
authored
Merge pull request #562 from microting/copilot/refactor-actions-table-style
Standardize Actions column across tables to use mat-menu dropdown pattern
2 parents 56d6dd1 + 22324e9 commit 893181f

File tree

8 files changed

+157
-103
lines changed

8 files changed

+157
-103
lines changed

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ <h3>{{'Halebid' | translate}}</h3>
33
<mtx-grid
44
[data]="tableItemsForAreaRulesDefaultT3"
55
[columns]="tableHeadersT3"
6+
[cellTemplate]="{actions: actionsT3Tpl}"
67
[showPaginator]="false"
78
[pageOnFront]="false"
89
[rowStriped]="true"
@@ -17,6 +18,7 @@ <h3>{{'Morning tour' | translate}}</h3>
1718
<mtx-grid
1819
[data]="tableItemsForAreaRulesDefaultT10b"
1920
[columns]="tableHeadersT10b_"
21+
[cellTemplate]="{actions: actionsT10bTpl}"
2022
[showPaginator]="false"
2123
[pageOnFront]="false"
2224
[rowStriped]="true"
@@ -140,4 +142,60 @@ <h3 class="mt-3">{{'Chemicals' | translate}}</h3>
140142
<mat-icon svgIcon="file-pdf"></mat-icon>
141143
</a>
142144
</ng-template>
145+
146+
<ng-template #actionsT3Tpl let-row let-i="index">
147+
<div class="area-rules-actions" id="action-items-t3-{{i}}">
148+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
149+
<mat-icon>more_vert</mat-icon>
150+
</button>
151+
152+
<mat-menu #menu="matMenu">
153+
<button
154+
mat-menu-item
155+
id="showAreaRulePlanningBtn-t3-{{i}}"
156+
(click)="onShowPlanAreaRule(row)"
157+
>
158+
<mat-icon color="accent">assignment</mat-icon>
159+
<span>{{ 'Plan and assign' | translate }}</span>
160+
</button>
161+
<button
162+
mat-menu-item
163+
id="updateEntityList-t3-{{i}}"
164+
class="updateEntityList"
165+
(click)="onShowEditEntityListModal(selectedArea.groupId)"
166+
>
167+
<mat-icon color="accent">list</mat-icon>
168+
<span>{{ 'Edit list of stables for tailbites' | translate }}</span>
169+
</button>
170+
</mat-menu>
171+
</div>
172+
</ng-template>
173+
174+
<ng-template #actionsT10bTpl let-row let-i="index">
175+
<div class="area-rules-actions" id="action-items-t10b-{{i}}">
176+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
177+
<mat-icon>more_vert</mat-icon>
178+
</button>
179+
180+
<mat-menu #menu="matMenu">
181+
<button
182+
mat-menu-item
183+
id="showAreaRulePlanningBtn-t10b-{{i}}"
184+
(click)="onShowPlanAreaRule(row)"
185+
>
186+
<mat-icon color="accent">assignment</mat-icon>
187+
<span>{{ 'Plan and assign' | translate }}</span>
188+
</button>
189+
<button
190+
mat-menu-item
191+
*ngIf="!row.isDefault && selectedArea.type !== 9 && !row.planningStatus"
192+
id="showEditRuleBtn-t10b-{{i}}"
193+
(click)="onShowEditRuleModal(row)"
194+
>
195+
<mat-icon color="accent">edit</mat-icon>
196+
<span>{{ 'Edit rule' | translate }}</span>
197+
</button>
198+
</mat-menu>
199+
</div>
200+
</ng-template>
143201
</ng-container>

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

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -200,24 +200,6 @@ export class AreaRulesTableComponent implements OnChanges, OnInit {
200200
{
201201
field: 'actions',
202202
header: this.translateService.stream('Actions'),
203-
type: 'button',
204-
buttons: [
205-
{
206-
type: 'icon',
207-
color: 'accent',
208-
icon: 'assignment',
209-
click: (rowData: AreaRuleSimpleModel) => this.onShowPlanAreaRule(rowData),
210-
tooltip: this.translateService.stream('Plan and assign'),
211-
},
212-
{
213-
type: 'icon',
214-
color: 'accent',
215-
icon: 'list',
216-
click: () => this.onShowEditEntityListModal(this.selectedArea.groupId),
217-
tooltip: this.translateService.stream('Edit list of stables for tailbites'),
218-
class: 'updateEntityList',
219-
},
220-
]
221203
},
222204
];
223205

@@ -416,24 +398,6 @@ export class AreaRulesTableComponent implements OnChanges, OnInit {
416398
{
417399
field: 'actions',
418400
header: this.translateService.stream('Actions'),
419-
type: 'button',
420-
buttons: [
421-
{
422-
type: 'icon',
423-
color: 'accent',
424-
icon: 'assignment',
425-
click: (rowData: AreaRuleSimpleModel) => this.onShowPlanAreaRule(rowData),
426-
tooltip: this.translateService.stream('Plan and assign'),
427-
},
428-
{
429-
type: 'icon',
430-
color: 'accent',
431-
icon: 'edit',
432-
iif: (rowData: AreaRuleSimpleModel) => !rowData.isDefault && this.selectedArea.type !== 9 && !rowData.planningStatus,
433-
click: (rowData: AreaRuleSimpleModel) => this.onShowEditRuleModal(rowData),
434-
tooltip: this.translateService.stream('Edit rule'),
435-
},
436-
]
437401
},
438402
];
439403

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<mtx-grid
22
[data]="_files.entities"
33
[columns]="tableHeaders"
4-
[cellTemplate]="{select: selectTpl, property: propertyTpl, tags: tagsTpl}"
4+
[cellTemplate]="{select: selectTpl, property: propertyTpl, tags: tagsTpl, actions: actionsTpl}"
55
[headerExtraTemplate]="selectHeaderTpl"
66
[showPaginator]="false"
77
[pageOnFront]="false"
@@ -69,3 +69,41 @@
6969
</button>
7070
</div>
7171
</ng-template>
72+
73+
<ng-template #actionsTpl let-row let-i="index">
74+
<div class="files-actions" id="action-items-{{i}}">
75+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
76+
<mat-icon>more_vert</mat-icon>
77+
</button>
78+
79+
<mat-menu #menu="matMenu">
80+
<button
81+
mat-menu-item
82+
id="viewPdfBtn-{{i}}"
83+
class="viewPdfBtn"
84+
(click)="onOpenView(row)"
85+
>
86+
<mat-icon>visibility</mat-icon>
87+
<span>{{ 'View File' | translate }}</span>
88+
</button>
89+
<button
90+
mat-menu-item
91+
id="editFilenameBtn-{{i}}"
92+
class="editFilenameBtn"
93+
(click)="onShowEditDocumentModal(row)"
94+
>
95+
<mat-icon color="accent">edit</mat-icon>
96+
<span>{{ 'Edit file name' | translate }}</span>
97+
</button>
98+
<button
99+
mat-menu-item
100+
id="deleteFileBtn-{{i}}"
101+
class="deleteFileBtn"
102+
(click)="onOpenDeleteModal(row)"
103+
>
104+
<mat-icon color="warn">delete</mat-icon>
105+
<span>{{ 'Delete file' | translate }}</span>
106+
</button>
107+
</mat-menu>
108+
</div>
109+
</ng-template>

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

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -69,35 +69,9 @@ export class FilesTableComponent implements OnInit {
6969
{
7070
field: 'actions',
7171
header: this.translateService.stream('Actions'),
72-
type: 'button',
7372
width: '200px',
7473
pinned: 'right',
7574
right: '0px',
76-
buttons: [
77-
{
78-
type: 'icon',
79-
icon: 'visibility',
80-
tooltip: this.translateService.stream('View File'),
81-
click: (filesModel: FilesModel) => this.onOpenView(filesModel),
82-
class: 'viewPdfBtn',
83-
},
84-
{
85-
color: 'accent',
86-
type: 'icon',
87-
icon: 'edit',
88-
tooltip: this.translateService.stream('Edit file name'),
89-
click: (filesModel: FilesModel) => this.onShowEditDocumentModal(filesModel),
90-
class: 'editFilenameBtn',
91-
},
92-
{
93-
color: 'warn',
94-
type: 'icon',
95-
icon: 'delete',
96-
tooltip: this.translateService.stream('Delete file'),
97-
click: (filesModel: FilesModel) => this.onOpenDeleteModal(filesModel),
98-
class: 'deleteFileBtn',
99-
},
100-
],
10175
},
10276
];
10377
pdfSub$: any;

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<mtx-grid
33
[data]="workOrderCases"
44
[columns]="tableHeaders"
5-
[cellTemplate]="{propertyName: propertyNameTpl, createdByName: createdByNameTpl, lastAssignedTo: lastAssignedToTpl, lastUpdatedBy: lastUpdatedByTpl, priority: priorityTpl, status: statusTpl}"
5+
[cellTemplate]="{propertyName: propertyNameTpl, createdByName: createdByNameTpl, lastAssignedTo: lastAssignedToTpl, lastUpdatedBy: lastUpdatedByTpl, priority: priorityTpl, status: statusTpl, actions: actionsTpl}"
66
[showPaginator]="false"
77
[pageOnFront]="false"
88
[rowStriped]="true"
@@ -55,3 +55,32 @@
5555
<span>{{row.status | translate}}</span>
5656
</mat-chip>
5757
</ng-template>
58+
59+
<ng-template #actionsTpl let-row let-i="index">
60+
<div class="task-management-actions" id="action-items-{{i}}">
61+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
62+
<mat-icon>more_vert</mat-icon>
63+
</button>
64+
65+
<mat-menu #menu="matMenu">
66+
<button
67+
mat-menu-item
68+
id="taskManagementViewBtn-{{i}}"
69+
class="taskManagementViewBtn"
70+
(click)="onOpenViewModal(row.id)"
71+
>
72+
<mat-icon>edit</mat-icon>
73+
<span>{{ 'Edit task' | translate }}</span>
74+
</button>
75+
<button
76+
mat-menu-item
77+
id="taskManagementDeleteTaskBtn-{{i}}"
78+
class="taskManagementDeleteTaskBtn"
79+
(click)="onOpenDeleteModal(row)"
80+
>
81+
<mat-icon color="warn">delete</mat-icon>
82+
<span>{{ 'Delete task' | translate }}</span>
83+
</button>
84+
</mat-menu>
85+
</div>
86+
</ng-template>

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -78,27 +78,9 @@ export class TaskManagementTableComponent implements OnInit {
7878
{
7979
header: this.translateService.stream('Actions'),
8080
field: 'actions',
81-
type: 'button',
8281
width: '100px',
8382
pinned: 'right',
8483
right: '0px',
85-
buttons: [
86-
{
87-
type: 'icon',
88-
icon: 'edit',
89-
click: (rowData: WorkOrderCaseModel) => this.onOpenViewModal(rowData.id),
90-
tooltip: this.translateService.stream('Edit task'),
91-
class: 'taskManagementViewBtn',
92-
},
93-
{
94-
type: 'icon',
95-
icon: 'delete',
96-
color: 'warn',
97-
click: (rowData: WorkOrderCaseModel) => this.onOpenDeleteModal(rowData),
98-
tooltip: this.translateService.stream('Delete task'),
99-
class: 'taskManagementDeleteTaskBtn',
100-
},
101-
]
10284
},
10385
];
10486

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<mtx-grid
22
[data]="tasks"
33
[columns]="tableHeaders"
4-
[cellTemplate]="{tags: tagsTpl}"
4+
[cellTemplate]="{tags: tagsTpl, actions: actionsTpl}"
55
[showPaginator]="false"
66
[pageOnFront]="false"
77
[rowStriped]="true"
@@ -23,6 +23,35 @@
2323
</div>
2424
</ng-template>
2525

26+
<ng-template #actionsTpl let-row let-i="index">
27+
<div class="task-tracker-actions" id="action-items-{{i}}">
28+
<button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
29+
<mat-icon>more_vert</mat-icon>
30+
</button>
31+
32+
<mat-menu #menu="matMenu">
33+
<button
34+
mat-menu-item
35+
*ngIf="(row.createdInWizard && !row.taskIsExpired) || (row.taskIsExpired && row.createdInWizard && !row.movedToExpiredFolder)"
36+
id="editTaskBtn-{{i}}"
37+
(click)="redirectToCompliance(row)"
38+
>
39+
<mat-icon>edit</mat-icon>
40+
<span>{{ 'Edit' | translate }}</span>
41+
</button>
42+
<button
43+
mat-menu-item
44+
*ngIf="row.createdInWizard && !row.movedToExpiredFolder"
45+
id="deleteTaskBtn-{{i}}"
46+
(click)="onShowDeleteComplianceModal(row)"
47+
>
48+
<mat-icon>delete</mat-icon>
49+
<span>{{ 'Delete Case' | translate }}</span>
50+
</button>
51+
</mat-menu>
52+
</div>
53+
</ng-template>
54+
2655

2756
<!--<div class="mtx-grid">-->
2857
<!-- <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‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -70,26 +70,6 @@ export class TaskTrackerTableComponent implements OnInit, OnChanges {
7070
// actions column with custom buttons
7171
{header: this.translateService.stream('Actions'), field: 'actions', sortable: false, width: '100px',
7272
pinned: 'right',
73-
type: 'button',
74-
buttons: [ // action buttons for each row
75-
{
76-
// eslint-disable-next-line max-len
77-
iif: (record: TaskModel) => (record.createdInWizard && !record.taskIsExpired) || (record.taskIsExpired && record.createdInWizard && !record.movedToExpiredFolder),
78-
type: 'icon',
79-
icon: 'edit',
80-
tooltip: this.translateService.stream('Edit'),
81-
click: (record: TaskModel) => this.redirectToCompliance(record),
82-
},
83-
{
84-
// eslint-disable-next-line max-len
85-
iif: (record: TaskModel) => record.createdInWizard && !record.movedToExpiredFolder,
86-
type: 'icon',
87-
tooltip: this.translateService.stream('Delete Case'),
88-
icon: 'delete',
89-
//color: (record: TaskModel) => this.deleteIconColor(record), // TODO: Uncomment when the logic is implemented
90-
click: (record: TaskModel) => this.onShowDeleteComplianceModal(record),
91-
}
92-
],
9373
},
9474
];
9575
complianceDeleteComponentAfterClosedSub$: Subscription;

0 commit comments

Comments
 (0)