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

Started with the separating of different filter fields for a generic metadata-filter component.

Browse source 
As of this commit, I've restructured some of how data flows and added documentation to make it easier for the next time.
This commit is contained in:
Joseph Milazzo 2025-06-08 13:53:32 -05:00
parent 60cd000af5
commit 2654ea2965
28 changed files with 230 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

11
API/Controllers/PersonController.cs
View file

@ -90,6 +90,17 @@ public class PersonController : BaseApiController
return Ok(list);
}
// [HttpPost("all-v2")]
// public async Task<ActionResult<PagedList<BrowsePersonDto>>> GetAuthorsForBrowse(FilterV2Dto filter, [FromQuery] UserParams? userParams)
// {
// userParams ??= UserParams.Default;
//
// // var list = await _unitOfWork.PersonRepository.GetBrowsePersonDtos(User.GetUserId(), filter, userParams);
// // Response.AddPaginationHeader(list.CurrentPage, list.PageSize, list.TotalCount, list.TotalPages);
//
// return Ok([]);
// }
/// <summary>
/// Updates the Person
/// </summary>

2
API/DTOs/Filtering/v2/FilterV2Dto.cs
View file

@ -16,7 +16,7 @@ public sealed record FilterV2Dto
/// The name of the filter
/// </summary>
public string? Name { get; set; }
public ICollection<FilterStatementDto> Statements { get; set; } = new List<FilterStatementDto>();
public ICollection<FilterStatementDto> Statements { get; set; } = [];
public FilterCombination Combination { get; set; } = FilterCombination.And;
public SortOptions? SortOptions { get; set; }

2
API/Data/Repositories/SeriesRepository.cs
View file

@ -1090,8 +1090,6 @@ public class SeriesRepository : ISeriesRepository
return query.Where(s => false);
}
// First setup any FilterField.Libraries in the statements, as these don't have any traditional query statements applied here
query = ApplyLibraryFilter(filter, query);

4
UI/Web/src/app/_models/metadata/series-filter.ts
View file

@ -1,5 +1,5 @@
import {MangaFormat} from "../manga-format";
import {SeriesFilterV2} from "./v2/series-filter-v2";
import {FilterV2} from "./v2/filter-v2";
export interface FilterItem<T> {
title: string;
@ -51,7 +51,7 @@ export const mangaFormatFilters = [
];
export interface FilterEvent {
filterV2: SeriesFilterV2;
filterV2: FilterV2<number>;
isFirst: boolean;
}

9
UI/Web/src/app/_models/metadata/v2/filter-statement.ts
View file

@ -1,8 +1,7 @@
import { FilterComparison } from "./filter-comparison";
import { FilterField } from "./filter-field";
import {FilterComparison} from "./filter-comparison";
export interface FilterStatement {
export interface FilterStatement<T> {
comparison: FilterComparison;
field: FilterField;
field: T;
value: string;
}
}

4
UI/Web/src/app/_models/metadata/v2/series-filter-v2.ts → UI/Web/src/app/_models/metadata/v2/filter-v2.ts
View file

@ -2,9 +2,9 @@ import {FilterStatement} from "./filter-statement";
import {FilterCombination} from "./filter-combination";
import {SortOptions} from "./sort-options";
export interface SeriesFilterV2 {
export interface FilterV2<T> {
name?: string;
statements: Array<FilterStatement>;
statements: Array<FilterStatement<T>>;
combination: FilterCombination;
sortOptions?: SortOptions;
limitTo: number;

5
UI/Web/src/app/_models/metadata/v2/person-filter-field.ts Normal file
View file

@ -0,0 +1,5 @@
export enum PersonFilterField {
None = -1,
Role = 1,
Name = 2
}

9
UI/Web/src/app/_services/filter.service.ts
View file

@ -1,8 +1,7 @@
import { Injectable } from '@angular/core';
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
import {Injectable} from '@angular/core';
import {FilterV2} from "../_models/metadata/v2/filter-v2";
import {environment} from "../../environments/environment";
import { HttpClient } from "@angular/common/http";
import {JumpKey} from "../_models/jumpbar/jump-key";
import {HttpClient} from "@angular/common/http";
import {SmartFilter} from "../_models/metadata/v2/smart-filter";
@Injectable({
@ -13,7 +12,7 @@ export class FilterService {
baseUrl = environment.apiUrl;
constructor(private httpClient: HttpClient) { }
saveFilter(filter: SeriesFilterV2) {
saveFilter(filter: FilterV2<number>) {
return this.httpClient.post(this.baseUrl + 'filter/update', filter);
}
getAllFilters() {

8
UI/Web/src/app/_services/metadata.service.ts
View file

@ -13,7 +13,7 @@ import {FilterComparison} from '../_models/metadata/v2/filter-comparison';
import {FilterField} from '../_models/metadata/v2/filter-field';
import {mangaFormatFilters, SortField} from "../_models/metadata/series-filter";
import {FilterCombination} from "../_models/metadata/v2/filter-combination";
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../_models/metadata/v2/filter-v2";
import {FilterStatement} from "../_models/metadata/v2/filter-statement";
import {SeriesDetailPlus} from "../_models/series-detail/series-detail-plus";
import {LibraryType} from "../_models/library/library";
@ -148,9 +148,9 @@ export class MetadataService {
return this.httpClient.get<Array<Person>>(this.baseUrl + 'metadata/people-by-role?role=' + role);
}
createDefaultFilterDto(): SeriesFilterV2 {
createDefaultFilterDto(): FilterV2<FilterField> {
return {
statements: [] as FilterStatement[],
statements: [] as FilterStatement<FilterField>[],
combination: FilterCombination.And,
limitTo: 0,
sortOptions: {
@ -168,7 +168,7 @@ export class MetadataService {
};
}
updateFilter(arr: Array<FilterStatement>, index: number, filterStmt: FilterStatement) {
updateFilter(arr: Array<FilterStatement<number>>, index: number, filterStmt: FilterStatement<number>) {
arr[index].comparison = filterStmt.comparison;
arr[index].field = filterStmt.field;
arr[index].value = filterStmt.value ? filterStmt.value + '' : '';

5
UI/Web/src/app/_services/reader.service.ts
View file

@ -16,13 +16,14 @@ import {TextResonse} from '../_types/text-response';
import {AccountService} from './account.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {PersonalToC} from "../_models/readers/personal-toc";
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../_models/metadata/v2/filter-v2";
import NoSleep from 'nosleep.js';
import {FullProgress} from "../_models/readers/full-progress";
import {Volume} from "../_models/volume";
import {UtilityService} from "../shared/_services/utility.service";
import {translate} from "@jsverse/transloco";
import {ToastrService} from "ngx-toastr";
import {FilterField} from "../_models/metadata/v2/filter-field";
export const CHAPTER_ID_DOESNT_EXIST = -1;
@ -107,7 +108,7 @@ export class ReaderService {
return this.httpClient.post(this.baseUrl + 'reader/unbookmark', {seriesId, volumeId, chapterId, page});
}
getAllBookmarks(filter: SeriesFilterV2 | undefined) {
getAllBookmarks(filter: FilterV2<FilterField> | undefined) {
return this.httpClient.post<PageBookmark[]>(this.baseUrl + 'reader/all-bookmarks', filter);
}

49
UI/Web/src/app/_services/series.service.ts
View file

@ -1,28 +1,26 @@
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { UtilityService } from '../shared/_services/utility.service';
import { Chapter } from '../_models/chapter';
import { PaginatedResult } from '../_models/pagination';
import { Series } from '../_models/series';
import { RelatedSeries } from '../_models/series-detail/related-series';
import { SeriesDetail } from '../_models/series-detail/series-detail';
import { SeriesGroup } from '../_models/series-group';
import { SeriesMetadata } from '../_models/metadata/series-metadata';
import { Volume } from '../_models/volume';
import { ImageService } from './image.service';
import { TextResonse } from '../_types/text-response';
import { SeriesFilterV2 } from '../_models/metadata/v2/series-filter-v2';
import {UserReview} from "../_single-module/review-card/user-review";
import {HttpClient, HttpParams} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {environment} from 'src/environments/environment';
import {UtilityService} from '../shared/_services/utility.service';
import {Chapter} from '../_models/chapter';
import {PaginatedResult} from '../_models/pagination';
import {Series} from '../_models/series';
import {RelatedSeries} from '../_models/series-detail/related-series';
import {SeriesDetail} from '../_models/series-detail/series-detail';
import {SeriesGroup} from '../_models/series-group';
import {SeriesMetadata} from '../_models/metadata/series-metadata';
import {Volume} from '../_models/volume';
import {TextResonse} from '../_types/text-response';
import {FilterV2} from '../_models/metadata/v2/filter-v2';
import {Rating} from "../_models/rating";
import {Recommendation} from "../_models/series-detail/recommendation";
import {ExternalSeriesDetail} from "../_models/series-detail/external-series-detail";
import {NextExpectedChapter} from "../_models/series-detail/next-expected-chapter";
import {QueryContext} from "../_models/metadata/v2/query-context";
import {ExternalSeries} from "../_models/series-detail/external-series";
import {ExternalSeriesMatch} from "../_models/series-detail/external-series-match";
import {FilterField} from "../_models/metadata/v2/filter-field";
@Injectable({
providedIn: 'root'
@ -33,10 +31,9 @@ export class SeriesService {
paginatedResults: PaginatedResult<Series[]> = new PaginatedResult<Series[]>();
paginatedSeriesForTagsResults: PaginatedResult<Series[]> = new PaginatedResult<Series[]>();
constructor(private httpClient: HttpClient, private imageService: ImageService,
private utilityService: UtilityService) { }
constructor(private httpClient: HttpClient, private utilityService: UtilityService) { }
getAllSeriesV2(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2, context: QueryContext = QueryContext.None) {
getAllSeriesV2(pageNum?: number, itemsPerPage?: number, filter?: FilterV2<FilterField>, context: QueryContext = QueryContext.None) {
let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {};
@ -48,7 +45,7 @@ export class SeriesService {
);
}
getSeriesForLibraryV2(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2) {
getSeriesForLibraryV2(pageNum?: number, itemsPerPage?: number, filter?: FilterV2<FilterField>) {
let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {};
@ -100,7 +97,7 @@ export class SeriesService {
return this.httpClient.post<void>(this.baseUrl + 'reader/mark-unread', {seriesId});
}
getRecentlyAdded(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2) {
getRecentlyAdded(pageNum?: number, itemsPerPage?: number, filter?: FilterV2<FilterField>) {
let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
@ -116,7 +113,7 @@ export class SeriesService {
return this.httpClient.post<SeriesGroup[]>(this.baseUrl + 'series/recently-updated-series', {});
}
getWantToRead(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2): Observable<PaginatedResult<Series[]>> {
getWantToRead(pageNum?: number, itemsPerPage?: number, filter?: FilterV2<FilterField>): Observable<PaginatedResult<Series[]>> {
let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {};
@ -134,7 +131,7 @@ export class SeriesService {
}));
}
getOnDeck(libraryId: number = 0, pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2) {
getOnDeck(libraryId: number = 0, pageNum?: number, itemsPerPage?: number, filter?: FilterV2<FilterField>) {
let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {};

4
UI/Web/src/app/all-series/_components/all-series/all-series.component.html
View file

@ -13,10 +13,10 @@
<app-card-detail-layout
[isLoading]="loadingSeries"
[items]="series"
[trackByIdentity]="trackByIdentity"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
[jumpBarKeys]="jumpbarKeys"
[trackByIdentity]="trackByIdentity"
[filterSettings]="filterSettings"
(applyFilter)="updateFilter($event)"
>
<ng-template #cardItem let-item let-position="idx">

13
UI/Web/src/app/all-series/_components/all-series/all-series.component.ts
View file

@ -32,11 +32,12 @@ import {
SideNavCompanionBarComponent
} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {SeriesFilterV2} from "../../../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../../../_models/metadata/v2/filter-v2";
import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
import {BrowseTitlePipe} from "../../../_pipes/browse-title.pipe";
import {MetadataService} from "../../../_services/metadata.service";
import {Observable} from "rxjs";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
@Component({
@ -67,10 +68,10 @@ export class AllSeriesComponent implements OnInit {
series: Series[] = [];
loadingSeries = false;
pagination: Pagination = new Pagination();
filter: SeriesFilterV2 | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings();
filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings<FilterField> = new FilterSettings();
filterOpen: EventEmitter<boolean> = new EventEmitter();
filterActiveCheck!: SeriesFilterV2;
filterActiveCheck!: FilterV2<FilterField>;
filterActive: boolean = false;
jumpbarKeys: Array<JumpKey> = [];
browseTitlePipe = new BrowseTitlePipe();
@ -132,12 +133,12 @@ export class AllSeriesComponent implements OnInit {
this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
this.filter = filter;
this.title = this.route.snapshot.queryParamMap.get('title') || this.filter.name || this.title;
this.title = this.route.snapshot.queryParamMap.get('title') || this.filter!.name || this.title;
this.titleService.setTitle('Kavita - ' + this.title);
// To provide a richer experience, when we are browsing just a Genre/Tag/etc, we regenerate the title (if not explicitly passed) to "Browse {GenreName}"
if (this.shouldRewriteTitle()) {
const field = this.filter.statements[0].field;
const field = this.filter!.statements[0].field;
// This api returns value as string and number, it will complain without the casting
(this.metadataService.getOptionsForFilterField(field) as Observable<any>).subscribe((opts: any[]) => {

9
UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.ts
View file

@ -24,9 +24,10 @@ import {
SideNavCompanionBarComponent
} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco";
import {SeriesFilterV2} from "../../../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../../../_models/metadata/v2/filter-v2";
import {Title} from "@angular/platform-browser";
import {WikiLink} from "../../../_models/wiki";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
@Component({
selector: 'app-bookmarks',
@ -63,11 +64,11 @@ export class BookmarksComponent implements OnInit {
jumpbarKeys: Array<JumpKey> = [];
pagination: Pagination = new Pagination();
filter: SeriesFilterV2 | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings();
filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings<FilterField> = new FilterSettings();
filterOpen: EventEmitter<boolean> = new EventEmitter();
filterActive: boolean = false;
filterActiveCheck!: SeriesFilterV2;
filterActiveCheck!: FilterV2<FilterField>;
trackByIdentity = (index: number, item: Series) => `${item.name}_${item.localizedName}_${item.pagesRead}`;
refresh: EventEmitter<void> = new EventEmitter();

4
UI/Web/src/app/browse/browse-people/browse-authors.component.html
View file

@ -1,6 +1,6 @@
<div class="main-container container-fluid">
<ng-container *transloco="let t; read:'browse-authors'" >
<app-side-nav-companion-bar [hasFilter]="false">
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
<h2 title>
<span>{{t('title')}}</span>
</h2>
@ -55,6 +55,8 @@
[filteringDisabled]="true"
[customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name"
[refresh]="refresh"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
>
<ng-template #cardItem let-item let-position="idx">
<app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">

26
UI/Web/src/app/browse/browse-people/browse-authors.component.ts
View file

@ -15,7 +15,7 @@ import {DecimalPipe} from "@angular/common";
import {Series} from "../../_models/series";
import {Pagination} from "../../_models/pagination";
import {JumpKey} from "../../_models/jumpbar/jump-key";
import {Router} from "@angular/router";
import {ActivatedRoute, Router} from "@angular/router";
import {PersonService} from "../../_services/person.service";
import {BrowsePerson} from "../../_models/metadata/browse/browse-person";
import {JumpbarService} from "../../_services/jumpbar.service";
@ -32,6 +32,10 @@ import {debounceTime, tap} from "rxjs/operators";
import {SortButtonComponent} from "../../_single-module/sort-button/sort-button.component";
import {PersonSortField} from "../../_models/metadata/v2/person-sort-field";
import {PersonSortOptions} from "../../_models/metadata/v2/sort-options";
import {FilterSettings} from "../../metadata-filter/filter-settings";
import {PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
import {FilterUtilitiesService} from "../../shared/_services/filter-utilities.service";
import {FilterV2} from "../../_models/metadata/v2/filter-v2";
@Component({
@ -59,6 +63,8 @@ export class BrowseAuthorsComponent implements OnInit {
private readonly router = inject(Router);
private readonly personService = inject(PersonService);
private readonly jumpbarService = inject(JumpbarService);
private readonly route = inject(ActivatedRoute);
private readonly filterUtilityService = inject(FilterUtilitiesService);
protected readonly imageService = inject(ImageService);
@ -77,12 +83,30 @@ export class BrowseAuthorsComponent implements OnInit {
query: new FormControl('', []),
});
isAscending: boolean = true;
filterSettings: FilterSettings<PersonFilterField> = new FilterSettings<PersonFilterField>();
filterActive: boolean = false;
filterOpen: EventEmitter<boolean> = new EventEmitter();
filter: FilterV2<PersonFilterField> | undefined = undefined;
filterActiveCheck!: FilterV2<PersonFilterField>;
ngOnInit() {
this.isLoading = true;
this.cdRef.markForCheck();
this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
this.filter = filter;
this.filterActiveCheck = this.filterUtilityService.createPersonV2Filter();
this.filterActiveCheck!.statements.push(this.filterUtilityService.createPersonV2DefaultStatement());
this.filterSettings.presetsV2 = this.filter;
this.cdRef.markForCheck();
});
this.filterGroup.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef),
debounceTime(200),

18
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -12,7 +12,7 @@
}
<span>
{{header}}&nbsp;
{{header}}&nbsp;
@if (pagination) {
<span class="badge bg-primary rounded-pill"
[attr.aria-label]="t('total-items', {count: pagination.totalItems})">{{pagination.totalItems}}</span>
@ -25,6 +25,7 @@
}
<app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
<div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading}">
<div class="content-container">
<div class="card-container">
@ -34,13 +35,14 @@
<virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll">
<div class="grid row g-0" #container>
<div class="card col-auto mt-2 mb-2"
(click)="tryToSaveJumpKey()"
*ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i"
id="jumpbar-index--{{i}}"
[attr.jumpbar-index]="i">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: scroll.viewPortInfo.startIndexWithBuffer + i }"></ng-container>
</div>
@for (item of scroll.viewPortItems; track trackByIdentity(i, item); let i = $index) {
<div class="card col-auto mt-2 mb-2"
(click)="tryToSaveJumpKey()"
id="jumpbar-index--{{i}}"
[attr.jumpbar-index]="i">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: scroll.viewPortInfo.startIndexWithBuffer + i }"></ng-container>
</div>
}
</div>
</virtual-scroller>
</div>

28
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
View file

@ -35,14 +35,27 @@ import {LoadingComponent} from "../../shared/loading/loading.component";
import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.component";
import {TranslocoDirective} from "@jsverse/transloco";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
import {filter, map} from "rxjs/operators";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {tap} from "rxjs";
import {FilterV2} from "../../_models/metadata/v2/filter-v2";
const ANIMATION_TIME_MS = 0;
/**
* Provides a virtualized card layout, jump bar, and metadata filter bar.
*
* How to use:
* - For filtering:
* - pass a filterSettings which will bootstrap the filtering bar
* - pass a jumpbar method binding to calc the count for the entity
* - For card layout
* - Pass an identity function for trackby
* - Pass a pagination object for the total count
* - Pass the items
* -
*/
@Component({
selector: 'app-card-detail-layout',
imports: [LoadingComponent, VirtualScrollerModule, CardActionablesComponent, MetadataFilterComponent,
@ -85,8 +98,12 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
* A trackBy to help with rendering. This is required as without it there are issues when scrolling
*/
@Input({required: true}) trackByIdentity!: TrackByFunction<any>;
@Input() filterSettings!: FilterSettings;
@Input() filterSettings!: FilterSettings<number>;
@Input() refresh!: EventEmitter<void>;
/**
* Pass the filter object optionally. If not passed, will create a SeriesFilter by default
*/
filter: FilterV2<number> | undefined = undefined;
/**
* Will force the jumpbar to be disabled - in cases where you're not using a traditional filter config
@ -104,7 +121,6 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
@ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent;
filter: SeriesFilterV2 = this.filterUtilityService.createSeriesV2Filter();
libraries: Array<FilterItem<Library>> = [];
updateApplied: number = 0;
@ -128,6 +144,10 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
if (this.trackByIdentity === undefined) {
this.trackByIdentity = (_: number, item: any) => `${this.header}_${this.updateApplied}_${item?.libraryId}`;
}
// This shouldn't be needed as filter is a temp variable to check if a custom sort is present
// if (!this.filter) {
// this.filter = this.filterUtilityService.createSeriesV2Filter();
// }
if (this.filterSettings === undefined) {
this.filterSettings = new FilterSettings();
@ -177,7 +197,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
hasCustomSort() {
if (this.customSort) return true;
if (this.filteringDisabled) return false;
return this.filter?.sortOptions?.sortField != SortField.SortName || !this.filter?.sortOptions.isAscending;
}

13
UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts
View file

@ -50,7 +50,7 @@ import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloc
import {CardActionablesComponent} from "../../../_single-module/card-actionables/card-actionables.component";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
import {SeriesFilterV2} from "../../../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../../../_models/metadata/v2/filter-v2";
import {AccountService} from "../../../_services/account.service";
import {User} from "../../../_models/user";
import {ScrobbleProvider} from "../../../_services/scrobbling.service";
@ -62,6 +62,7 @@ import {
import {DefaultModalOptions} from "../../../_models/default-modal-options";
import {ScrobbleProviderNamePipe} from "../../../_pipes/scrobble-provider-name.pipe";
import {PromotedIconComponent} from "../../../shared/_components/promoted-icon/promoted-icon.component";
import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
@Component({
selector: 'app-collection-detail',
@ -109,13 +110,13 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
series: Array<Series> = [];
pagination: Pagination = new Pagination();
collectionTagActions: ActionItem<UserCollection>[] = [];
filter: SeriesFilterV2 | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings();
filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings<FilterField> = new FilterSettings();
summary: string = '';
user!: User;
actionInProgress: boolean = false;
filterActiveCheck!: SeriesFilterV2;
filterActiveCheck!: FilterV2<FilterField>;
filterActive: boolean = false;
jumpbarKeys: Array<JumpKey> = [];
@ -189,9 +190,9 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
const tagId = parseInt(routeId, 10);
this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
this.filter = filter;
this.filter = filter as FilterV2<FilterField>;
if (this.filter.statements.filter(stmt => stmt.field === FilterField.CollectionTags).length === 0) {
if (this.filter.statements.filter((stmt: FilterStatement<FilterField>) => stmt.field === FilterField.CollectionTags).length === 0) {
this.filter!.statements.push({field: FilterField.CollectionTags, value: tagId + '', comparison: FilterComparison.Equal});
}
this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();

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

@ -37,7 +37,7 @@ import {
SideNavCompanionBarComponent
} from '../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {TranslocoDirective} from "@jsverse/transloco";
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../_models/metadata/v2/filter-v2";
import {FilterComparison} from "../_models/metadata/v2/filter-comparison";
import {FilterField} from "../_models/metadata/v2/filter-field";
import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component";
@ -75,11 +75,11 @@ export class LibraryDetailComponent implements OnInit {
loadingSeries = false;
pagination: Pagination = {currentPage: 0, totalPages: 0, totalItems: 0, itemsPerPage: 0};
actions: ActionItem<Library>[] = [];
filter: SeriesFilterV2 | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings();
filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings<FilterField> = new FilterSettings();
filterOpen: EventEmitter<boolean> = new EventEmitter();
filterActive: boolean = false;
filterActiveCheck!: SeriesFilterV2;
filterActiveCheck!: FilterV2<FilterField>;
refresh: EventEmitter<void> = new EventEmitter();
jumpKeys: Array<JumpKey> = [];
bulkLoader: boolean = false;
@ -185,7 +185,7 @@ export class LibraryDetailComponent implements OnInit {
this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
this.filter = filter;
this.filter = filter as FilterV2<FilterField>;
if (this.filter.statements.filter(stmt => stmt.field === FilterField.Libraries).length === 0) {
this.filter!.statements.push({field: FilterField.Libraries, value: this.libraryId + '', comparison: FilterComparison.Equal});

8
UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts
View file

@ -11,7 +11,7 @@ import {
} from '@angular/core';
import {MetadataService} from 'src/app/_services/metadata.service';
import {Breakpoint, UtilityService} from 'src/app/shared/_services/utility.service';
import {SeriesFilterV2} from 'src/app/_models/metadata/v2/series-filter-v2';
import {FilterV2} from 'src/app/_models/metadata/v2/filter-v2';
import {MetadataFilterRowComponent} from "../metadata-filter-row/metadata-filter-row.component";
import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
@ -38,13 +38,13 @@ import {translate, TranslocoDirective} from "@jsverse/transloco";
})
export class MetadataBuilderComponent implements OnInit {
@Input({required: true}) filter!: SeriesFilterV2;
@Input({required: true}) filter!: FilterV2<number>;
/**
* The number of statements that can be. 0 means unlimited. -1 means none.
*/
@Input() statementLimit = 0;
@Input() availableFilterFields = allFields;
@Output() update: EventEmitter<SeriesFilterV2> = new EventEmitter<SeriesFilterV2>();
@Output() update: EventEmitter<FilterV2<number>> = new EventEmitter<FilterV2<number>>();
@Output() apply: EventEmitter<void> = new EventEmitter<void>();
private readonly cdRef = inject(ChangeDetectorRef);
@ -79,7 +79,7 @@ export class MetadataBuilderComponent implements OnInit {
this.cdRef.markForCheck();
}
updateFilter(index: number, filterStmt: FilterStatement) {
updateFilter(index: number, filterStmt: FilterStatement<number>) {
this.metadataService.updateFilter(this.filter.statements, index, filterStmt);
this.update.emit(this.filter);
}

8
UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.ts
View file

@ -13,8 +13,6 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {FilterStatement} from '../../../_models/metadata/v2/filter-statement';
import {BehaviorSubject, distinctUntilChanged, filter, Observable, of, startWith, switchMap, tap} from 'rxjs';
import {MetadataService} from 'src/app/_services/metadata.service';
import {LibraryService} from 'src/app/_services/library.service';
import {CollectionTagService} from 'src/app/_services/collection-tag.service';
import {FilterComparison} from 'src/app/_models/metadata/v2/filter-comparison';
import {allFields, FilterField} from 'src/app/_models/metadata/v2/filter-field';
import {AsyncPipe} from "@angular/common";
@ -142,8 +140,6 @@ export class MetadataFilterRowComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly dateParser = inject(NgbDateParserFormatter);
private readonly metadataService = inject(MetadataService);
private readonly libraryService = inject(LibraryService);
private readonly collectionTagService = inject(CollectionTagService);
private readonly translocoService = inject(TranslocoService);
@ -151,9 +147,9 @@ export class MetadataFilterRowComponent implements OnInit {
/**
* Slightly misleading as this is the initial state and will be updated on the filterStatement event emitter
*/
@Input() preset!: FilterStatement;
@Input() preset!: FilterStatement<number>;
@Input() availableFields: Array<FilterField> = allFields;
@Output() filterStatement = new EventEmitter<FilterStatement>();
@Output() filterStatement = new EventEmitter<FilterStatement<number>>();
formGroup: FormGroup = new FormGroup({

6
UI/Web/src/app/metadata-filter/filter-settings.ts
View file

@ -1,8 +1,8 @@
import { SeriesFilterV2 } from "../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../_models/metadata/v2/filter-v2";
export class FilterSettings {
export class FilterSettings<T> {
presetsV2: FilterV2<T> | undefined;
sortDisabled = false;
presetsV2: SeriesFilterV2 | undefined;
/**
* The number of statements that can be on the filter. Set to 1 to disable adding more.
*/

13
UI/Web/src/app/metadata-filter/metadata-filter.component.ts
View file

@ -17,14 +17,14 @@ import {Library} from '../_models/library/library';
import {allSortFields, FilterEvent, FilterItem, SortField} from '../_models/metadata/series-filter';
import {ToggleService} from '../_services/toggle.service';
import {FilterSettings} from './filter-settings';
import {SeriesFilterV2} from '../_models/metadata/v2/series-filter-v2';
import {FilterV2} from '../_models/metadata/v2/filter-v2';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {DrawerComponent} from '../shared/drawer/drawer.component';
import {AsyncPipe, NgClass, NgTemplateOutlet} from '@angular/common';
import {translate, TranslocoModule, TranslocoService} from "@jsverse/transloco";
import {SortFieldPipe} from "../_pipes/sort-field.pipe";
import {MetadataBuilderComponent} from "./_components/metadata-builder/metadata-builder.component";
import {allFields} from "../_models/metadata/v2/filter-field";
import {allFields, FilterField} from "../_models/metadata/v2/filter-field";
import {FilterService} from "../_services/filter.service";
import {ToastrService} from "ngx-toastr";
import {animate, style, transition, trigger} from "@angular/animations";
@ -52,6 +52,7 @@ import {SortButtonComponent} from "../_single-module/sort-button/sort-button.com
MetadataBuilderComponent, NgClass, SortButtonComponent]
})
export class MetadataFilterComponent implements OnInit {
protected readonly allFilterFields = allFields;
private readonly destroyRef = inject(DestroyRef);
public readonly utilityService = inject(UtilityService);
@ -65,7 +66,7 @@ export class MetadataFilterComponent implements OnInit {
protected readonly allSortFields = allSortFields.map(f => {
return {title: this.sortFieldPipe.transform(f), value: f};
}).sort((a, b) => a.title.localeCompare(b.title));
protected readonly allFilterFields = allFields;
/**
* This toggles the opening/collapsing of the metadata filter code
@ -75,7 +76,7 @@ export class MetadataFilterComponent implements OnInit {
* Should filtering be shown on the page
*/
@Input() filteringDisabled: boolean = false;
@Input({required: true}) filterSettings!: FilterSettings;
@Input({required: true}) filterSettings!: FilterSettings<FilterField>;
@Output() applyFilter: EventEmitter<FilterEvent> = new EventEmitter();
@ContentChild('[ngbCollapse]') collapse!: NgbCollapse;
@ -92,7 +93,7 @@ export class MetadataFilterComponent implements OnInit {
updateApplied: number = 0;
fullyLoaded: boolean = false;
filterV2: SeriesFilterV2 | undefined;
filterV2: FilterV2<FilterField> | undefined;
@ -148,7 +149,7 @@ export class MetadataFilterComponent implements OnInit {
return clonedObj;
}
handleFilters(filter: SeriesFilterV2) {
handleFilters(filter: FilterV2<FilterField>) {
this.filterV2 = filter;
}

2
UI/Web/src/app/nav/_components/nav-header/nav-header.component.ts
View file

@ -159,7 +159,7 @@ export class NavHeaderComponent implements OnInit {
});
}
goTo(statement: FilterStatement) {
goTo(statement: FilterStatement<number>) {
let params: any = {};
const filter = this.filterUtilityService.createSeriesV2Filter();
filter.statements = [statement];

6
UI/Web/src/app/person-detail/person-detail.component.ts
View file

@ -23,7 +23,7 @@ import {PersonRolePipe} from "../_pipes/person-role.pipe";
import {CarouselReelComponent} from "../carousel/_components/carousel-reel/carousel-reel.component";
import {FilterComparison} from "../_models/metadata/v2/filter-comparison";
import {FilterUtilitiesService} from "../shared/_services/filter-utilities.service";
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../_models/metadata/v2/filter-v2";
import {allPeople, FilterField, personRoleForFilterField} from "../_models/metadata/v2/filter-field";
import {Series} from "../_models/series";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
@ -98,7 +98,7 @@ export class PersonDetailComponent implements OnInit {
roles$: Observable<PersonRole[]> | null = null;
roles: PersonRole[] | null = null;
works$: Observable<Series[]> | null = null;
filter: SeriesFilterV2 | null = null;
filter: FilterV2<FilterField> | null = null;
personActions: Array<ActionItem<Person>> = this.actionService.getPersonActions(this.handleAction.bind(this));
chaptersByRole: any = {};
anilistUrl: string = '';
@ -181,7 +181,7 @@ export class PersonDetailComponent implements OnInit {
}
createFilter(roles: PersonRole[]) {
const filter: SeriesFilterV2 = this.filterUtilityService.createSeriesV2Filter();
const filter = this.filterUtilityService.createSeriesV2Filter();
filter.combination = FilterCombination.Or;
filter.limitTo = 20;

39
UI/Web/src/app/shared/_services/filter-utilities.service.ts
View file

@ -2,7 +2,7 @@ import {inject, Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Params, Router} from '@angular/router';
import {SortField} from 'src/app/_models/metadata/series-filter';
import {MetadataService} from "../../_services/metadata.service";
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../../_models/metadata/v2/filter-v2";
import {FilterStatement} from "../../_models/metadata/v2/filter-statement";
import {FilterCombination} from "../../_models/metadata/v2/filter-combination";
import {FilterField} from "../../_models/metadata/v2/filter-field";
@ -11,8 +11,9 @@ import {HttpClient} from "@angular/common/http";
import {TextResonse} from "../../_types/text-response";
import {environment} from "../../../environments/environment";
import {map, tap} from "rxjs/operators";
import {of, switchMap} from "rxjs";
import {Observable, of, switchMap} from "rxjs";
import {Location} from "@angular/common";
import {PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
@Injectable({
@ -27,12 +28,12 @@ export class FilterUtilitiesService {
private apiUrl = environment.apiUrl;
encodeFilter(filter: SeriesFilterV2 | undefined) {
encodeFilter(filter: FilterV2<number> | undefined) {
return this.http.post<string>(this.apiUrl + 'filter/encode', filter, TextResonse);
}
decodeFilter(encodedFilter: string) {
return this.http.post<SeriesFilterV2>(this.apiUrl + 'filter/decode', {encodedFilter}).pipe(map(filter => {
return this.http.post<FilterV2<number>>(this.apiUrl + 'filter/decode', {encodedFilter}).pipe(map(filter => {
if (filter == null) {
filter = this.metadataService.createDefaultFilterDto();
filter.statements.push(this.createSeriesV2DefaultStatement());
@ -42,13 +43,13 @@ export class FilterUtilitiesService {
}))
}
updateUrlFromFilter(filter: SeriesFilterV2 | undefined) {
updateUrlFromFilter(filter: FilterV2<number> | undefined) {
return this.encodeFilter(filter).pipe(tap(encodedFilter => {
window.history.replaceState(window.location.href, '', window.location.href.split('?')[0]+ '?' + encodedFilter);
}));
}
filterPresetsFromUrl(snapshot: ActivatedRouteSnapshot) {
filterPresetsFromUrl(snapshot: ActivatedRouteSnapshot): Observable<FilterV2<number>> {
const filter = this.metadataService.createDefaultFilterDto();
filter.statements.push(this.createSeriesV2DefaultStatement());
if (!window.location.href.includes('?')) return of(filter);
@ -72,7 +73,7 @@ export class FilterUtilitiesService {
}));
}
applyFilterWithParams(page: Array<any>, filter: SeriesFilterV2, extraParams: Params) {
applyFilterWithParams(page: Array<any>, filter: FilterV2<any>, extraParams: Params) {
return this.encodeFilter(filter).pipe(switchMap(encodedFilter => {
let url = page.join('/') + '?' + encodedFilter;
url += Object.keys(extraParams).map(k => `&${k}=${extraParams[k]}`).join('');
@ -81,7 +82,7 @@ export class FilterUtilitiesService {
}));
}
createSeriesV2Filter(): SeriesFilterV2 {
createSeriesV2Filter(): FilterV2<FilterField> {
return {
combination: FilterCombination.And,
statements: [],
@ -93,11 +94,31 @@ export class FilterUtilitiesService {
};
}
createSeriesV2DefaultStatement(): FilterStatement {
createSeriesV2DefaultStatement(): FilterStatement<FilterField> {
return {
comparison: FilterComparison.Equal,
value: '',
field: FilterField.SeriesName
}
}
createPersonV2Filter(): FilterV2<PersonFilterField> {
return {
combination: FilterCombination.And,
statements: [],
limitTo: 0,
sortOptions: {
isAscending: true,
sortField: SortField.SortName
},
};
}
createPersonV2DefaultStatement(): FilterStatement<PersonFilterField> {
return {
comparison: FilterComparison.Equal,
value: '',
field: PersonFilterField.Name
}
}
}

63
UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.ts
View file

@ -1,43 +1,46 @@
import { DOCUMENT, NgStyle, NgIf, DecimalPipe } from '@angular/common';
import {DecimalPipe, DOCUMENT, NgStyle} from '@angular/common';
import {
AfterContentChecked,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
Component,
DestroyRef,
ElementRef,
EventEmitter,
HostListener,
inject,
Inject,
OnInit,
ViewChild
} from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';
import { take, debounceTime } from 'rxjs';
import { BulkSelectionService } from 'src/app/cards/bulk-selection.service';
import { FilterSettings } from 'src/app/metadata-filter/filter-settings';
import { FilterUtilitiesService } from 'src/app/shared/_services/filter-utilities.service';
import { UtilityService, KEY_CODES } from 'src/app/shared/_services/utility.service';
import { SeriesRemovedEvent } from 'src/app/_models/events/series-removed-event';
import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
import { Pagination } from 'src/app/_models/pagination';
import { Series } from 'src/app/_models/series';
import { FilterEvent } from 'src/app/_models/metadata/series-filter';
import { Action, ActionItem } from 'src/app/_services/action-factory.service';
import { ActionService } from 'src/app/_services/action.service';
import { ImageService } from 'src/app/_services/image.service';
import { JumpbarService } from 'src/app/_services/jumpbar.service';
import { MessageHubService, EVENTS } from 'src/app/_services/message-hub.service';
import { ScrollService } from 'src/app/_services/scroll.service';
import { SeriesService } from 'src/app/_services/series.service';
import {Title} from '@angular/platform-browser';
import {ActivatedRoute, Router} from '@angular/router';
import {debounceTime, take} from 'rxjs';
import {BulkSelectionService} from 'src/app/cards/bulk-selection.service';
import {FilterSettings} from 'src/app/metadata-filter/filter-settings';
import {FilterUtilitiesService} from 'src/app/shared/_services/filter-utilities.service';
import {UtilityService} from 'src/app/shared/_services/utility.service';
import {SeriesRemovedEvent} from 'src/app/_models/events/series-removed-event';
import {JumpKey} from 'src/app/_models/jumpbar/jump-key';
import {Pagination} from 'src/app/_models/pagination';
import {Series} from 'src/app/_models/series';
import {FilterEvent} from 'src/app/_models/metadata/series-filter';
import {Action, ActionItem} from 'src/app/_services/action-factory.service';
import {ActionService} from 'src/app/_services/action.service';
import {ImageService} from 'src/app/_services/image.service';
import {JumpbarService} from 'src/app/_services/jumpbar.service';
import {EVENTS, MessageHubService} from 'src/app/_services/message-hub.service';
import {ScrollService} from 'src/app/_services/scroll.service';
import {SeriesService} from 'src/app/_services/series.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { SeriesCardComponent } from '../../../cards/series-card/series-card.component';
import { CardDetailLayoutComponent } from '../../../cards/card-detail-layout/card-detail-layout.component';
import { BulkOperationsComponent } from '../../../cards/bulk-operations/bulk-operations.component';
import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {SeriesCardComponent} from '../../../cards/series-card/series-card.component';
import {CardDetailLayoutComponent} from '../../../cards/card-detail-layout/card-detail-layout.component';
import {BulkOperationsComponent} from '../../../cards/bulk-operations/bulk-operations.component';
import {
SideNavCompanionBarComponent
} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {SeriesFilterV2} from "../../../_models/metadata/v2/series-filter-v2";
import {FilterV2} from "../../../_models/metadata/v2/filter-v2";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
@Component({
@ -56,11 +59,11 @@ export class WantToReadComponent implements OnInit, AfterContentChecked {
isLoading: boolean = true;
series: Array<Series> = [];
pagination: Pagination = new Pagination();
filter: SeriesFilterV2 | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings();
filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings<FilterField> = new FilterSettings();
refresh: EventEmitter<void> = new EventEmitter();
filterActiveCheck!: SeriesFilterV2;
filterActiveCheck!: FilterV2<FilterField>;
filterActive: boolean = false;
jumpbarKeys: Array<JumpKey> = [];