More Filtering and Support for ComicInfo v2.1 (draft) Tags (#851)

* Added a reoccuring task to cleanup db entries that might be abandoned. On library page, the Library in question will be prepoulated.

* Laid out the foundation for customized sorting. Added all series page to the UI when clicking on Libraries section header on home page so user can apply any filtering they like.

* When filtering, the current library filter will now automatically filter out the options for people and genres.

* Implemented Sorting controls

* Clear now clears sorting and read progress. Sorting is disabled on deck and recently added.

* Fixed an issue where all-series page couldn't click to open series

* Don't let the user unselect the last read progress. Added new comicinfo v2.1 draft tags.

* Hooked in Translator tag into backend and UI.

* Fixed an issue where you could open multiple typeaheads at the same time

* Integrated Translator and Tags ComicInfo extension fields. Started work on a badge expander.

* Reworked a bit more on badge expander. Added the UI code for Age Rating and Tags

* Integrated backend for Tags, Translator, and Age Rating

* Metadata tags now collapse if more than 4 present

* Some code cleanup

* Made the not read badge slightly smaller

UI/Web/src/app/all-series/all-series.component.html

@@ -0,0 +1,14 @@
+<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
+<app-card-detail-layout header="All Series" 
+    [isLoading]="loadingSeries"
+    [items]="series"
+    [actions]="actions"
+    [pagination]="pagination"
+    [filterSettings]="filterSettings"
+    (applyFilter)="updateFilter($event)"
+    (pageChange)="onPageChange($event)"
+    >
+    <ng-template #cardItem let-item let-position="idx">
+        <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()" (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"></app-series-card>
+    </ng-template>
+</app-card-detail-layout>

UI/Web/src/app/all-series/all-series.component.ts

@@ -0,0 +1,145 @@
+import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { take, debounceTime, takeUntil } from 'rxjs/operators';
+import { BulkSelectionService } from '../cards/bulk-selection.service';
+import { FilterSettings } from '../cards/card-detail-layout/card-detail-layout.component';
+import { KEY_CODES } from '../shared/_services/utility.service';
+import { SeriesAddedEvent } from '../_models/events/series-added-event';
+import { Library } from '../_models/library';
+import { Pagination } from '../_models/pagination';
+import { Series } from '../_models/series';
+import { SeriesFilter } from '../_models/series-filter';
+import { ActionItem, Action } from '../_services/action-factory.service';
+import { ActionService } from '../_services/action.service';
+import { MessageHubService } from '../_services/message-hub.service';
+import { SeriesService } from '../_services/series.service';
+
+@Component({
+  selector: 'app-all-series',
+  templateUrl: './all-series.component.html',
+  styleUrls: ['./all-series.component.scss']
+})
+export class AllSeriesComponent implements OnInit, OnDestroy {
+
+  series: Series[] = [];
+  loadingSeries = false;
+  pagination!: Pagination;
+  actions: ActionItem<Library>[] = [];
+  filter: SeriesFilter | undefined = undefined;
+  onDestroy: Subject<void> = new Subject<void>();
+  filterSettings: FilterSettings = new FilterSettings();
+
+  bulkActionCallback = (action: Action, data: any) => {
+    const selectedSeriesIndexies = this.bulkSelectionService.getSelectedCardsForSource('series');
+    const selectedSeries = this.series.filter((series, index: number) => selectedSeriesIndexies.includes(index + ''));
+
+    switch (action) {
+      case Action.AddToReadingList:
+        this.actionService.addMultipleSeriesToReadingList(selectedSeries, () => {
+          this.bulkSelectionService.deselectAll();
+        });
+        break;
+      case Action.AddToCollection:
+        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, () => {
+          this.bulkSelectionService.deselectAll();
+        });
+        break;
+      case Action.MarkAsRead:
+        this.actionService.markMultipleSeriesAsRead(selectedSeries, () => {
+          this.loadPage();
+          this.bulkSelectionService.deselectAll();
+        });
+        
+        break;
+      case Action.MarkAsUnread:
+        this.actionService.markMultipleSeriesAsUnread(selectedSeries, () => {
+          this.loadPage();
+          this.bulkSelectionService.deselectAll();
+        });
+        break;
+      case Action.Delete:
+        this.actionService.deleteMultipleSeries(selectedSeries, () => {
+          this.loadPage();
+          this.bulkSelectionService.deselectAll();
+        });
+        break;
+    }
+  }
+
+  constructor(private router: Router, private seriesService: SeriesService, 
+    private titleService: Title, private actionService: ActionService, 
+    public bulkSelectionService: BulkSelectionService, private hubService: MessageHubService) {
+    
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+
+    this.titleService.setTitle('Kavita - All Series');
+    this.pagination = {currentPage: 0, itemsPerPage: 30, totalItems: 0, totalPages: 1};
+    
+    this.loadPage();
+  }
+
+  ngOnInit(): void {
+    this.hubService.seriesAdded.pipe(debounceTime(6000), takeUntil(this.onDestroy)).subscribe((event: SeriesAddedEvent) => {
+      this.loadPage();
+    });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy.next();
+    this.onDestroy.complete();
+  }
+
+  @HostListener('document:keydown.shift', ['$event'])
+  handleKeypress(event: KeyboardEvent) {
+    if (event.key === KEY_CODES.SHIFT) {
+      this.bulkSelectionService.isShiftDown = true;
+    }
+  }
+
+  @HostListener('document:keyup.shift', ['$event'])
+  handleKeyUp(event: KeyboardEvent) {
+    if (event.key === KEY_CODES.SHIFT) {
+      this.bulkSelectionService.isShiftDown = false;
+    }
+  }
+
+  updateFilter(data: SeriesFilter) {
+    this.filter = data;
+    if (this.pagination !== undefined && this.pagination !== null) {
+      this.pagination.currentPage = 1;
+      this.onPageChange(this.pagination);
+    } else {
+      this.loadPage();
+    }
+  }
+
+  loadPage() {
+    const page = this.getPage();
+    if (page != null) {
+      this.pagination.currentPage = parseInt(page, 10);
+    }
+    this.loadingSeries = true;
+
+    this.seriesService.getAllSeries(this.pagination?.currentPage, this.pagination?.itemsPerPage, this.filter).pipe(take(1)).subscribe(series => {
+      this.series = series.result;
+      this.pagination = series.pagination;
+      this.loadingSeries = false;
+      window.scrollTo(0, 0);
+    });
+  }
+
+  onPageChange(pagination: Pagination) {
+    window.history.replaceState(window.location.href, '', window.location.href.split('?')[0] + '?page=' + this.pagination.currentPage);
+    this.loadPage();
+  }
+
+  trackByIdentity = (index: number, item: Series) => `${item.name}_${item.originalName}_${item.localizedName}_${item.pagesRead}`;
+
+  getPage() {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('page');
+  }
+
+}