Filtering First Pass (#442)

# Added
- Added: Added "In Progress" view to see everything you are currently reading
- Added: Added the ability to filter series based on format from "In Progress", "Recently Added", "Library Detail" pages.
- Added: Added total items to the above pages to showcase total series within Kavita

==============================
* Added filtering to recently added

* Cleaned up the documentation on the APIs and removed params no longer needed.

* Implemented Filtering on library detail, in progress, and recently added for format. UI is non-final.

* Moved filtering to an expander panel

* Cleaned up filtering UI a bit

* Cleaned up some code and added titles on touched pages

* Fixed recently added not re-rendering page

* Removed commented out code

* Version bump

* Added an animation to the filtering section

* Stashing changes, needing to switch lazy loading libraries out due to current version not trigging on dom mutation events

* Finally fixed all the lazy loading issues and made it so pagination works without reloading the whole page.

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

@@ -38,4 +38,8 @@ export class ImageService {
   getChapterCoverImage(chapterId: number) {
     return this.baseUrl + 'image/chapter-cover?chapterId=' + chapterId;
   }
+
+  updateErroredImage(event: any) {
+    event.target.src = this.placeholderImage;
+  }
 }

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

@@ -6,8 +6,10 @@ import { environment } from 'src/environments/environment';
 import { Chapter } from '../_models/chapter';
 import { CollectionTag } from '../_models/collection-tag';
 import { InProgressChapter } from '../_models/in-progress-chapter';
+import { MangaFormat } from '../_models/manga-format';
 import { PaginatedResult } from '../_models/pagination';
 import { Series } from '../_models/series';
+import { SeriesFilter } from '../_models/series-filter';
 import { SeriesMetadata } from '../_models/series-metadata';
 import { Volume } from '../_models/volume';
 import { ImageService } from './image.service';
@@ -38,12 +40,12 @@ export class SeriesService {
     return paginatedVariable;
   }
 
-  getSeriesForLibrary(libraryId: number, pageNum?: number, itemsPerPage?: number) {
+  getSeriesForLibrary(libraryId: number, pageNum?: number, itemsPerPage?: number, filter?: SeriesFilter) {
     let params = new HttpParams();
-
     params = this._addPaginationIfExists(params, pageNum, itemsPerPage);
+    const data = this.createSeriesFilter(filter);
 
-    return this.httpClient.get<PaginatedResult<Series[]>>(this.baseUrl + 'series?libraryId=' + libraryId, {observe: 'response', params}).pipe(
+    return this.httpClient.post<PaginatedResult<Series[]>>(this.baseUrl + 'series?libraryId=' + libraryId, data, {observe: 'response', params}).pipe(
       map((response: any) => {
         return this._cachePaginatedResults(response, this.paginatedResults);
       })
@@ -79,7 +81,7 @@ export class SeriesService {
   }
 
   updateSeries(model: any) {
-    return this.httpClient.post(this.baseUrl + 'series/', model);
+    return this.httpClient.post(this.baseUrl + 'series/update', model);
   }
 
   markRead(seriesId: number) {
@@ -90,22 +92,27 @@ export class SeriesService {
     return this.httpClient.post<void>(this.baseUrl + 'reader/mark-unread', {seriesId});
   }
 
-  getRecentlyAdded(libraryId: number = 0, pageNum?: number, itemsPerPage?: number) {
+  getRecentlyAdded(libraryId: number = 0, pageNum?: number, itemsPerPage?: number, filter?: SeriesFilter) {
+    const data = this.createSeriesFilter(filter);
     let params = new HttpParams();
-
     params = this._addPaginationIfExists(params, pageNum, itemsPerPage);
 
-    return this.httpClient.get<Series[]>(this.baseUrl + 'series/recently-added', {observe: 'response', params}).pipe(
-      map((response: any) => {
-        return this._cachePaginatedResults(response, this.paginatedSeriesForTagsResults);
+    return this.httpClient.post<Series[]>(this.baseUrl + 'series/recently-added?libraryId=' + libraryId, data, {observe: 'response', params}).pipe(
+      map(response => {
+        return this._cachePaginatedResults(response, new PaginatedResult<Series[]>());
       })
     );
   }
 
-  getInProgress(libraryId: number = 0) {
-    return this.httpClient.get<Series[]>(this.baseUrl + 'series/in-progress?libraryId=' + libraryId).pipe(map(series => {
-      series.forEach(s => s.coverImage = this.imageService.getSeriesCoverImage(s.id));
-      return series;
+  getInProgress(libraryId: number = 0, pageNum?: number, itemsPerPage?: number, filter?: SeriesFilter) {
+    const data = this.createSeriesFilter(filter);
+
+    let params = new HttpParams();
+    params = this._addPaginationIfExists(params, pageNum, itemsPerPage);
+
+    return this.httpClient.post<Series[]>(this.baseUrl + 'series/in-progress?libraryId=' + libraryId, data, {observe: 'response', params}).pipe(
+      map(response => {
+        return this._cachePaginatedResults(response, new PaginatedResult<Series[]>());
     }));
   }
 
@@ -160,4 +167,16 @@ export class SeriesService {
     }
     return params;
   }
+
+  createSeriesFilter(filter?: SeriesFilter) {
+    const data: SeriesFilter = {
+      mangaFormat: null
+    };
+
+    if (filter) {
+      data.mangaFormat = filter.mangaFormat;
+    }
+
+    return data;
+  }
 }