Refactoring

apps/client/src/app/components/home-watchlist/home-watchlist.component.ts

@@ -94,20 +94,25 @@ export class HomeWatchlistComponent implements OnDestroy, OnInit {
     this.loadWatchlistData();
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
-  public onWatchlistItemDeleted(item: AssetProfileIdentifier) {
+  public onWatchlistItemDeleted({
+    dataSource,
+    symbol
+  }: AssetProfileIdentifier) {
     this.dataService
-      .deleteWatchlistItem(item)
+      .deleteWatchlistItem({ dataSource, symbol })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe({
-        next: () => this.loadWatchlistData()
+        next: () => {
+          return this.loadWatchlistData();
+        }
       });
   }
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private loadWatchlistData() {
     this.dataService
       .fetchWatchlist()

apps/client/src/app/components/home-watchlist/home-watchlist.html

@@ -12,12 +12,10 @@
       <gf-benchmark
         [benchmarks]="watchlist"
         [deviceType]="deviceType"
-        [hasPermissionToDeleteWatchlistItem]="
-          hasPermissionToDeleteWatchlistItem
-        "
+        [hasPermissionToDeleteItem]="hasPermissionToDeleteWatchlistItem"
         [locale]="user?.settings?.locale || undefined"
         [user]="user"
-        (watchlistItemDeleted)="onWatchlistItemDeleted($event)"
+        (itemDeleted)="onWatchlistItemDeleted($event)"
       />
     </div>
   </div>

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

@@ -116,21 +116,26 @@
   <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) {
+      @if (hasPermissionToDeleteItem) {
         <button
           class="mx-1 no-min-width px-2"
           mat-button
-          [matMenuTriggerFor]="watchlistItemMenu"
+          [matMenuTriggerFor]="benchmarkMenu"
           (click)="$event.stopPropagation()"
         >
           <ion-icon name="ellipsis-horizontal" />
         </button>
       }
-      <mat-menu #watchlistItemMenu="matMenu" xPosition="before">
+      <mat-menu #benchmarkMenu="matMenu" xPosition="before">
         <button
           mat-menu-item
-          [disabled]="!hasPermissionToDeleteWatchlistItem"
-          (click)="onDeleteWatchlistItem(element)"
+          [disabled]="!hasPermissionToDeleteItem"
+          (click)="
+            onDeleteItem({
+              dataSource: element.dataSource,
+              symbol: element.symbol
+            })
+          "
         >
           <span class="align-items-center d-flex">
             <ion-icon class="mr-2" name="trash-outline" />

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

@@ -53,11 +53,11 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
 export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   @Input() benchmarks: Benchmark[];
   @Input() deviceType: string;
-  @Input() hasPermissionToDeleteWatchlistItem: boolean;
+  @Input() hasPermissionToDeleteItem: boolean;
   @Input() locale = getLocale();
   @Input() user: User;
 
-  @Output() watchlistItemDeleted = new EventEmitter<AssetProfileIdentifier>();
+  @Output() itemDeleted = new EventEmitter<AssetProfileIdentifier>();
 
   public displayedColumns = [
     'name',
@@ -113,9 +113,11 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
     }
   }
 
-  public onDeleteWatchlistItem({ dataSource, symbol }: Benchmark) {
+  public onDeleteItem({ dataSource, symbol }: AssetProfileIdentifier) {
     this.notificationService.confirm({
-      confirmFn: () => this.watchlistItemDeleted.emit({ dataSource, symbol }),
+      confirmFn: () => {
+        this.itemDeleted.emit({ dataSource, symbol });
+      },
       confirmType: ConfirmationDialogType.Warn,
       title: $localize`Do you really want to delete this item?`
     });