Scrobbling Stability (#3863)

Co-authored-by: Amelia <77553571+Fesaa@users.noreply.github.com>

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-label')}}</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-all-label')}}</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-all-label": "Select all",
+        "delete-selected-label": "Delete selected",
         "no-data": "{{common.no-data}}",
         "volume-and-chapter-num": "Volume {{v}} Chapter {{n}}",
         "volume-num": "Volume {{num}}",