feat(app): add delete watchlist item functionality

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

@@ -41,6 +41,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
 export class HomeWatchlistComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public hasPermissionToCreateWatchlistItem: boolean;
+  public hasPermissionToDeleteWatchlistItem: boolean;
   public user: User;
   public watchlist: Benchmark[];
 
@@ -75,6 +76,10 @@ export class HomeWatchlistComponent implements OnDestroy, OnInit {
             this.user.permissions,
             permissions.createWatchlistItem
           );
+          this.hasPermissionToDeleteWatchlistItem = hasPermission(
+            this.user.permissions,
+            permissions.deleteWatchlistItem
+          );
 
           this.changeDetectorRef.markForCheck();
         }
@@ -90,6 +95,15 @@ export class HomeWatchlistComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
+  public onWatchlistItemDeleted(item: Benchmark) {
+    this.dataService
+      .deleteWatchlistItem(item)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => this.loadWatchlistData()
+      });
+  }
+
   private loadWatchlistData() {
     this.dataService
       .fetchWatchlist()

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

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

apps/client/src/app/services/data.service.ts

@@ -327,6 +327,10 @@ export class DataService {
     return this.http.delete<any>(`/api/v1/user/${aId}`);
   }
 
+  public deleteWatchlistItem({ dataSource, symbol }: AssetProfileIdentifier) {
+    return this.http.delete<any>(`/api/v1/watchlist/${dataSource}/${symbol}`);
+  }
+
   public fetchAccesses() {
     return this.http.get<Access[]>('/api/v1/access');
   }