playlist statuses

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

@@ -1,4 +1,4 @@
-<article class="panel" [ngClass]="playlist.error ? 'is-danger' : 'is-primary'">
+<article class="panel" [ngClass]="statusClass$ | async">
   <p class="panel-heading is-flex is-justify-content-space-between">
         <span>
           <i class="is-clickable fa-solid"

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

@@ -1,8 +1,16 @@
 import {Component, Input} from '@angular/core';
 import {AsyncPipe, CommonModule, NgForOf, NgIf} from "@angular/common";
 import {TrackListComponent} from "../track-list/track-list.component";
-import {Playlist, PlaylistService, PlaylistUi} from "../../services/playlist.service";
-import {Observable} from "rxjs";
+import {Playlist, PlaylistService, PLaylistStatusEnum, PlaylistUi} from "../../services/playlist.service";
+import {Observable, map} from "rxjs";
+
+const STATUS2CLASS = {
+  [PLaylistStatusEnum.Completed]: 'is-success',
+  [PLaylistStatusEnum.InProgress]: 'is-info',
+  [PLaylistStatusEnum.Warning]: 'is-warning',
+  [PLaylistStatusEnum.Error]: 'is-danger',
+  [PLaylistStatusEnum.Subscribed]: 'is-primary',
+}
 
 @Component({
   selector: 'app-playlist-box',
@@ -23,6 +31,9 @@ export class PlaylistBoxComponent {
     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(
+      map(status => STATUS2CLASS[status])
+    );
   }
   get playlist(): Playlist & PlaylistUi {
     return this._playlist;
@@ -30,6 +41,7 @@ export class PlaylistBoxComponent {
   _playlist!: Playlist & PlaylistUi;
   trackCount$!: Observable<number>;
   trackCompletedCount$!: Observable<number>;
+  statusClass$!: Observable<string>;
 
   constructor(private readonly playlistService: PlaylistService) { }
 

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

@@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
 import {createStore} from "@ngneat/elf";
 import {HttpClient} from "@angular/common/http";
 import {
+  getEntityByPredicate,
   selectAllEntities, selectEntities,
+  selectEntityByPredicate,
   setEntities,
   UIEntitiesRef,
   unionEntities, updateEntities, upsertEntities,
@@ -10,7 +12,7 @@ import {
   withUIEntities
 } from "@ngneat/elf-entities";
 import {joinRequestResult, trackRequestResult} from "@ngneat/elf-requests";
-import {map, Observable, tap} from "rxjs";
+import {combineLatest, map, Observable, tap} from "rxjs";
 import {Track, TrackService} from "./track.service";
 import {Socket} from "ngx-socket-io";
 
@@ -31,6 +33,14 @@ export interface PlaylistUi {
   collapsed: boolean;
 }
 
+export enum PLaylistStatusEnum {
+  InProgress,
+  Completed,
+  Warning,
+  Error,
+  Subscribed,
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -62,6 +72,10 @@ export class PlaylistService {
     );
   }
 
+  getById(playlistId: number): Observable<Playlist | undefined> {
+    return this.store.pipe(selectEntityByPredicate(({id}) => id === playlistId));
+  }
+
   getTrackCount(id: number): Observable<number> {
     return this.trackService.getAllByPlaylist(id).pipe(map(data => data.length));
   }
@@ -70,6 +84,28 @@ export class PlaylistService {
     return this.trackService.getCompletedByPlaylist(id).pipe(map(data => data.length));
   }
 
+  getErrorTrackCount(id: number): Observable<number> {
+    return this.trackService.getErrorByPlaylist(id).pipe(map(data => data.length));
+  }
+
+  getStatus$(id: number): Observable<PLaylistStatusEnum> {
+    return combineLatest([
+      this.getById(id),
+      this.getTrackCount(id),
+      this.getCompletedTrackCount(id),
+      this.getErrorTrackCount(id),
+    ]).pipe(map(([playlist, trackCount, completedCount, errorCount]) => {
+      if (playlist?.error || errorCount === trackCount) {
+        return PLaylistStatusEnum.Error;
+      } else if (trackCount === completedCount) {
+        return PLaylistStatusEnum.Completed;
+      } else if (errorCount > 1) {
+        return PLaylistStatusEnum.Warning;
+      }
+      return PLaylistStatusEnum.InProgress;
+    }));
+  }
+
   fetch(): void {
     this.http.get<Playlist[]>(ENDPOINT).pipe(
       tap((data: Playlist[]) => this.store.update(

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

@@ -39,12 +39,19 @@ export class TrackService {
     withEntities<Track>(),
   );
 
-  getAllByPlaylist(id: number): Observable<Track[]> {
-    return this.store.pipe(selectManyByPredicate(({playlistId}) => playlistId === id))
+  getAllByPlaylist(id: number, status?: TrackStatusEnum): Observable<Track[]> {
+    return this.store.pipe(
+      selectManyByPredicate(({playlistId}) => playlistId === id),
+      map(data => data.filter(item => status === undefined || item.status === status)),
+    );
   }
 
   getCompletedByPlaylist(id: number): Observable<Track[]> {
-    return this.getAllByPlaylist(id).pipe(map(data => data.filter(item => item.status === TrackStatusEnum.Completed)));
+    return this.getAllByPlaylist(id, TrackStatusEnum.Completed);
+  }
+
+  getErrorByPlaylist(id: number): Observable<Track[]> {
+    return this.getAllByPlaylist(id, TrackStatusEnum.Error);
   }
 
   constructor(