Filtering Overhaul (#2207)

* Implemented the first version of dynamic filtering which is all Extension based.

* Implemented basic generic property filter for expanded metadata filtering.

* Fixed up the code to allow for nested properties and fixed up the Contains to work only for IList's

* Started refactoring for the new approach

* More progress, need to rethink a few filters like read progress to be % based and people needs to be more explicit.

* Refactored most of the existing filtering operations into dedicate extensions for the appropriate comparisons. People still need to be reworked to be more dynamic.

* Fixed a bug with continue point where it fails on chapters or volumes tagged with a range

* Wired up a basic api path to start building groups. No and/or support yet.

* Started on the UI

* Made a bit of progress on the UI as I'm putting the pieces together about how to design it.

* Refactored names to make it more consistent. New thinking is we will have one row that will take a filter statement and manipulate it. It will emit said statement and a builder will turn into the higher level statement.

* Started working on updating code to use new inject() method.

* Fixed the code to switch the comparisons.

* Added dynamic input structure in and moved add/remove to the builder.

* Fixed an enum bug

* Hooked in basic dropdown support that is dynamic to the field. Only language is missing as that needs a DTO change (but don't want to break API)

* Fixed a bug where dropdown options wouldn't re-populate when switching fields that are both dropdowns

* Started adding metadata builder

* Fixed when typing on filter row the focus resetting

* Refactored to add an additional component which handles the compounding of filter rows.

* Started hooking up v2 dto in the UI to send to the backend.

* Started working on building group UI for and/or support.

* Lots of backend code fixes to ensure OR and AND statements combine correctly.

* More trying to figure out how to write the UI code

* Started debugging to remember what I was last doing.

* Lots of progress towards building out the UI recursively

* I got the dto to build and propagate up the chain

* Started hooking up to the actual api to fetch the data.

* Basic wire up to the backend is working.

* HasName is now complete

* Refactored SortOptions code into an extension and streamlined LimitTo to the correct place.

* Fixed a bug where Library Filters from the Group weren't actually being taken into account.

* Refactored a lot of code so builder will now export the full dto.

* Cleaned up the data flow from metadata filter to library detail

* Got the dropdown to load preset values on first load, but now it triggers twice.

* Changed so when you add a new filter, it does it at top and fixed remove

* Fixed the remove button being on the wrong row

* Cleaned up the arrays to make it easier to manage

* Cleaned up some of the backend to ensure it doesn't throw an incorrect exception

* I'm starting to tread water, taking a break

* Fixed a merge issue

* Cleaned up Docker checks.

* Default IpAddresses to empty string.

* Refactored IsDocker to be completely static

* Figured out the issue with the dropdown not working.

* Almost got it, but the event isn't being called.

* I think i might try something else. This doesn't seem to be working.

* On the new implementation, implemented remove group.

* Use enums to reduce copy/paste

* the new system is working pretty well, ill go with it and move on. Can alwasy refactor.

* Code is totally broken, but working the cache resume code with some hiccups.

* I need to take a break

* Stashing my broken code. I have an idea on how to serialize to the URL, but I need to rearchitect a lot.

* Reverted last commit

* remove domain

* Fixed up some hardcoded caching. I'm giving up on this implementation and going to a simpler version

* Refactored the backend to just allow flat filtering.

* Started refactoring the components to make it flat filtering only.

* Finished refactoring so that the base preset case will render.

* Implemented basic query functionality on desktop. Clear needs some work and url code.

* Some cleanup

* Working on filtering url encode/decode

* Interacting with filters now saves to url and can be reloaded from the url. Named filters is not hooked up.

* Fixed a double load on the library detail page.

* Moved the library filtering code out of the FilterBuilder as it needs to be handled differently.

* Fixed up how we handle library statements in the filter.

* Fixed up how links that perform a filter work.

* Refactored a bunch of linking to a search page.

* LimitTo works, my css however does not.

* Switched some code to use localized strings.

* Cleaned up some css

* Hooked up Languages and put some additional code in so that Languages will return invalid Language codes back.

* Removed a duplicate language signature.

* Hooked up ability to preload collection tag.

* Want To Read is converted

* Converted lots of code to new filtering system. Need to do Bookmarks.

* Fixed a potential bug with default filter creation.

* Hooked up the ability to disable certain filter fields from appearing.

* Added mobile drawer code and a hook for Robbie to take a look for some css.

* Converted the APIs for dashboard along with other safety fixes to ensure bad data doesn't break any of the filtering apis

* Added the backend code to handle summary query

* Converted Want to Read api properly now.

* Fixed the HasReadingProgress query

* Hooked back the Reading Progress for legacy APIs

* Fixed some bad localization strings

* Wrote the filtering code for all-bookmarks.

* OPDS is now using the new filter

* Fixed OPDS reading lists and covers not sending their images.

* Fixed up the OPDS feed and fixed a bug where libraries also weren't sending their images over OPDS

* All but dropdown options have been validated and tested.

* Fixed up some default cases for setting up the filter.

* Sorted filter fields and re-keyed to be better suited based on user's needs.

Fixed a bug where OPDS Series (from library view) wasn't showing the summary.

Moved the (Format) from the title to the description to make the UX much better for OPDS.

MOved

* don't send empty summaries in the new summary formatting

* Fixed up some default cases for setting up the filter.

* Fixed the reset button

* Fixed infinite scroller not having correct scope key

* Added localization to the new components and removed old debug code

* Styling fixes

* Fixed deep linking across the app. Made it so you can click Characters from Reading list and open a filtered search.

* A bit of styling for mobile

* Don't show language if it's not properly set

---------

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2023-08-11 16:30:36 -05:00 committed by GitHub
parent bc2a12a9cd
commit 9cc5953d07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
102 changed files with 3299 additions and 1827 deletions

View file

@ -1,29 +1,31 @@
import {ChangeDetectionStrategy, Component, DestroyRef, HostListener, inject} from '@angular/core';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { map, Observable, ReplaySubject, shareReplay } from 'rxjs';
import { FilterQueryParam } from 'src/app/shared/_services/filter-utilities.service';
import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.service';
import { Series } from 'src/app/_models/series';
import { ImageService } from 'src/app/_services/image.service';
import { MetadataService } from 'src/app/_services/metadata.service';
import { StatisticsService } from 'src/app/_services/statistics.service';
import { PieDataItem } from '../../_models/pie-data-item';
import { ServerStatistics } from '../../_models/server-statistics';
import { GenericListModalComponent } from '../_modals/generic-list-modal/generic-list-modal.component';
import {Router} from '@angular/router';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {map, Observable, ReplaySubject, shareReplay} from 'rxjs';
import {FilterQueryParam, FilterUtilitiesService} from 'src/app/shared/_services/filter-utilities.service';
import {Breakpoint, UtilityService} from 'src/app/shared/_services/utility.service';
import {Series} from 'src/app/_models/series';
import {ImageService} from 'src/app/_services/image.service';
import {MetadataService} from 'src/app/_services/metadata.service';
import {StatisticsService} from 'src/app/_services/statistics.service';
import {PieDataItem} from '../../_models/pie-data-item';
import {ServerStatistics} from '../../_models/server-statistics';
import {GenericListModalComponent} from '../_modals/generic-list-modal/generic-list-modal.component';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { BytesPipe } from '../../../pipe/bytes.pipe';
import { TimeDurationPipe } from '../../../pipe/time-duration.pipe';
import { CompactNumberPipe } from '../../../pipe/compact-number.pipe';
import { DayBreakdownComponent } from '../day-breakdown/day-breakdown.component';
import { ReadingActivityComponent } from '../reading-activity/reading-activity.component';
import { PublicationStatusStatsComponent } from '../publication-status-stats/publication-status-stats.component';
import { FileBreakdownStatsComponent } from '../file-breakdown-stats/file-breakdown-stats.component';
import { TopReadersComponent } from '../top-readers/top-readers.component';
import { StatListComponent } from '../stat-list/stat-list.component';
import { IconAndTitleComponent } from '../../../shared/icon-and-title/icon-and-title.component';
import { NgIf, AsyncPipe, DecimalPipe } from '@angular/common';
import {BytesPipe} from '../../../pipe/bytes.pipe';
import {TimeDurationPipe} from '../../../pipe/time-duration.pipe';
import {CompactNumberPipe} from '../../../pipe/compact-number.pipe';
import {DayBreakdownComponent} from '../day-breakdown/day-breakdown.component';
import {ReadingActivityComponent} from '../reading-activity/reading-activity.component';
import {PublicationStatusStatsComponent} from '../publication-status-stats/publication-status-stats.component';
import {FileBreakdownStatsComponent} from '../file-breakdown-stats/file-breakdown-stats.component';
import {TopReadersComponent} from '../top-readers/top-readers.component';
import {StatListComponent} from '../stat-list/stat-list.component';
import {IconAndTitleComponent} from '../../../shared/icon-and-title/icon-and-title.component';
import {AsyncPipe, DecimalPipe, NgIf} from '@angular/common';
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
@Component({
selector: 'app-server-stats',
@ -65,7 +67,8 @@ export class ServerStatsComponent {
get Breakpoint() { return Breakpoint; }
constructor(private statService: StatisticsService, private router: Router, private imageService: ImageService,
private metadataService: MetadataService, private modalService: NgbModal, private utilityService: UtilityService) {
private metadataService: MetadataService, private modalService: NgbModal, private utilityService: UtilityService,
private filterUtilityService: FilterUtilitiesService) {
this.seriesImage = (data: PieDataItem) => {
if (data.extra) return this.imageService.getSeriesCoverImage(data.extra.id);
return '';
@ -114,10 +117,7 @@ export class ServerStatsComponent {
ref.componentInstance.items = genres.map(t => t.title);
ref.componentInstance.title = this.translocoService.translate('server-stats.genres');
ref.componentInstance.clicked = (item: string) => {
const params: any = {};
params[FilterQueryParam.Genres] = genres.filter(g => g.title === item)[0].id;
params[FilterQueryParam.Page] = 1;
this.router.navigate(['all-series'], {queryParams: params});
this.filterUtilityService.applyFilter(['all-series'], FilterField.Genres, FilterComparison.Contains, genres.filter(g => g.title === item)[0].id + '');
};
});
}
@ -128,10 +128,7 @@ export class ServerStatsComponent {
ref.componentInstance.items = tags.map(t => t.title);
ref.componentInstance.title = this.translocoService.translate('server-stats.tags');
ref.componentInstance.clicked = (item: string) => {
const params: any = {};
params[FilterQueryParam.Tags] = tags.filter(g => g.title === item)[0].id;
params[FilterQueryParam.Page] = 1;
this.router.navigate(['all-series'], {queryParams: params});
this.filterUtilityService.applyFilter(['all-series'], FilterField.Tags, FilterComparison.Contains, tags.filter(g => g.title === item)[0].id + '');
};
});
}

View file

@ -1,25 +1,17 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DestroyRef,
inject,
OnInit
} from '@angular/core';
import { map, Observable, shareReplay } from 'rxjs';
import { FilterUtilitiesService } from 'src/app/shared/_services/filter-utilities.service';
import { UserReadStatistics } from 'src/app/statistics/_models/user-read-statistics';
import { StatisticsService } from 'src/app/_services/statistics.service';
import { ReadHistoryEvent } from '../../_models/read-history-event';
import { MemberService } from 'src/app/_services/member.service';
import { AccountService } from 'src/app/_services/account.service';
import { PieDataItem } from '../../_models/pie-data-item';
import { LibraryService } from 'src/app/_services/library.service';
import { PercentPipe, NgIf, AsyncPipe } from '@angular/common';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core';
import {map, Observable, shareReplay} from 'rxjs';
import {UserReadStatistics} from 'src/app/statistics/_models/user-read-statistics';
import {StatisticsService} from 'src/app/_services/statistics.service';
import {ReadHistoryEvent} from '../../_models/read-history-event';
import {MemberService} from 'src/app/_services/member.service';
import {AccountService} from 'src/app/_services/account.service';
import {PieDataItem} from '../../_models/pie-data-item';
import {LibraryService} from 'src/app/_services/library.service';
import {AsyncPipe, NgIf, PercentPipe} from '@angular/common';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { StatListComponent } from '../stat-list/stat-list.component';
import { ReadingActivityComponent } from '../reading-activity/reading-activity.component';
import { UserStatsInfoCardsComponent } from '../user-stats-info-cards/user-stats-info-cards.component';
import {StatListComponent} from '../stat-list/stat-list.component';
import {ReadingActivityComponent} from '../reading-activity/reading-activity.component';
import {UserStatsInfoCardsComponent} from '../user-stats-info-cards/user-stats-info-cards.component';
import {TranslocoModule} from "@ngneat/transloco";
@Component({
@ -47,7 +39,7 @@ export class UserStatsComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
constructor(private readonly cdRef: ChangeDetectorRef, private statService: StatisticsService,
private filterService: FilterUtilitiesService, private accountService: AccountService, private memberService: MemberService,
private accountService: AccountService, private memberService: MemberService,
private libraryService: LibraryService) {
this.isAdmin$ = this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef), map(u => {
if (!u) return false;
@ -57,8 +49,6 @@ export class UserStatsComponent implements OnInit {
}
ngOnInit(): void {
const filter = this.filterService.createSeriesFilter();
filter.readStatus = {read: true, notRead: false, inProgress: true};
this.memberService.getMember().subscribe(me => {
this.userId = me.id;
this.cdRef.markForCheck();