Allow deleting Scrobble events

API/Controllers/ScrobblingController.cs

@@ -254,7 +254,7 @@ public class ScrobblingController : BaseApiController
     }
 
     /// <summary>
-    /// Adds a hold against the Series for user's scrobbling
+    /// Remove a hold against the Series for user's scrobbling
     /// </summary>
     /// <param name="seriesId"></param>
     /// <returns></returns>
@@ -281,4 +281,18 @@ public class ScrobblingController : BaseApiController
         var user = await _unitOfWork.UserRepository.GetUserByIdAsync(User.GetUserId());
         return Ok(user is {HasRunScrobbleEventGeneration: true});
     }
+
+    /// <summary>
+    /// Delete the given scrobble events if they belong to that user
+    /// </summary>
+    /// <param name="eventIds"></param>
+    /// <returns></returns>
+    [HttpPost("bulk-remove-events")]
+    public async Task<ActionResult> BulkRemoveScrobbleEvents(IList<long> eventIds)
+    {
+        var events = await _unitOfWork.ScrobbleRepository.GetUserEvents(User.GetUserId(), eventIds);
+        _unitOfWork.ScrobbleRepository.Remove(events);
+        await _unitOfWork.CommitAsync();
+        return Ok();
+    }
 }

API/DTOs/Scrobbling/ScrobbleEventDto.cs

@@ -5,6 +5,7 @@ namespace API.DTOs.Scrobbling;
 
 public sealed record ScrobbleEventDto
 {
+    public long Id { get; init; }
     public string SeriesName { get; set; }
     public int SeriesId { get; set; }
     public int LibraryId { get; set; }

API/Data/Repositories/ScrobbleEventRepository.cs

@@ -39,6 +39,13 @@ public interface IScrobbleRepository
     /// <returns></returns>
     Task<ScrobbleEvent?> GetEvent(int userId, int seriesId, ScrobbleEventType eventType, bool isNotProcessed = false);
     Task<IEnumerable<ScrobbleEvent>> GetUserEventsForSeries(int userId, int seriesId);
+    /// <summary>
+    /// Return the events with given ids, when belonging to the passed user
+    /// </summary>
+    /// <param name="userId"></param>
+    /// <param name="scrobbleEventIds"></param>
+    /// <returns></returns>
+    Task<IList<ScrobbleEvent>> GetUserEvents(int userId, IList<long> scrobbleEventIds);
     Task<PagedList<ScrobbleEventDto>> GetUserEvents(int userId, ScrobbleEventFilter filter, UserParams pagination);
     Task<IList<ScrobbleEvent>> GetAllEventsForSeries(int seriesId);
     Task<IList<ScrobbleEvent>> GetAllEventsWithSeriesIds(IEnumerable<int> seriesIds);
@@ -166,13 +173,20 @@ public class ScrobbleRepository : IScrobbleRepository
     public async Task<IEnumerable<ScrobbleEvent>> GetUserEventsForSeries(int userId, int seriesId)
     {
         return await _context.ScrobbleEvent
-            .Where(e => e.AppUserId == userId && !e.IsProcessed)
+            .Where(e => e.AppUserId == userId && !e.IsProcessed && e.SeriesId == seriesId)
             .Include(e => e.Series)
             .OrderBy(e => e.LastModifiedUtc)
             .AsSplitQuery()
             .ToListAsync();
     }
 
+    public async Task<IList<ScrobbleEvent>> GetUserEvents(int userId, IList<long> scrobbleEventIds)
+    {
+        return await _context.ScrobbleEvent
+            .Where(e => e.AppUserId == userId && scrobbleEventIds.Contains(e.Id))
+            .ToListAsync();
+    }
+
     public async Task<PagedList<ScrobbleEventDto>> GetUserEvents(int userId, ScrobbleEventFilter filter, UserParams pagination)
     {
         var query =  _context.ScrobbleEvent

UI/Web/src/app/_models/scrobbling/scrobble-event.ts

@@ -7,6 +7,7 @@ export enum ScrobbleEventType {
 }
 
 export interface ScrobbleEvent {
+  id: number;
   seriesName: string;
   seriesId: number;
   libraryId: number;

UI/Web/src/app/_services/scrobbling.service.ts

@@ -104,6 +104,10 @@ export class ScrobblingService {
 
   triggerScrobbleEventGeneration() {
     return this.httpClient.post(this.baseUrl + 'scrobbling/generate-scrobble-events', TextResonse);
-
   }
+
+  bulkRemoveEvents(eventIds: number[]) {
+    return this.httpClient.post(this.baseUrl + "scrobbling/bulk-remove-events", eventIds)
+  }
+
 }

UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html

@@ -20,7 +20,10 @@
     <form [formGroup]="formGroup">
       <div class="form-group pe-1">
         <label for="filter">{{t('filter-label')}}</label>
-        <input id="filter" type="text" class="form-control" formControlName="filter" autocomplete="off"/>
+        <div class="input-group">
+          <input id="filter" type="text" class="form-control" formControlName="filter" autocomplete="off" [placeholder]="t('filter-label')"/>
+          <button class="btn btn-primary" type="button" [disabled]="!selections.hasAnySelected()" (click)="bulkDelete()">{{t('delete-selected')}}</button>
+        </div>
       </div>
     </form>
   </div>
@@ -40,6 +43,20 @@
     [sorts]="[{prop: 'createdUtc', dir: 'desc'}]"
   >
 
+    <ngx-datatable-column prop="select" [sortable]="false" [draggable]="false" [resizeable]="false" [width]="50">
+      <ng-template let-column="column" ngx-datatable-header-template>
+        <div class="form-check">
+          <input id="select-all" type="checkbox" class="form-check-input"
+                 [ngModel]="selectAll" (change)="toggleAll()" [indeterminate]="selections?.hasSomeSelected()">
+          <label for="select-all" class="form-check-label d-md-block d-none">{{t('select-header')}}</label>
+        </div>
+      </ng-template>
+      <ng-template let-event="row" let-idx="index" ngx-datatable-cell-template>
+        <input id="select-event-{{idx}}" type="checkbox" class="form-check-input"
+               [ngModel]="selections.isSelected(event)" (change)="handleSelection(event, idx)">
+      </ng-template>
+    </ngx-datatable-column>
+
     <ngx-datatable-column prop="createdUtc" [sortable]="true" [draggable]="false" [resizeable]="false">
       <ng-template let-column="column" ngx-datatable-header-template>
         {{t('created-header')}}
@@ -101,7 +118,7 @@
       </ng-template>
     </ngx-datatable-column>
 
-    <ngx-datatable-column prop="isPorcessed" [sortable]="true" [draggable]="false" [resizeable]="false">
+    <ngx-datatable-column prop="isProcessed" [sortable]="true" [draggable]="false" [resizeable]="false">
       <ng-template let-column="column" ngx-datatable-header-template>
         {{t('is-processed-header')}}
       </ng-template>

UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts

@@ -1,4 +1,12 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  HostListener,
+  inject,
+  OnInit
+} from '@angular/core';
 
 import {ScrobbleProvider, ScrobblingService} from "../../_services/scrobbling.service";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
@@ -9,7 +17,7 @@ import {ScrobbleEventSortField} from "../../_models/scrobbling/scrobble-event-fi
 import {debounceTime, take} from "rxjs/operators";
 import {PaginatedResult} from "../../_models/pagination";
 import {SortEvent} from "../table/_directives/sortable-header.directive";
-import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {translate, TranslocoModule} from "@jsverse/transloco";
 import {DefaultValuePipe} from "../../_pipes/default-value.pipe";
 import {TranslocoLocaleModule} from "@jsverse/transloco-locale";
@@ -19,6 +27,7 @@ import {ColumnMode, NgxDatatableModule} from "@siemens/ngx-datatable";
 import {AsyncPipe} from "@angular/common";
 import {AccountService} from "../../_services/account.service";
 import {ToastrService} from "ngx-toastr";
+import {SelectionModel} from "../../typeahead/_models/selection-model";
 
 export interface DataTablePage {
   pageNumber: number,
@@ -30,7 +39,7 @@ export interface DataTablePage {
 @Component({
     selector: 'app-user-scrobble-history',
   imports: [ScrobbleEventTypePipe, ReactiveFormsModule, TranslocoModule,
-    DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip, NgxDatatableModule, AsyncPipe],
+    DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip, NgxDatatableModule, AsyncPipe, FormsModule],
     templateUrl: './user-scrobble-history.component.html',
     styleUrls: ['./user-scrobble-history.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -48,8 +57,6 @@ export class UserScrobbleHistoryComponent implements OnInit {
   private readonly toastr = inject(ToastrService);
   protected readonly accountService = inject(AccountService);
 
-
-
   tokenExpired = false;
   formGroup: FormGroup = new FormGroup({
     'filter': new FormControl('', [])
@@ -68,6 +75,21 @@ export class UserScrobbleHistoryComponent implements OnInit {
   };
   hasRunScrobbleGen: boolean = false;
 
+  selections: SelectionModel<ScrobbleEvent> = new SelectionModel();
+  selectAll: boolean = false;
+  isShiftDown: boolean = false;
+  lastSelectedIndex: number | null = null;
+
+  @HostListener('document:keydown.shift', ['$event'])
+  handleKeypress(_: KeyboardEvent) {
+    this.isShiftDown = true;
+  }
+
+  @HostListener('document:keyup.shift', ['$event'])
+  handleKeyUp(_: KeyboardEvent) {
+    this.isShiftDown = false;
+  }
+
   ngOnInit() {
 
     this.pageInfo.pageNumber = 0;
@@ -118,6 +140,7 @@ export class UserScrobbleHistoryComponent implements OnInit {
       .pipe(take(1))
       .subscribe((result: PaginatedResult<ScrobbleEvent[]>) => {
       this.events = result.result;
+      this.selections = new SelectionModel(false, this.events);
 
       this.pageInfo.totalPages = result.pagination.totalPages - 1; // ngx-datatable is 0 based, Kavita is 1 based
       this.pageInfo.size = result.pagination.itemsPerPage;
@@ -143,4 +166,55 @@ export class UserScrobbleHistoryComponent implements OnInit {
       this.toastr.info(translate('toasts.scrobble-gen-init'))
     });
   }
+
+  bulkDelete() {
+    if (!this.selections.hasAnySelected()) {
+      return;
+    }
+
+    const eventIds = this.selections.selected().map(e => e.id);
+
+    this.scrobblingService.bulkRemoveEvents(eventIds).subscribe({
+      next: () => {
+        this.events = this.events.filter(e => !eventIds.includes(e.id));
+        this.selectAll = false;
+        this.selections.clearSelected();
+        this.pageInfo.totalElements -= eventIds.length;
+        this.cdRef.markForCheck();
+      },
+      error: err => {
+        console.error(err);
+      }
+    });
+  }
+
+  toggleAll() {
+    this.selectAll = !this.selectAll;
+    this.events.forEach(e => this.selections.toggle(e, this.selectAll));
+    this.cdRef.markForCheck();
+  }
+
+  handleSelection(item: ScrobbleEvent, index: number) {
+    if (this.isShiftDown && this.lastSelectedIndex !== null) {
+      // Bulk select items between the last selected item and the current one
+      const start = Math.min(this.lastSelectedIndex, index);
+      const end = Math.max(this.lastSelectedIndex, index);
+
+      for (let i = start; i <= end; i++) {
+        const event = this.events[i];
+        if (!this.selections.isSelected(event, (e1, e2) => e1.id == e2.id)) {
+          this.selections.toggle(event, true);
+        }
+      }
+    } else {
+      this.selections.toggle(item);
+    }
+
+    this.lastSelectedIndex = index;
+
+
+    const numberOfSelected = this.selections.selected().length;
+    this.selectAll = numberOfSelected === this.events.length;
+    this.cdRef.markForCheck();
+  }
 }

UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.html

@@ -8,7 +8,7 @@
         <label for="filter" class="visually-hidden">{{t('filter-label')}}</label>
         <div class="input-group">
           <input id="filter" type="text" class="form-control" [placeholder]="t('filter-label')" formControlName="filter" />
-          <button class="btn btn-primary" type="button" (click)="clear()">{{t('clear-errors')}}</button>
+          <button class="btn btn-primary" type="button" [disabled]="data.length === 0" (click)="clear()">{{t('clear-errors')}}</button>
         </div>
       </div>
     </div>

UI/Web/src/app/typeahead/_models/selection-model.ts

@@ -70,6 +70,28 @@ export class SelectionModel<T> {
     return (selectedCount !== this._data.length && selectedCount !== 0)
   }
 
+  /**
+   * @return If at least one item is selected
+   */
+  hasAnySelected(): boolean {
+    for (const d of this._data) {
+      if (d.selected) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Marks every data entry has not selected
+   */
+  clearSelected() {
+    this._data = this._data.map(d => {
+      d.selected = false;
+      return d;
+    });
+  }
+
   /**
    *
    * @returns All Selected items

UI/Web/src/assets/langs/en.json

@@ -42,6 +42,8 @@
         "series-header": "Series",
         "data-header": "Data",
         "is-processed-header": "Is Processed",
+        "select-header": "Select all",
+        "delete-selected": "Delete selected",
         "no-data": "{{common.no-data}}",
         "volume-and-chapter-num": "Volume {{v}} Chapter {{n}}",
         "volume-num": "Volume {{num}}",