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/in-progress/in-progress.component.html

@@ -0,0 +1,14 @@
+<ng-container>
+    <app-card-detail-layout header="In Progress" 
+    [isLoading]="isLoading"
+    [items]="recentlyAdded"
+    [filters]="filters"
+    [pagination]="pagination"
+    (pageChange)="onPageChange($event)"
+    (applyFilter)="updateFilter($event)"
+    >
+        <ng-template #cardItem let-item let-position="idx">
+            <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"></app-series-card>
+        </ng-template>
+    </app-card-detail-layout>
+</ng-container>

UI/Web/src/app/in-progress/in-progress.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router, ActivatedRoute } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { UpdateFilterEvent } from '../shared/card-detail-layout/card-detail-layout.component';
+import { Pagination } from '../_models/pagination';
+import { Series } from '../_models/series';
+import { FilterItem, SeriesFilter, mangaFormatFilters } from '../_models/series-filter';
+import { SeriesService } from '../_services/series.service';
+
+@Component({
+  selector: 'app-in-progress',
+  templateUrl: './in-progress.component.html',
+  styleUrls: ['./in-progress.component.scss']
+})
+export class InProgressComponent implements OnInit {
+
+  isLoading: boolean = true;
+  recentlyAdded: Series[] = [];
+  pagination!: Pagination;
+  libraryId!: number;
+  filters: Array<FilterItem> = mangaFormatFilters;
+  filter: SeriesFilter = {
+    mangaFormat: null
+  };
+
+  constructor(private router: Router, private route: ActivatedRoute, private seriesService: SeriesService, private titleService: Title) {
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.titleService.setTitle('Kavita - In Progress');
+    if (this.pagination === undefined || this.pagination === null) {
+      this.pagination = {currentPage: 0, itemsPerPage: 30, totalItems: 0, totalPages: 1};
+    }
+    this.loadPage();
+  }
+
+  ngOnInit() {}
+
+  seriesClicked(series: Series) {
+    this.router.navigate(['library', this.libraryId, 'series', series.id]);
+  }
+
+  onPageChange(pagination: Pagination) {
+    window.history.replaceState(window.location.href, '', window.location.href.split('?')[0] + '?page=' + this.pagination.currentPage);
+    this.loadPage();
+  }
+
+  updateFilter(data: UpdateFilterEvent) {
+    this.filter.mangaFormat = data.filterItem.value;
+    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.isLoading = true;
+    this.seriesService.getInProgress(this.libraryId, this.pagination?.currentPage, this.pagination?.itemsPerPage, this.filter).pipe(take(1)).subscribe(series => {
+      this.recentlyAdded = series.result;
+      this.pagination = series.pagination;
+      this.isLoading = false;
+      window.scrollTo(0, 0);
+    });
+  }
+
+  getPage() {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('page');
+  }
+
+}