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); 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> /// <summary>
/// Updates the Person /// Updates the Person
/// </summary> /// </summary>

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

@ -16,7 +16,7 @@ public sealed record FilterV2Dto
/// The name of the filter /// The name of the filter
/// </summary> /// </summary>
public string? Name { get; set; } 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 FilterCombination Combination { get; set; } = FilterCombination.And;
public SortOptions? SortOptions { get; set; } 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); return query.Where(s => false);
} }
// First setup any FilterField.Libraries in the statements, as these don't have any traditional query statements applied here // First setup any FilterField.Libraries in the statements, as these don't have any traditional query statements applied here
query = ApplyLibraryFilter(filter, query); 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 {MangaFormat} from "../manga-format";
import {SeriesFilterV2} from "./v2/series-filter-v2"; import {FilterV2} from "./v2/filter-v2";
export interface FilterItem<T> { export interface FilterItem<T> {
title: string; title: string;
@ -51,7 +51,7 @@ export const mangaFormatFilters = [
]; ];
export interface FilterEvent { export interface FilterEvent {
filterV2: SeriesFilterV2; filterV2: FilterV2<number>;
isFirst: boolean; isFirst: boolean;
} }

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

@ -1,8 +1,7 @@
import {FilterComparison} from "./filter-comparison"; import {FilterComparison} from "./filter-comparison";
import { FilterField } from "./filter-field";
export interface FilterStatement { export interface FilterStatement<T> {
comparison: FilterComparison; comparison: FilterComparison;
field: FilterField; field: T;
value: string; 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 {FilterCombination} from "./filter-combination";
import {SortOptions} from "./sort-options"; import {SortOptions} from "./sort-options";
export interface SeriesFilterV2 { export interface FilterV2<T> {
name?: string; name?: string;
statements: Array<FilterStatement>; statements: Array<FilterStatement<T>>;
combination: FilterCombination; combination: FilterCombination;
sortOptions?: SortOptions; sortOptions?: SortOptions;
limitTo: number; 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
}

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

@ -1,8 +1,7 @@
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2"; import {FilterV2} from "../_models/metadata/v2/filter-v2";
import {environment} from "../../environments/environment"; import {environment} from "../../environments/environment";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {JumpKey} from "../_models/jumpbar/jump-key";
import {SmartFilter} from "../_models/metadata/v2/smart-filter"; import {SmartFilter} from "../_models/metadata/v2/smart-filter";
@Injectable({ @Injectable({
@ -13,7 +12,7 @@ export class FilterService {
baseUrl = environment.apiUrl; baseUrl = environment.apiUrl;
constructor(private httpClient: HttpClient) { } constructor(private httpClient: HttpClient) { }
saveFilter(filter: SeriesFilterV2) { saveFilter(filter: FilterV2<number>) {
return this.httpClient.post(this.baseUrl + 'filter/update', filter); return this.httpClient.post(this.baseUrl + 'filter/update', filter);
} }
getAllFilters() { 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 {FilterField} from '../_models/metadata/v2/filter-field';
import {mangaFormatFilters, SortField} from "../_models/metadata/series-filter"; import {mangaFormatFilters, SortField} from "../_models/metadata/series-filter";
import {FilterCombination} from "../_models/metadata/v2/filter-combination"; 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 {FilterStatement} from "../_models/metadata/v2/filter-statement";
import {SeriesDetailPlus} from "../_models/series-detail/series-detail-plus"; import {SeriesDetailPlus} from "../_models/series-detail/series-detail-plus";
import {LibraryType} from "../_models/library/library"; 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); return this.httpClient.get<Array<Person>>(this.baseUrl + 'metadata/people-by-role?role=' + role);
} }
createDefaultFilterDto(): SeriesFilterV2 { createDefaultFilterDto(): FilterV2<FilterField> {
return { return {
statements: [] as FilterStatement[], statements: [] as FilterStatement<FilterField>[],
combination: FilterCombination.And, combination: FilterCombination.And,
limitTo: 0, limitTo: 0,
sortOptions: { 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].comparison = filterStmt.comparison;
arr[index].field = filterStmt.field; arr[index].field = filterStmt.field;
arr[index].value = filterStmt.value ? filterStmt.value + '' : ''; 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 {AccountService} from './account.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {PersonalToC} from "../_models/readers/personal-toc"; 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 NoSleep from 'nosleep.js';
import {FullProgress} from "../_models/readers/full-progress"; import {FullProgress} from "../_models/readers/full-progress";
import {Volume} from "../_models/volume"; import {Volume} from "../_models/volume";
import {UtilityService} from "../shared/_services/utility.service"; import {UtilityService} from "../shared/_services/utility.service";
import {translate} from "@jsverse/transloco"; import {translate} from "@jsverse/transloco";
import {ToastrService} from "ngx-toastr"; import {ToastrService} from "ngx-toastr";
import {FilterField} from "../_models/metadata/v2/filter-field";
export const CHAPTER_ID_DOESNT_EXIST = -1; 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}); 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); return this.httpClient.post<PageBookmark[]>(this.baseUrl + 'reader/all-bookmarks', filter);
} }

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

@ -12,17 +12,15 @@ import { SeriesDetail } from '../_models/series-detail/series-detail';
import {SeriesGroup} from '../_models/series-group'; import {SeriesGroup} from '../_models/series-group';
import {SeriesMetadata} from '../_models/metadata/series-metadata'; import {SeriesMetadata} from '../_models/metadata/series-metadata';
import {Volume} from '../_models/volume'; import {Volume} from '../_models/volume';
import { ImageService } from './image.service';
import {TextResonse} from '../_types/text-response'; import {TextResonse} from '../_types/text-response';
import { SeriesFilterV2 } from '../_models/metadata/v2/series-filter-v2'; import {FilterV2} from '../_models/metadata/v2/filter-v2';
import {UserReview} from "../_single-module/review-card/user-review";
import {Rating} from "../_models/rating"; import {Rating} from "../_models/rating";
import {Recommendation} from "../_models/series-detail/recommendation"; import {Recommendation} from "../_models/series-detail/recommendation";
import {ExternalSeriesDetail} from "../_models/series-detail/external-series-detail"; import {ExternalSeriesDetail} from "../_models/series-detail/external-series-detail";
import {NextExpectedChapter} from "../_models/series-detail/next-expected-chapter"; import {NextExpectedChapter} from "../_models/series-detail/next-expected-chapter";
import {QueryContext} from "../_models/metadata/v2/query-context"; 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 {ExternalSeriesMatch} from "../_models/series-detail/external-series-match";
import {FilterField} from "../_models/metadata/v2/filter-field";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -33,10 +31,9 @@ export class SeriesService {
paginatedResults: PaginatedResult<Series[]> = new PaginatedResult<Series[]>(); paginatedResults: PaginatedResult<Series[]> = new PaginatedResult<Series[]>();
paginatedSeriesForTagsResults: PaginatedResult<Series[]> = new PaginatedResult<Series[]>(); paginatedSeriesForTagsResults: PaginatedResult<Series[]> = new PaginatedResult<Series[]>();
constructor(private httpClient: HttpClient, private imageService: ImageService, constructor(private httpClient: HttpClient, private utilityService: UtilityService) { }
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(); let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage); params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {}; 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(); let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage); params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {}; const data = filter || {};
@ -100,7 +97,7 @@ export class SeriesService {
return this.httpClient.post<void>(this.baseUrl + 'reader/mark-unread', {seriesId}); 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(); let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage); 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', {}); 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(); let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage); params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {}; 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(); let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage); params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {}; 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 <app-card-detail-layout
[isLoading]="loadingSeries" [isLoading]="loadingSeries"
[items]="series" [items]="series"
[trackByIdentity]="trackByIdentity"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen" [filterOpen]="filterOpen"
[jumpBarKeys]="jumpbarKeys" [jumpBarKeys]="jumpbarKeys"
[trackByIdentity]="trackByIdentity"
[filterSettings]="filterSettings"
(applyFilter)="updateFilter($event)" (applyFilter)="updateFilter($event)"
> >
<ng-template #cardItem let-item let-position="idx"> <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 SideNavCompanionBarComponent
} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component'; } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {translate, TranslocoDirective} from "@jsverse/transloco"; 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 {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
import {BrowseTitlePipe} from "../../../_pipes/browse-title.pipe"; import {BrowseTitlePipe} from "../../../_pipes/browse-title.pipe";
import {MetadataService} from "../../../_services/metadata.service"; import {MetadataService} from "../../../_services/metadata.service";
import {Observable} from "rxjs"; import {Observable} from "rxjs";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
@Component({ @Component({
@ -67,10 +68,10 @@ export class AllSeriesComponent implements OnInit {
series: Series[] = []; series: Series[] = [];
loadingSeries = false; loadingSeries = false;
pagination: Pagination = new Pagination(); pagination: Pagination = new Pagination();
filter: SeriesFilterV2 | undefined = undefined; filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings(); filterSettings: FilterSettings<FilterField> = new FilterSettings();
filterOpen: EventEmitter<boolean> = new EventEmitter(); filterOpen: EventEmitter<boolean> = new EventEmitter();
filterActiveCheck!: SeriesFilterV2; filterActiveCheck!: FilterV2<FilterField>;
filterActive: boolean = false; filterActive: boolean = false;
jumpbarKeys: Array<JumpKey> = []; jumpbarKeys: Array<JumpKey> = [];
browseTitlePipe = new BrowseTitlePipe(); browseTitlePipe = new BrowseTitlePipe();
@ -132,12 +133,12 @@ export class AllSeriesComponent implements OnInit {
this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => { this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
this.filter = 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); 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}" // 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()) { 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 api returns value as string and number, it will complain without the casting
(this.metadataService.getOptionsForFilterField(field) as Observable<any>).subscribe((opts: any[]) => { (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 SideNavCompanionBarComponent
} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component'; } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco"; 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 {Title} from "@angular/platform-browser";
import {WikiLink} from "../../../_models/wiki"; import {WikiLink} from "../../../_models/wiki";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
@Component({ @Component({
selector: 'app-bookmarks', selector: 'app-bookmarks',
@ -63,11 +64,11 @@ export class BookmarksComponent implements OnInit {
jumpbarKeys: Array<JumpKey> = []; jumpbarKeys: Array<JumpKey> = [];
pagination: Pagination = new Pagination(); pagination: Pagination = new Pagination();
filter: SeriesFilterV2 | undefined = undefined; filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings(); filterSettings: FilterSettings<FilterField> = new FilterSettings();
filterOpen: EventEmitter<boolean> = new EventEmitter(); filterOpen: EventEmitter<boolean> = new EventEmitter();
filterActive: boolean = false; filterActive: boolean = false;
filterActiveCheck!: SeriesFilterV2; filterActiveCheck!: FilterV2<FilterField>;
trackByIdentity = (index: number, item: Series) => `${item.name}_${item.localizedName}_${item.pagesRead}`; trackByIdentity = (index: number, item: Series) => `${item.name}_${item.localizedName}_${item.pagesRead}`;
refresh: EventEmitter<void> = new EventEmitter(); 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"> <div class="main-container container-fluid">
<ng-container *transloco="let t; read:'browse-authors'" > <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> <h2 title>
<span>{{t('title')}}</span> <span>{{t('title')}}</span>
</h2> </h2>
@ -55,6 +55,8 @@
[filteringDisabled]="true" [filteringDisabled]="true"
[customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name" [customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name"
[refresh]="refresh" [refresh]="refresh"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
> >
<ng-template #cardItem let-item let-position="idx"> <ng-template #cardItem let-item let-position="idx">
<app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)"> <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 {Series} from "../../_models/series";
import {Pagination} from "../../_models/pagination"; import {Pagination} from "../../_models/pagination";
import {JumpKey} from "../../_models/jumpbar/jump-key"; 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 {PersonService} from "../../_services/person.service";
import {BrowsePerson} from "../../_models/metadata/browse/browse-person"; import {BrowsePerson} from "../../_models/metadata/browse/browse-person";
import {JumpbarService} from "../../_services/jumpbar.service"; 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 {SortButtonComponent} from "../../_single-module/sort-button/sort-button.component";
import {PersonSortField} from "../../_models/metadata/v2/person-sort-field"; import {PersonSortField} from "../../_models/metadata/v2/person-sort-field";
import {PersonSortOptions} from "../../_models/metadata/v2/sort-options"; 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({ @Component({
@ -59,6 +63,8 @@ export class BrowseAuthorsComponent implements OnInit {
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly personService = inject(PersonService); private readonly personService = inject(PersonService);
private readonly jumpbarService = inject(JumpbarService); private readonly jumpbarService = inject(JumpbarService);
private readonly route = inject(ActivatedRoute);
private readonly filterUtilityService = inject(FilterUtilitiesService);
protected readonly imageService = inject(ImageService); protected readonly imageService = inject(ImageService);
@ -77,12 +83,30 @@ export class BrowseAuthorsComponent implements OnInit {
query: new FormControl('', []), query: new FormControl('', []),
}); });
isAscending: boolean = true; 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() { ngOnInit() {
this.isLoading = true; this.isLoading = true;
this.cdRef.markForCheck(); 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( this.filterGroup.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef), takeUntilDestroyed(this.destroyRef),
debounceTime(200), debounceTime(200),

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

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

26
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 {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.component";
import {TranslocoDirective} from "@jsverse/transloco"; import {TranslocoDirective} from "@jsverse/transloco";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component"; 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 {filter, map} from "rxjs/operators";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {tap} from "rxjs"; import {tap} from "rxjs";
import {FilterV2} from "../../_models/metadata/v2/filter-v2";
const ANIMATION_TIME_MS = 0; 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({ @Component({
selector: 'app-card-detail-layout', selector: 'app-card-detail-layout',
imports: [LoadingComponent, VirtualScrollerModule, CardActionablesComponent, MetadataFilterComponent, 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 * A trackBy to help with rendering. This is required as without it there are issues when scrolling
*/ */
@Input({required: true}) trackByIdentity!: TrackByFunction<any>; @Input({required: true}) trackByIdentity!: TrackByFunction<any>;
@Input() filterSettings!: FilterSettings; @Input() filterSettings!: FilterSettings<number>;
@Input() refresh!: EventEmitter<void>; @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 * 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; @ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent;
filter: SeriesFilterV2 = this.filterUtilityService.createSeriesV2Filter();
libraries: Array<FilterItem<Library>> = []; libraries: Array<FilterItem<Library>> = [];
updateApplied: number = 0; updateApplied: number = 0;
@ -128,6 +144,10 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
if (this.trackByIdentity === undefined) { if (this.trackByIdentity === undefined) {
this.trackByIdentity = (_: number, item: any) => `${this.header}_${this.updateApplied}_${item?.libraryId}`; 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) { if (this.filterSettings === undefined) {
this.filterSettings = new FilterSettings(); this.filterSettings = new FilterSettings();

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

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

@ -37,7 +37,7 @@ import {
SideNavCompanionBarComponent SideNavCompanionBarComponent
} from '../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component'; } from '../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {TranslocoDirective} from "@jsverse/transloco"; 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 {FilterComparison} from "../_models/metadata/v2/filter-comparison";
import {FilterField} from "../_models/metadata/v2/filter-field"; import {FilterField} from "../_models/metadata/v2/filter-field";
import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component"; import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component";
@ -75,11 +75,11 @@ export class LibraryDetailComponent implements OnInit {
loadingSeries = false; loadingSeries = false;
pagination: Pagination = {currentPage: 0, totalPages: 0, totalItems: 0, itemsPerPage: 0}; pagination: Pagination = {currentPage: 0, totalPages: 0, totalItems: 0, itemsPerPage: 0};
actions: ActionItem<Library>[] = []; actions: ActionItem<Library>[] = [];
filter: SeriesFilterV2 | undefined = undefined; filter: FilterV2<FilterField> | undefined = undefined;
filterSettings: FilterSettings = new FilterSettings(); filterSettings: FilterSettings<FilterField> = new FilterSettings();
filterOpen: EventEmitter<boolean> = new EventEmitter(); filterOpen: EventEmitter<boolean> = new EventEmitter();
filterActive: boolean = false; filterActive: boolean = false;
filterActiveCheck!: SeriesFilterV2; filterActiveCheck!: FilterV2<FilterField>;
refresh: EventEmitter<void> = new EventEmitter(); refresh: EventEmitter<void> = new EventEmitter();
jumpKeys: Array<JumpKey> = []; jumpKeys: Array<JumpKey> = [];
bulkLoader: boolean = false; bulkLoader: boolean = false;
@ -185,7 +185,7 @@ export class LibraryDetailComponent implements OnInit {
this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this)); this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => { 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) { 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}); 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'; } from '@angular/core';
import {MetadataService} from 'src/app/_services/metadata.service'; import {MetadataService} from 'src/app/_services/metadata.service';
import {Breakpoint, UtilityService} from 'src/app/shared/_services/utility.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 {MetadataFilterRowComponent} from "../metadata-filter-row/metadata-filter-row.component";
import {FilterStatement} from "../../../_models/metadata/v2/filter-statement"; import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
@ -38,13 +38,13 @@ import {translate, TranslocoDirective} from "@jsverse/transloco";
}) })
export class MetadataBuilderComponent implements OnInit { 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. * The number of statements that can be. 0 means unlimited. -1 means none.
*/ */
@Input() statementLimit = 0; @Input() statementLimit = 0;
@Input() availableFilterFields = allFields; @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>(); @Output() apply: EventEmitter<void> = new EventEmitter<void>();
private readonly cdRef = inject(ChangeDetectorRef); private readonly cdRef = inject(ChangeDetectorRef);
@ -79,7 +79,7 @@ export class MetadataBuilderComponent implements OnInit {
this.cdRef.markForCheck(); this.cdRef.markForCheck();
} }
updateFilter(index: number, filterStmt: FilterStatement) { updateFilter(index: number, filterStmt: FilterStatement<number>) {
this.metadataService.updateFilter(this.filter.statements, index, filterStmt); this.metadataService.updateFilter(this.filter.statements, index, filterStmt);
this.update.emit(this.filter); 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 {FilterStatement} from '../../../_models/metadata/v2/filter-statement';
import {BehaviorSubject, distinctUntilChanged, filter, Observable, of, startWith, switchMap, tap} from 'rxjs'; import {BehaviorSubject, distinctUntilChanged, filter, Observable, of, startWith, switchMap, tap} from 'rxjs';
import {MetadataService} from 'src/app/_services/metadata.service'; 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 {FilterComparison} from 'src/app/_models/metadata/v2/filter-comparison';
import {allFields, FilterField} from 'src/app/_models/metadata/v2/filter-field'; import {allFields, FilterField} from 'src/app/_models/metadata/v2/filter-field';
import {AsyncPipe} from "@angular/common"; import {AsyncPipe} from "@angular/common";
@ -142,8 +140,6 @@ export class MetadataFilterRowComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);
private readonly dateParser = inject(NgbDateParserFormatter); private readonly dateParser = inject(NgbDateParserFormatter);
private readonly metadataService = inject(MetadataService); private readonly metadataService = inject(MetadataService);
private readonly libraryService = inject(LibraryService);
private readonly collectionTagService = inject(CollectionTagService);
private readonly translocoService = inject(TranslocoService); 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 * 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; @Input() availableFields: Array<FilterField> = allFields;
@Output() filterStatement = new EventEmitter<FilterStatement>(); @Output() filterStatement = new EventEmitter<FilterStatement<number>>();
formGroup: FormGroup = new FormGroup({ 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; sortDisabled = false;
presetsV2: SeriesFilterV2 | undefined;
/** /**
* The number of statements that can be on the filter. Set to 1 to disable adding more. * 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 {allSortFields, FilterEvent, FilterItem, SortField} from '../_models/metadata/series-filter';
import {ToggleService} from '../_services/toggle.service'; import {ToggleService} from '../_services/toggle.service';
import {FilterSettings} from './filter-settings'; 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 {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {DrawerComponent} from '../shared/drawer/drawer.component'; import {DrawerComponent} from '../shared/drawer/drawer.component';
import {AsyncPipe, NgClass, NgTemplateOutlet} from '@angular/common'; import {AsyncPipe, NgClass, NgTemplateOutlet} from '@angular/common';
import {translate, TranslocoModule, TranslocoService} from "@jsverse/transloco"; import {translate, TranslocoModule, TranslocoService} from "@jsverse/transloco";
import {SortFieldPipe} from "../_pipes/sort-field.pipe"; import {SortFieldPipe} from "../_pipes/sort-field.pipe";
import {MetadataBuilderComponent} from "./_components/metadata-builder/metadata-builder.component"; 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 {FilterService} from "../_services/filter.service";
import {ToastrService} from "ngx-toastr"; import {ToastrService} from "ngx-toastr";
import {animate, style, transition, trigger} from "@angular/animations"; 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] MetadataBuilderComponent, NgClass, SortButtonComponent]
}) })
export class MetadataFilterComponent implements OnInit { export class MetadataFilterComponent implements OnInit {
protected readonly allFilterFields = allFields;
private readonly destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);
public readonly utilityService = inject(UtilityService); public readonly utilityService = inject(UtilityService);
@ -65,7 +66,7 @@ export class MetadataFilterComponent implements OnInit {
protected readonly allSortFields = allSortFields.map(f => { protected readonly allSortFields = allSortFields.map(f => {
return {title: this.sortFieldPipe.transform(f), value: f}; return {title: this.sortFieldPipe.transform(f), value: f};
}).sort((a, b) => a.title.localeCompare(b.title)); }).sort((a, b) => a.title.localeCompare(b.title));
protected readonly allFilterFields = allFields;
/** /**
* This toggles the opening/collapsing of the metadata filter code * 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 * Should filtering be shown on the page
*/ */
@Input() filteringDisabled: boolean = false; @Input() filteringDisabled: boolean = false;
@Input({required: true}) filterSettings!: FilterSettings; @Input({required: true}) filterSettings!: FilterSettings<FilterField>;
@Output() applyFilter: EventEmitter<FilterEvent> = new EventEmitter(); @Output() applyFilter: EventEmitter<FilterEvent> = new EventEmitter();
@ContentChild('[ngbCollapse]') collapse!: NgbCollapse; @ContentChild('[ngbCollapse]') collapse!: NgbCollapse;
@ -92,7 +93,7 @@ export class MetadataFilterComponent implements OnInit {
updateApplied: number = 0; updateApplied: number = 0;
fullyLoaded: boolean = false; fullyLoaded: boolean = false;
filterV2: SeriesFilterV2 | undefined; filterV2: FilterV2<FilterField> | undefined;
@ -148,7 +149,7 @@ export class MetadataFilterComponent implements OnInit {
return clonedObj; return clonedObj;
} }
handleFilters(filter: SeriesFilterV2) { handleFilters(filter: FilterV2<FilterField>) {
this.filterV2 = filter; 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 = {}; let params: any = {};
const filter = this.filterUtilityService.createSeriesV2Filter(); const filter = this.filterUtilityService.createSeriesV2Filter();
filter.statements = [statement]; 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 {CarouselReelComponent} from "../carousel/_components/carousel-reel/carousel-reel.component";
import {FilterComparison} from "../_models/metadata/v2/filter-comparison"; import {FilterComparison} from "../_models/metadata/v2/filter-comparison";
import {FilterUtilitiesService} from "../shared/_services/filter-utilities.service"; 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 {allPeople, FilterField, personRoleForFilterField} from "../_models/metadata/v2/filter-field";
import {Series} from "../_models/series"; import {Series} from "../_models/series";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
@ -98,7 +98,7 @@ export class PersonDetailComponent implements OnInit {
roles$: Observable<PersonRole[]> | null = null; roles$: Observable<PersonRole[]> | null = null;
roles: PersonRole[] | null = null; roles: PersonRole[] | null = null;
works$: Observable<Series[]> | 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)); personActions: Array<ActionItem<Person>> = this.actionService.getPersonActions(this.handleAction.bind(this));
chaptersByRole: any = {}; chaptersByRole: any = {};
anilistUrl: string = ''; anilistUrl: string = '';
@ -181,7 +181,7 @@ export class PersonDetailComponent implements OnInit {
} }
createFilter(roles: PersonRole[]) { createFilter(roles: PersonRole[]) {
const filter: SeriesFilterV2 = this.filterUtilityService.createSeriesV2Filter(); const filter = this.filterUtilityService.createSeriesV2Filter();
filter.combination = FilterCombination.Or; filter.combination = FilterCombination.Or;
filter.limitTo = 20; 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 {ActivatedRouteSnapshot, Params, Router} from '@angular/router';
import {SortField} from 'src/app/_models/metadata/series-filter'; import {SortField} from 'src/app/_models/metadata/series-filter';
import {MetadataService} from "../../_services/metadata.service"; 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 {FilterStatement} from "../../_models/metadata/v2/filter-statement";
import {FilterCombination} from "../../_models/metadata/v2/filter-combination"; import {FilterCombination} from "../../_models/metadata/v2/filter-combination";
import {FilterField} from "../../_models/metadata/v2/filter-field"; 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 {TextResonse} from "../../_types/text-response";
import {environment} from "../../../environments/environment"; import {environment} from "../../../environments/environment";
import {map, tap} from "rxjs/operators"; import {map, tap} from "rxjs/operators";
import {of, switchMap} from "rxjs"; import {Observable, of, switchMap} from "rxjs";
import {Location} from "@angular/common"; import {Location} from "@angular/common";
import {PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
@Injectable({ @Injectable({
@ -27,12 +28,12 @@ export class FilterUtilitiesService {
private apiUrl = environment.apiUrl; private apiUrl = environment.apiUrl;
encodeFilter(filter: SeriesFilterV2 | undefined) { encodeFilter(filter: FilterV2<number> | undefined) {
return this.http.post<string>(this.apiUrl + 'filter/encode', filter, TextResonse); return this.http.post<string>(this.apiUrl + 'filter/encode', filter, TextResonse);
} }
decodeFilter(encodedFilter: string) { 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) { if (filter == null) {
filter = this.metadataService.createDefaultFilterDto(); filter = this.metadataService.createDefaultFilterDto();
filter.statements.push(this.createSeriesV2DefaultStatement()); 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 => { return this.encodeFilter(filter).pipe(tap(encodedFilter => {
window.history.replaceState(window.location.href, '', window.location.href.split('?')[0]+ '?' + 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(); const filter = this.metadataService.createDefaultFilterDto();
filter.statements.push(this.createSeriesV2DefaultStatement()); filter.statements.push(this.createSeriesV2DefaultStatement());
if (!window.location.href.includes('?')) return of(filter); 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 => { return this.encodeFilter(filter).pipe(switchMap(encodedFilter => {
let url = page.join('/') + '?' + encodedFilter; let url = page.join('/') + '?' + encodedFilter;
url += Object.keys(extraParams).map(k => `&${k}=${extraParams[k]}`).join(''); url += Object.keys(extraParams).map(k => `&${k}=${extraParams[k]}`).join('');
@ -81,7 +82,7 @@ export class FilterUtilitiesService {
})); }));
} }
createSeriesV2Filter(): SeriesFilterV2 { createSeriesV2Filter(): FilterV2<FilterField> {
return { return {
combination: FilterCombination.And, combination: FilterCombination.And,
statements: [], statements: [],
@ -93,11 +94,31 @@ export class FilterUtilitiesService {
}; };
} }
createSeriesV2DefaultStatement(): FilterStatement { createSeriesV2DefaultStatement(): FilterStatement<FilterField> {
return { return {
comparison: FilterComparison.Equal, comparison: FilterComparison.Equal,
value: '', value: '',
field: FilterField.SeriesName 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
}
}
} }

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

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