feat(lib): add actions column to benchmark

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -113,6 +113,34 @@
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="actions" stickyEnd>
+    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      @if (hasPermissionToDeleteWatchlistItem) {
+        <button
+          class="mx-1 no-min-width px-2"
+          mat-button
+          [matMenuTriggerFor]="watchlistItemMenu"
+          (click)="$event.stopPropagation()"
+        >
+          <ion-icon name="ellipsis-horizontal" />
+        </button>
+      }
+      <mat-menu #watchlistItemMenu="matMenu" xPosition="before">
+        <button
+          mat-menu-item
+          [disabled]="!hasPermissionToDeleteWatchlistItem"
+          (click)="onDeleteWatchlistItem(element)"
+        >
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="trash-outline" />
+            <span i18n>Delete</span>
+          </span>
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr
     *matRowDef="let row; columns: displayedColumns"

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -1,3 +1,5 @@
+import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type';
+import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { getLocale, resolveMarketCondition } from '@ghostfolio/common/helper';
 import {
   AssetProfileIdentifier,
@@ -13,11 +15,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnChanges,
-  OnDestroy
+  OnDestroy,
+  Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { isNumber } from 'lodash';
@@ -33,6 +39,8 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
     CommonModule,
     GfTrendIndicatorComponent,
     GfValueComponent,
+    MatButtonModule,
+    MatMenuModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule
@@ -45,10 +53,19 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
 export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   @Input() benchmarks: Benchmark[];
   @Input() deviceType: string;
+  @Input() hasPermissionToDeleteWatchlistItem: boolean;
   @Input() locale = getLocale();
   @Input() user: User;
 
-  public displayedColumns = ['name', 'date', 'change', 'marketCondition'];
+  @Output() watchlistItemDeleted = new EventEmitter<AssetProfileIdentifier>();
+
+  public displayedColumns = [
+    'name',
+    'date',
+    'change',
+    'marketCondition',
+    'actions'
+  ];
   public isLoading = true;
   public isNumber = isNumber;
   public resolveMarketCondition = resolveMarketCondition;
@@ -58,6 +75,7 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
 
   public constructor(
     private dialog: MatDialog,
+    private notificationService: NotificationService,
     private route: ActivatedRoute,
     private router: Router
   ) {
@@ -89,11 +107,20 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
         'trend200d',
         'date',
         'change',
-        'marketCondition'
+        'marketCondition',
+        'actions'
       ];
     }
   }
 
+  public onDeleteWatchlistItem({ dataSource, symbol }: AssetProfileIdentifier) {
+    this.notificationService.confirm({
+      confirmFn: () => this.watchlistItemDeleted.emit({ dataSource, symbol }),
+      confirmType: ConfirmationDialogType.Warn,
+      title: $localize`Do you really want to delete this item?`
+    });
+  }
+
   public onOpenBenchmarkDialog({ dataSource, symbol }: AssetProfileIdentifier) {
     this.router.navigate([], {
       queryParams: { dataSource, symbol, benchmarkDetailDialog: true }