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
GitHub
parent
bc2a12a9cd
commit
9cc5953d07
102 changed files with 3299 additions and 1827 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<ng-container *transloco="let t">
|
||||
<app-side-nav-companion-bar [hasFilter]="true" [filterOpenByDefault]="filterSettings.openByDefault" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
|
||||
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
|
||||
<h2 title>
|
||||
<app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables>
|
||||
<span>{{libraryName}}</span>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,50 @@
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component, DestroyRef,
|
||||
Component,
|
||||
DestroyRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
inject,
|
||||
OnInit
|
||||
} from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { take } from 'rxjs/operators';
|
||||
import { BulkSelectionService } from '../cards/bulk-selection.service';
|
||||
import { KEY_CODES, UtilityService } from '../shared/_services/utility.service';
|
||||
import { SeriesAddedEvent } from '../_models/events/series-added-event';
|
||||
import { Library } from '../_models/library';
|
||||
import { Pagination } from '../_models/pagination';
|
||||
import { Series } from '../_models/series';
|
||||
import { FilterEvent, SeriesFilter } from '../_models/metadata/series-filter';
|
||||
import { Action, ActionFactoryService, ActionItem } from '../_services/action-factory.service';
|
||||
import { ActionService } from '../_services/action.service';
|
||||
import { LibraryService } from '../_services/library.service';
|
||||
import { EVENTS, MessageHubService } from '../_services/message-hub.service';
|
||||
import { SeriesService } from '../_services/series.service';
|
||||
import { NavService } from '../_services/nav.service';
|
||||
import { FilterUtilitiesService } from '../shared/_services/filter-utilities.service';
|
||||
import { FilterSettings } from '../metadata-filter/filter-settings';
|
||||
import { JumpKey } from '../_models/jumpbar/jump-key';
|
||||
import { SeriesRemovedEvent } from '../_models/events/series-removed-event';
|
||||
import {Title} from '@angular/platform-browser';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {take} from 'rxjs/operators';
|
||||
import {BulkSelectionService} from '../cards/bulk-selection.service';
|
||||
import {KEY_CODES, UtilityService} from '../shared/_services/utility.service';
|
||||
import {SeriesAddedEvent} from '../_models/events/series-added-event';
|
||||
import {Library} from '../_models/library';
|
||||
import {Pagination} from '../_models/pagination';
|
||||
import {Series} from '../_models/series';
|
||||
import {FilterEvent} from '../_models/metadata/series-filter';
|
||||
import {Action, ActionFactoryService, ActionItem} from '../_services/action-factory.service';
|
||||
import {ActionService} from '../_services/action.service';
|
||||
import {LibraryService} from '../_services/library.service';
|
||||
import {EVENTS, MessageHubService} from '../_services/message-hub.service';
|
||||
import {SeriesService} from '../_services/series.service';
|
||||
import {NavService} from '../_services/nav.service';
|
||||
import {FilterUtilitiesService} from '../shared/_services/filter-utilities.service';
|
||||
import {FilterSettings} from '../metadata-filter/filter-settings';
|
||||
import {JumpKey} from '../_models/jumpbar/jump-key';
|
||||
import {SeriesRemovedEvent} from '../_models/events/series-removed-event';
|
||||
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
||||
import { SentenceCasePipe } from '../pipe/sentence-case.pipe';
|
||||
import { BulkOperationsComponent } from '../cards/bulk-operations/bulk-operations.component';
|
||||
import { SeriesCardComponent } from '../cards/series-card/series-card.component';
|
||||
import { CardDetailLayoutComponent } from '../cards/card-detail-layout/card-detail-layout.component';
|
||||
import { LibraryRecommendedComponent } from './library-recommended/library-recommended.component';
|
||||
import { NgFor, NgIf, DecimalPipe } from '@angular/common';
|
||||
import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLink, NgbNavContent, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { CardActionablesComponent } from '../cards/card-item/card-actionables/card-actionables.component';
|
||||
import { SideNavCompanionBarComponent } from '../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
|
||||
import {SentenceCasePipe} from '../pipe/sentence-case.pipe';
|
||||
import {BulkOperationsComponent} from '../cards/bulk-operations/bulk-operations.component';
|
||||
import {SeriesCardComponent} from '../cards/series-card/series-card.component';
|
||||
import {CardDetailLayoutComponent} from '../cards/card-detail-layout/card-detail-layout.component';
|
||||
import {LibraryRecommendedComponent} from './library-recommended/library-recommended.component';
|
||||
import {DecimalPipe, NgFor, NgIf} from '@angular/common';
|
||||
import {NgbNav, NgbNavContent, NgbNavItem, NgbNavItemRole, NgbNavLink, NgbNavOutlet} from '@ng-bootstrap/ng-bootstrap';
|
||||
import {
|
||||
SideNavCompanionBarComponent
|
||||
} from '../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
|
||||
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
||||
import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
|
||||
import {MetadataService} from "../_services/metadata.service";
|
||||
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";
|
||||
|
||||
@Component({
|
||||
selector: 'app-library-detail',
|
||||
|
|
@ -55,11 +62,11 @@ export class LibraryDetailComponent implements OnInit {
|
|||
loadingSeries = false;
|
||||
pagination!: Pagination;
|
||||
actions: ActionItem<Library>[] = [];
|
||||
filter: SeriesFilter | undefined = undefined;
|
||||
filterV2: SeriesFilterV2 | undefined = undefined;
|
||||
filterSettings: FilterSettings = new FilterSettings();
|
||||
filterOpen: EventEmitter<boolean> = new EventEmitter();
|
||||
filterActive: boolean = false;
|
||||
filterActiveCheck!: SeriesFilter;
|
||||
filterActiveCheck!: SeriesFilterV2;
|
||||
refresh: EventEmitter<void> = new EventEmitter();
|
||||
|
||||
jumpKeys: Array<JumpKey> = [];
|
||||
|
|
@ -72,6 +79,9 @@ export class LibraryDetailComponent implements OnInit {
|
|||
];
|
||||
active = this.tabs[0];
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
private readonly metadataService = inject(MetadataService);
|
||||
private readonly cdRef = inject(ChangeDetectorRef);
|
||||
|
||||
|
||||
bulkActionCallback = (action: ActionItem<any>, data: any) => {
|
||||
const selectedSeriesIndices = this.bulkSelectionService.getSelectedCardsForSource('series');
|
||||
|
|
@ -128,15 +138,14 @@ export class LibraryDetailComponent implements OnInit {
|
|||
constructor(private route: ActivatedRoute, private router: Router, private seriesService: SeriesService,
|
||||
private libraryService: LibraryService, private titleService: Title, private actionFactoryService: ActionFactoryService,
|
||||
private actionService: ActionService, public bulkSelectionService: BulkSelectionService, private hubService: MessageHubService,
|
||||
private utilityService: UtilityService, public navService: NavService, private filterUtilityService: FilterUtilitiesService,
|
||||
private readonly cdRef: ChangeDetectorRef) {
|
||||
private utilityService: UtilityService, public navService: NavService, private filterUtilityService: FilterUtilitiesService) {
|
||||
const routeId = this.route.snapshot.paramMap.get('libraryId');
|
||||
if (routeId === null) {
|
||||
this.router.navigateByUrl('/libraries');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
|
||||
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
|
||||
this.libraryId = parseInt(routeId, 10);
|
||||
this.libraryService.getLibraryNames().pipe(take(1)).subscribe(names => {
|
||||
|
|
@ -153,22 +162,27 @@ export class LibraryDetailComponent implements OnInit {
|
|||
this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
|
||||
|
||||
this.pagination = this.filterUtilityService.pagination(this.route.snapshot);
|
||||
[this.filterSettings.presets, this.filterSettings.openByDefault] = this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot);
|
||||
if (this.filterSettings.presets) this.filterSettings.presets.libraries = [this.libraryId];
|
||||
// Setup filterActiveCheck to check filter against
|
||||
this.filterActiveCheck = this.filterUtilityService.createSeriesFilter();
|
||||
this.filterActiveCheck.libraries = [this.libraryId];
|
||||
this.filterV2 = this.filterUtilityService.filterPresetsFromUrlV2(this.route.snapshot);
|
||||
|
||||
if (this.filterV2.statements.filter(stmt => stmt.field === FilterField.Libraries).length === 0) {
|
||||
this.filterV2!.statements.push({field: FilterField.Libraries, value: this.libraryId + '', comparison: FilterComparison.Equal});
|
||||
}
|
||||
|
||||
this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
|
||||
this.filterActiveCheck.statements.push({field: FilterField.Libraries, value: this.libraryId + '', comparison: FilterComparison.Equal});
|
||||
|
||||
this.filterSettings.presetsV2 = this.filterV2;
|
||||
|
||||
this.filterSettings.libraryDisabled = true;
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.hubService.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
|
||||
if (event.event === EVENTS.SeriesAdded) {
|
||||
const seriesAdded = event.payload as SeriesAddedEvent;
|
||||
if (seriesAdded.libraryId !== this.libraryId) return;
|
||||
if (!this.utilityService.deepEqual(this.filter, this.filterActiveCheck)) {
|
||||
if (!this.utilityService.deepEqual(this.filterV2, this.filterActiveCheck)) {
|
||||
this.loadPage();
|
||||
return;
|
||||
}
|
||||
|
|
@ -188,7 +202,7 @@ export class LibraryDetailComponent implements OnInit {
|
|||
} else if (event.event === EVENTS.SeriesRemoved) {
|
||||
const seriesRemoved = event.payload as SeriesRemovedEvent;
|
||||
if (seriesRemoved.libraryId !== this.libraryId) return;
|
||||
if (!this.utilityService.deepEqual(this.filter, this.filterActiveCheck)) {
|
||||
if (!this.utilityService.deepEqual(this.filterV2, this.filterActiveCheck)) {
|
||||
this.loadPage();
|
||||
return;
|
||||
}
|
||||
|
|
@ -216,17 +230,17 @@ export class LibraryDetailComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
handleAction(action: ActionItem<Library>, library: Library) {
|
||||
async handleAction(action: ActionItem<Library>, library: Library) {
|
||||
let lib: Partial<Library> = library;
|
||||
if (library === undefined) {
|
||||
lib = {id: this.libraryId, name: this.libraryName};
|
||||
}
|
||||
switch (action.action) {
|
||||
case(Action.Scan):
|
||||
this.actionService.scanLibrary(lib);
|
||||
await this.actionService.scanLibrary(lib);
|
||||
break;
|
||||
case(Action.RefreshMetadata):
|
||||
this.actionService.refreshMetadata(lib);
|
||||
await this.actionService.refreshMetadata(lib);
|
||||
break;
|
||||
case(Action.Edit):
|
||||
this.actionService.editLibrary(lib);
|
||||
|
|
@ -245,25 +259,23 @@ export class LibraryDetailComponent implements OnInit {
|
|||
}
|
||||
|
||||
updateFilter(data: FilterEvent) {
|
||||
this.filter = data.filter;
|
||||
if (data.filterV2 === undefined) return;
|
||||
this.filterV2 = data.filterV2;
|
||||
|
||||
if (!data.isFirst) {
|
||||
this.filterUtilityService.updateUrlFromFilterV2(this.pagination, this.filterV2);
|
||||
}
|
||||
|
||||
if (!data.isFirst) this.filterUtilityService.updateUrlFromFilter(this.pagination, this.filter);
|
||||
this.loadPage();
|
||||
}
|
||||
|
||||
loadPage() {
|
||||
// The filter is out of sync with the presets from typeaheads on first load but syncs afterwards
|
||||
if (this.filter == undefined) {
|
||||
this.filter = this.filterUtilityService.createSeriesFilter();
|
||||
this.filter.libraries.push(this.libraryId);
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
this.loadingSeries = true;
|
||||
this.filterActive = !this.utilityService.deepEqual(this.filter, this.filterActiveCheck);
|
||||
this.filterActive = !this.utilityService.deepEqual(this.filterV2, this.filterActiveCheck);
|
||||
this.cdRef.markForCheck();
|
||||
|
||||
this.seriesService.getSeriesForLibrary(0, undefined, undefined, this.filter).pipe(take(1)).subscribe(series => {
|
||||
this.seriesService.getSeriesForLibraryV2(undefined, undefined, this.filterV2)
|
||||
.subscribe(series => {
|
||||
this.series = series.result;
|
||||
this.pagination = series.pagination;
|
||||
this.loadingSeries = false;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
|
|||
import { LibraryDetailRoutingModule } from './library-detail-routing.module';
|
||||
import { LibraryRecommendedComponent } from './library-recommended/library-recommended.component';
|
||||
|
||||
import {CardActionablesComponent} from "../cards/card-item/card-actionables/card-actionables.component";
|
||||
import {SentenceCasePipe} from "../pipe/sentence-case.pipe";
|
||||
import {CardDetailLayoutComponent} from "../cards/card-detail-layout/card-detail-layout.component";
|
||||
import {SeriesCardComponent} from "../cards/series-card/series-card.component";
|
||||
|
|
@ -13,6 +12,7 @@ import {BulkOperationsComponent} from "../cards/bulk-operations/bulk-operations.
|
|||
import {
|
||||
SideNavCompanionBarComponent
|
||||
} from "../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component";
|
||||
import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue