AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Filtering First Pass (#442)

Browse source 
# 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.
This commit is contained in:
Joseph Milazzo 2021-07-27 18:39:53 -05:00 • committed by GitHub
parent 434bcdae4c
commit b9f20f4d19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 422 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/library-detail/library-detail.component.html
View file

@ -3,6 +3,8 @@
[items]="series"
[actions]="actions"
[pagination]="pagination"
[filters]="filters"
(applyFilter)="updateFilter($event)"
(pageChange)="onPageChange($event)"
>
<ng-template #cardItem let-item let-position="idx">

42
UI/Web/src/app/library-detail/library-detail.component.ts
View file

@ -2,9 +2,11 @@ import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs/operators';
import { UpdateFilterEvent } from '../shared/card-detail-layout/card-detail-layout.component';
import { Library } from '../_models/library';
import { Pagination } from '../_models/pagination';
import { Series } from '../_models/series';
import { FilterItem, mangaFormatFilters, SeriesFilter } from '../_models/series-filter';
import { Action, ActionFactoryService, ActionItem } from '../_services/action-factory.service';
import { ActionService } from '../_services/action.service';
import { LibraryService } from '../_services/library.service';
@ -23,9 +25,14 @@ export class LibraryDetailComponent implements OnInit {
loadingSeries = false;
pagination!: Pagination;
actions: ActionItem<Library>[] = [];
filters: Array<FilterItem> = mangaFormatFilters;
filter: SeriesFilter = {
mangaFormat: null
};
constructor(private route: ActivatedRoute, private router: Router, private seriesService: SeriesService,
private libraryService: LibraryService, private titleService: Title, private actionFactoryService: ActionFactoryService, private actionService: ActionService) {
private libraryService: LibraryService, private titleService: Title, private actionFactoryService: ActionFactoryService,
private actionService: ActionService) {
const routeId = this.route.snapshot.paramMap.get('id');
if (routeId === null) {
this.router.navigateByUrl('/libraries');
@ -36,12 +43,14 @@ export class LibraryDetailComponent implements OnInit {
this.libraryService.getLibraryNames().pipe(take(1)).subscribe(names => {
this.libraryName = names[this.libraryId];
this.titleService.setTitle('Kavita - ' + this.libraryName);
})
this.loadPage();
});
this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
this.pagination = {currentPage: 0, itemsPerPage: 30, totalItems: 0, totalPages: 1};
this.loadPage();
}
ngOnInit(): void {
}
handleAction(action: Action, library: Library) {
@ -61,17 +70,24 @@ export class LibraryDetailComponent implements OnInit {
}
}
loadPage() {
if (this.pagination == undefined || this.pagination == null) {
this.pagination = {currentPage: 0, itemsPerPage: 30, totalItems: 0, totalPages: 1};
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();
}
}
const page = this.route.snapshot.queryParamMap.get('page');
loadPage() {
const page = this.getPage();
if (page != null) {
this.pagination.currentPage = parseInt(page, 10);
}
this.loadingSeries = true;
this.seriesService.getSeriesForLibrary(this.libraryId, this.pagination?.currentPage, this.pagination?.itemsPerPage).pipe(take(1)).subscribe(series => {
this.seriesService.getSeriesForLibrary(this.libraryId, this.pagination?.currentPage, this.pagination?.itemsPerPage, this.filter).pipe(take(1)).subscribe(series => {
this.series = series.result;
this.pagination = series.pagination;
this.loadingSeries = false;
@ -80,13 +96,19 @@ export class LibraryDetailComponent implements OnInit {
}
onPageChange(pagination: Pagination) {
this.router.navigate(['library', this.libraryId], {replaceUrl: true, queryParamsHandling: 'merge', queryParams: {page: this.pagination.currentPage} });
window.history.replaceState(window.location.href, '', window.location.href.split('?')[0] + '?page=' + this.pagination.currentPage);
this.loadPage();
}
seriesClicked(series: Series) {
this.router.navigate(['library', this.libraryId, 'series', series.id]);
}
trackByIdentity = (index: number, item: Series) => `${item.name}_${item.originalName}_${item.localizedName}`;
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');
}
}