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

30
UI/Web/src/app/library/library.component.ts
View file

@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { take } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
import { EditCollectionTagsComponent } from '../_modals/edit-collection-tags/edit-collection-tags.component';
import { CollectionTag } from '../_models/collection-tag';
import { InProgressChapter } from '../_models/in-progress-chapter';
@ -20,7 +21,7 @@ import { SeriesService } from '../_services/series.service';
templateUrl: './library.component.html',
styleUrls: ['./library.component.scss']
})
export class LibraryComponent implements OnInit {
export class LibraryComponent implements OnInit, OnDestroy {
user: User | undefined;
libraries: Library[] = [];
@ -33,6 +34,8 @@ export class LibraryComponent implements OnInit {
collectionTags: CollectionTag[] = [];
collectionTagActions: ActionItem<CollectionTag>[] = [];
private readonly onDestroy = new Subject<void>();
seriesTrackBy = (index: number, item: any) => `${item.name}_${item.pagesRead}`;
constructor(public accountService: AccountService, private libraryService: LibraryService,
@ -57,13 +60,18 @@ export class LibraryComponent implements OnInit {
this.reloadSeries();
}
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
reloadSeries() {
this.seriesService.getRecentlyAdded(0, 0, 20).subscribe(updatedSeries => {
this.seriesService.getRecentlyAdded(0, 0, 20).pipe(takeUntil(this.onDestroy)).subscribe(updatedSeries => {
this.recentlyAdded = updatedSeries.result;
});
this.seriesService.getInProgress().subscribe((updatedSeries) => {
this.inProgress = updatedSeries;
this.seriesService.getInProgress().pipe(takeUntil(this.onDestroy)).subscribe((updatedSeries) => {
this.inProgress = updatedSeries.result;
});
this.reloadTags();
@ -78,15 +86,15 @@ export class LibraryComponent implements OnInit {
return;
}
this.seriesService.getInProgress().subscribe((updatedSeries) => {
this.inProgress = updatedSeries;
this.seriesService.getInProgress().pipe(takeUntil(this.onDestroy)).subscribe((updatedSeries) => {
this.inProgress = updatedSeries.result;
});
this.reloadTags();
}
reloadTags() {
this.collectionService.allTags().subscribe(tags => {
this.collectionService.allTags().pipe(takeUntil(this.onDestroy)).subscribe(tags => {
this.collectionTags = tags;
});
}
@ -96,7 +104,9 @@ export class LibraryComponent implements OnInit {
this.router.navigate(['collections']);
} else if (sectionTitle.toLowerCase() === 'recently added') {
this.router.navigate(['recently-added']);
}
} else if (sectionTitle.toLowerCase() === 'in progress') {
this.router.navigate(['in-progress']);
}
}
loadCollection(item: CollectionTag) {