delete functionality

src/frontend/src/app/components/playlist-box/playlist-box.component.html

@@ -15,8 +15,9 @@
             <i class="fa-brands fa-spotify"></i>
           </a>
         </span>
-    <span *ngIf="!playlist.error">
-      <span class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>&nbsp;
+    <span>
+      <i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove track from list" (click)="delete(playlist.id)"></i>&nbsp;
+      <span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>&nbsp;
     </span>
   </p>
   <ng-container *ngIf="playlist.collapsed">

src/frontend/src/app/components/playlist-box/playlist-box.component.scss

@@ -1,6 +1,14 @@
+.hover-icon {
+  display: none;
+}
+
 .panel-heading {
   padding: 5px 10px;
   border-radius: 10px;
+
+  &:hover .hover-icon {
+    display: inline;
+  }
 }
 
 .panel {

src/frontend/src/app/components/playlist-box/playlist-box.component.ts

@@ -29,9 +29,9 @@ export class PlaylistBoxComponent {
 
   @Input() set playlist(val: Playlist & PlaylistUi) {
     this._playlist = val;
-    this.trackCount$ = this.playlistService.getTrackCount(val.id);
-    this.trackCompletedCount$ = this.playlistService.getCompletedTrackCount(val.id);
-    this.statusClass$ = this.playlistService.getStatus$(val.id).pipe(
+    this.trackCount$ = this.service.getTrackCount(val.id);
+    this.trackCompletedCount$ = this.service.getCompletedTrackCount(val.id);
+    this.statusClass$ = this.service.getStatus$(val.id).pipe(
       map(status => STATUS2CLASS[status])
     );
   }
@@ -43,10 +43,14 @@ export class PlaylistBoxComponent {
   trackCompletedCount$!: Observable<number>;
   statusClass$!: Observable<string>;
 
-  constructor(private readonly playlistService: PlaylistService) { }
+  constructor(private readonly service: PlaylistService) { }
 
 
   toggleCollapse(playlistId: number): void {
-    this.playlistService.toggleCollapsed(playlistId);
+    this.service.toggleCollapsed(playlistId);
+  }
+
+  delete(id: number): void {
+    this.service.delete(id);
   }
 }

src/frontend/src/app/components/track-list/track-list.component.html

@@ -20,6 +20,7 @@
     </a>
   </div>
   <div>
+    <i class="fa-solid fa-xmark hover-icon" title="Remove track from list" (click)="delete(track.id)"></i>&nbsp;
     <ng-container [ngSwitch]="track.status">
       <span *ngSwitchCase="trackStatuses.New" class="tag is-info">New</span>
       <span *ngSwitchCase="trackStatuses.Searching" class="tag is-warning">Searching</span>

src/frontend/src/app/components/track-list/track-list.component.scss

@@ -1,3 +1,11 @@
+.hover-icon {
+  display: none;
+}
+
 .panel-block {
   padding: 5px 10px;
+
+  &:hover .hover-icon {
+    display: inline;
+  }
 }

src/frontend/src/app/components/track-list/track-list.component.ts

@@ -13,7 +13,6 @@ import {Observable} from "rxjs";
 export class TrackListComponent {
 
   @Input() set playlistId(value: number) {
-    console.log(value);
     this.tracks$ = this.service.getAllByPlaylist(value);
   }
   tracks$!: Observable<Track[]>;
@@ -21,6 +20,9 @@ export class TrackListComponent {
 
   constructor(
     private readonly service: TrackService,
-  ) {
+  ) { }
+
+  delete(id: number): void {
+    this.service.delete(id);
   }
 }

src/frontend/src/app/services/playlist.service.ts

@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core';
 import {createStore} from "@ngneat/elf";
 import {HttpClient} from "@angular/common/http";
 import {
+  deleteEntities,
   getEntityByPredicate,
-  selectAllEntities, selectEntities,
+  selectAllEntities, selectEntities, selectEntity,
   selectEntityByPredicate,
   setEntities,
   UIEntitiesRef,
@@ -64,6 +65,7 @@ export class PlaylistService {
               private readonly trackService: TrackService,
   ) {
     this.socket.on('playlistUpdate', (playlist: Playlist) => this.store.update(upsertEntities(playlist)));
+    this.socket.on('playlistDelete', ({id}: {id: number}) => this.store.update(deleteEntities(Number(id))));
     this.socket.on('playlistNew', (playlist: Playlist) =>
       this.store.update(
         upsertEntities(playlist),
@@ -72,8 +74,8 @@ export class PlaylistService {
     );
   }
 
-  getById(playlistId: number): Observable<Playlist | undefined> {
-    return this.store.pipe(selectEntityByPredicate(({id}) => id === playlistId));
+  getById(id: number): Observable<Playlist | undefined> {
+    return this.store.pipe(selectEntity(id));
   }
 
   getTrackCount(id: number): Observable<number> {
@@ -126,4 +128,8 @@ export class PlaylistService {
   toggleCollapsed(id: number): void {
     this.store.update(updateEntities(id, old => ({...old, collapsed: !old.collapsed}), { ref: UIEntitiesRef }))
   }
+
+  delete(id: number): void {
+    this.http.delete(`${ENDPOINT}/${id}`).subscribe();
+  }
 }

src/frontend/src/app/services/track.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {createStore} from "@ngneat/elf";
-import {selectManyByPredicate, upsertEntities, withEntities} from "@ngneat/elf-entities";
+import {deleteEntities, selectManyByPredicate, upsertEntities, withEntities} from "@ngneat/elf-entities";
 import {Socket} from "ngx-socket-io";
 import {map, Observable, tap} from "rxjs";
 import {trackRequestResult} from "@ngneat/elf-requests";
@@ -41,7 +41,7 @@ export class TrackService {
 
   getAllByPlaylist(id: number, status?: TrackStatusEnum): Observable<Track[]> {
     return this.store.pipe(
-      selectManyByPredicate(({playlistId}) => playlistId === id),
+      selectManyByPredicate((track) => track?.playlistId === id),
       map(data => data.filter(item => status === undefined || item.status === status)),
     );
   }
@@ -59,6 +59,7 @@ export class TrackService {
     private readonly socket: Socket,
   ) {
     this.socket.on('trackUpdate', (track: Track) => this.store.update(upsertEntities(track)));
+    this.socket.on('trackDelete', ({id}: {id: number}) => this.store.update(deleteEntities(id)));
     this.socket.on('trackNew', ({track, playlistId}: {track: Track, playlistId: number}) =>
       this.store.update(upsertEntities([{...track, playlistId}]))
     );
@@ -70,4 +71,8 @@ export class TrackService {
       trackRequestResult([STORE_NAME], { skipCache: true }),
     ).subscribe();
   }
+
+  delete(id: number): void {
+    this.http.delete(`${ENDPOINT}/${id}`).subscribe();
+  }
 }