feat: actionsMenu column component (#384)

Create actions menu column component to reduce code duplication

src/app/common/table/actions-menu-column/actions-menu-column.component.html

@@ -0,0 +1,20 @@
+<ng-container cdkColumnDef="actionsMenu" [sticky]="sticky" [stickyEnd]="stickyEnd">
+	<th cdk-header-cell *cdkHeaderCellDef></th>
+	<td cdk-cell *cdkCellDef="let item; let index = index">
+		<button
+			class="btn dropdown-toggle dropdown-toggle-hide-caret shadow-none py-0 ps-3"
+			type="button"
+			[attr.aria-controls]="getMenuId(index)"
+			[cdkMenuTriggerData]="{
+				item,
+				index,
+				triggerId: getTriggerId(index),
+				menuId: getMenuId(index)
+			}"
+			[cdkMenuTriggerFor]="template()"
+			[id]="getTriggerId(index)"
+		>
+			<span class="fa-solid fa-lg fa-ellipsis-v"></span>
+		</button>
+	</td>
+</ng-container>

src/app/common/table/actions-menu-column/actions-menu-column.component.scss

@@ -0,0 +1,12 @@
+.cdk-column-actionsMenu {
+	width: 50px;
+
+	button.dropdown-toggle {
+		display: block;
+		border: 0;
+
+		&:hover {
+			color: var(--bs-link-hover-color);
+		}
+	}
+}

src/app/common/table/actions-menu-column/actions-menu-column.component.ts

@@ -0,0 +1,41 @@
+import { CdkMenu, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkTableModule } from '@angular/cdk/table';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	Directive,
+	HostAttributeToken,
+	TemplateRef,
+	contentChild,
+	inject
+} from '@angular/core';
+
+import { AsyAbstractColumnComponent } from '../columns/asy-abstract-column.component';
+
+@Directive({ selector: '[actions-menu-tmp]', standalone: true })
+export class ActionsMenuTemplateDirective {
+	constructor(public template: TemplateRef<any>) {}
+}
+
+@Component({
+	selector: 'asy-actions-menu-column',
+	standalone: true,
+	imports: [CdkTableModule, CdkMenuTrigger, NgTemplateOutlet, CdkMenu],
+	templateUrl: './actions-menu-column.component.html',
+	styleUrl: './actions-menu-column.component.scss',
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionsMenuColumnComponent<T> extends AsyAbstractColumnComponent<T> {
+	readonly template = contentChild.required(ActionsMenuTemplateDirective, { read: TemplateRef });
+
+	#scope = inject(new HostAttributeToken('scope'));
+
+	getTriggerId(index: number) {
+		return `${this.#scope}-action-menu-btn-${index}`;
+	}
+
+	getMenuId(index: number) {
+		return `${this.#scope}-action-menu-${index}`;
+	}
+}

src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html

@@ -29,51 +29,43 @@ <h1 skipTo>Cache Entries</h1>
 				</td>
 			</ng-container>
 			<asy-ago-date-column name="ts" header="Created"></asy-ago-date-column>
-			<ng-container cdkColumnDef="actionsMenu" stickyEnd>
-				<th cdk-header-cell *cdkHeaderCellDef></th>
-				<td cdk-cell *cdkCellDef="let entry; let i = index">
-					<button
-						class="btn dropdown-toggle dropdown-toggle-hide-caret shadow-none py-0 ps-3"
-						id="cache-entry-{{ entry._id }}-action-menu-btn"
-						type="button"
-						attr.aria-controls="cache-entry-{{ entry._id }}-action-menu"
-						[cdkMenuTriggerFor]="actionsMenu"
+			<asy-actions-menu-column scope="cache-entry" stickyEnd>
+				<ng-template
+					actions-menu-tmp
+					let-item="item"
+					let-menuId="menuId"
+					let-triggerId="triggerId"
+				>
+					<div
+						class="dropdown-menu"
+						[attr.aria-labelledby]="triggerId"
+						cdkMenu
+						[id]="menuId"
 					>
-						<span class="fa-solid fa-lg fa-ellipsis-v"></span>
-					</button>
-
-					<ng-template #actionsMenu>
-						<div
-							class="dropdown-menu"
-							id="cache-entry-{{ entry._id }}-action-menu"
-							attr.aria-labelledby="cache-entry-{{ entry._id }}-action-menu-btn"
-							cdkMenu
+						<button
+							class="dropdown-item"
+							cdkMenuItem
+							(cdkMenuItemTriggered)="viewCacheEntry(item)"
 						>
-							<button
-								class="dropdown-item"
-								cdkMenuItem
-								(cdkMenuItemTriggered)="viewCacheEntry(entry)"
-							>
-								View
-							</button>
-							<button
-								class="dropdown-item"
-								cdkMenuItem
-								(cdkMenuItemTriggered)="refreshCacheEntry(entry)"
-							>
-								Refresh
-							</button>
-							<button
-								class="dropdown-item"
-								cdkMenuItem
-								(cdkMenuItemTriggered)="confirmDeleteEntry(entry)"
-							>
-								Delete
-							</button>
-						</div>
-					</ng-template>
-				</td>
-			</ng-container>
+							View
+						</button>
+						<button
+							class="dropdown-item"
+							cdkMenuItem
+							(cdkMenuItemTriggered)="refreshCacheEntry(item)"
+						>
+							Refresh
+						</button>
+						<button
+							class="dropdown-item"
+							cdkMenuItem
+							(cdkMenuItemTriggered)="confirmDeleteEntry(item)"
+						>
+							Delete
+						</button>
+					</div>
+				</ng-template>
+			</asy-actions-menu-column>
 			<tr cdk-header-row *cdkHeaderRowDef="displayedColumns; sticky: true"></tr>
 			<tr cdk-row *cdkRowDef="let team; columns: displayedColumns"></tr>
 		</table>

src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts

@@ -1,4 +1,4 @@
-import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import { CdkTableModule } from '@angular/cdk/table';
 import { JsonPipe } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -28,6 +28,10 @@ import {
 	PaginatorComponent,
 	TextColumnComponent
 } from '../../../../common/table';
+import {
+	ActionsMenuColumnComponent,
+	ActionsMenuTemplateDirective
+} from '../../../../common/table/actions-menu-column/actions-menu-column.component';
 import { CacheEntriesService } from '../cache-entries.service';
 import {
 	CacheEntryModalComponent,
@@ -53,10 +57,11 @@ import { CacheEntry } from '../cache-entry.model';
 		AgoDatePipe,
 		UtcDatePipe,
 		CdkMenu,
-		CdkMenuTrigger,
 		CdkMenuItem,
 		TextColumnComponent,
-		AgoDateColumnComponent
+		AgoDateColumnComponent,
+		ActionsMenuColumnComponent,
+		ActionsMenuTemplateDirective
 	]
 })
 export class ListCacheEntriesComponent implements OnInit {

src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html

@@ -59,60 +59,46 @@ <h1 skipTo>EUAs</h1>
 				<asy-date-column name="created"></asy-date-column>
 				<asy-date-column name="published"></asy-date-column>
 				<asy-date-column name="updated"></asy-date-column>
-				<ng-container cdkColumnDef="actionsMenu" stickyEnd>
-					<th cdk-header-cell *cdkHeaderCellDef></th>
-					<td
-						cdk-cell
-						container="body"
-						dropdown
-						placement="bottom right"
-						*cdkCellDef="let eua"
+				<asy-actions-menu-column scope="eua" stickyEnd>
+					<ng-template
+						actions-menu-tmp
+						let-item="item"
+						let-menuId="menuId"
+						let-triggerId="triggerId"
 					>
-						<button
-							class="btn dropdown-toggle dropdown-toggle-hide-caret shadow-none py-0 ps-3"
-							id="eua-{{ eua._id }}-action-menu-btn"
-							type="button"
-							attr.aria-controls="eua-{{ eua._id }}-action-menu"
-							[cdkMenuTriggerFor]="actionsMenu"
+						<div
+							class="dropdown-menu"
+							[attr.aria-labelledby]="triggerId"
+							cdkMenu
+							[id]="menuId"
 						>
-							<span class="fa-solid fa-lg fa-ellipsis-v"></span>
-						</button>
-						<ng-template #actionsMenu>
-							<div
-								class="dropdown-menu"
-								id="eua-{{ eua._id }}-action-menu"
-								attr.aria-labelledby="eua-{{ eua._id }}-action-menu-btn"
-								cdkMenu
+							<button
+								class="dropdown-item"
+								cdkMenuItem
+								[routerLink]="['/admin/eua', item._id]"
 							>
-								<button
-									class="dropdown-item"
-									cdkMenuItem
-									[routerLink]="['/admin/eua', eua._id]"
-								>
-									Edit
-								</button>
-								<button
-									class="dropdown-item"
-									cdkMenuItem
-									(click)="previewEndUserAgreement(eua)"
-								>
-									Preview
-								</button>
-								<button class="dropdown-item" cdkMenuItem (click)="publishEua(eua)">
-									Publish
-								</button>
-								<button
-									class="dropdown-item"
-									cdkMenuItem
-									(click)="confirmDeleteEua(eua)"
-								>
-									Delete
-								</button>
-							</div>
-						</ng-template>
-					</td>
-				</ng-container>
-
+								Edit
+							</button>
+							<button
+								class="dropdown-item"
+								cdkMenuItem
+								(click)="previewEndUserAgreement(item)"
+							>
+								Preview
+							</button>
+							<button class="dropdown-item" cdkMenuItem (click)="publishEua(item)">
+								Publish
+							</button>
+							<button
+								class="dropdown-item"
+								cdkMenuItem
+								(click)="confirmDeleteEua(item)"
+							>
+								Delete
+							</button>
+						</div>
+					</ng-template>
+				</asy-actions-menu-column>
 				<tr cdk-header-row *cdkHeaderRowDef="displayedColumns(); sticky: true"></tr>
 				<tr cdk-row *cdkRowDef="let team; columns: displayedColumns()"></tr>
 			</table>

src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts

@@ -1,4 +1,4 @@
-import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import { CdkTableModule } from '@angular/cdk/table';
 import { Component, DestroyRef, OnInit, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -27,6 +27,10 @@ import {
 	SidebarComponent,
 	TextColumnComponent
 } from '../../../../common/table';
+import {
+	ActionsMenuColumnComponent,
+	ActionsMenuTemplateDirective
+} from '../../../../common/table/actions-menu-column/actions-menu-column.component';
 import { EndUserAgreement } from '../eua.model';
 import { EuaService } from '../eua.service';
 
@@ -48,11 +52,12 @@ import { EuaService } from '../eua.service';
 		ColumnChooserComponent,
 		PaginatorComponent,
 		TooltipModule,
-		CdkMenuTrigger,
 		CdkMenu,
 		CdkMenuItem,
 		TextColumnComponent,
-		DateColumnComponent
+		DateColumnComponent,
+		ActionsMenuColumnComponent,
+		ActionsMenuTemplateDirective
 	]
 })
 export class AdminListEuasComponent implements OnInit {