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
|
|
@ -26,7 +26,7 @@
|
|||
<div class="col-auto ms-2 mt-2" *ngIf="!(readingList?.promoted && !this.isAdmin)">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="accessibility-mode" [value]="accessibilityMode" (change)="updateAccessibilityMode()">
|
||||
<label class="form-check-label" for="accessibility-mode">Order Numbers</label>
|
||||
<label class="form-check-label" for="accessibility-mode">{{t('order-numbers-label')}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<span class="read-btn--text">{{t('continue')}}</span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="btn-group" ngbDropdown role="group" aria-label="Read options">
|
||||
<div class="btn-group" ngbDropdown role="group" [attr.aria-label]="t('read-options-alt')">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
|
||||
<div class="dropdown-menu" ngbDropdownMenu>
|
||||
<button ngbDropdownItem (click)="read()">
|
||||
|
|
@ -106,10 +106,10 @@
|
|||
<ng-container *ngIf="characters$ | async as characters">
|
||||
<div class="row mb-2">
|
||||
<div class="row" *ngIf="characters && characters.length > 0">
|
||||
<h5>Characters</h5>
|
||||
<h5>{{t('characters-title')}}</h5>
|
||||
<app-badge-expander [items]="characters">
|
||||
<ng-template #badgeExpanderItem let-item let-position="idx">
|
||||
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
||||
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item" (click)="goToCharacter(item)"></app-person-badge>
|
||||
</ng-template>
|
||||
</app-badge-expander>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,43 @@
|
|||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { take } from 'rxjs/operators';
|
||||
import { ConfirmService } from 'src/app/shared/confirm.service';
|
||||
import { UtilityService } from 'src/app/shared/_services/utility.service';
|
||||
import { LibraryType } from 'src/app/_models/library';
|
||||
import { MangaFormat } from 'src/app/_models/manga-format';
|
||||
import { ReadingList, ReadingListItem } from 'src/app/_models/reading-list';
|
||||
import { AccountService } from 'src/app/_services/account.service';
|
||||
import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/action-factory.service';
|
||||
import { ActionService } from 'src/app/_services/action.service';
|
||||
import { ImageService } from 'src/app/_services/image.service';
|
||||
import { ReadingListService } from 'src/app/_services/reading-list.service';
|
||||
import { IndexUpdateEvent, DraggableOrderedListComponent } from '../draggable-ordered-list/draggable-ordered-list.component';
|
||||
import { forkJoin, Observable } from 'rxjs';
|
||||
import { ReaderService } from 'src/app/_services/reader.service';
|
||||
import { LibraryService } from 'src/app/_services/library.service';
|
||||
import { Person } from 'src/app/_models/metadata/person';
|
||||
import { ReadingListItemComponent } from '../reading-list-item/reading-list-item.component';
|
||||
import { LoadingComponent } from '../../../shared/loading/loading.component';
|
||||
import { A11yClickDirective } from '../../../shared/a11y-click.directive';
|
||||
import { PersonBadgeComponent } from '../../../shared/person-badge/person-badge.component';
|
||||
import { BadgeExpanderComponent } from '../../../shared/badge-expander/badge-expander.component';
|
||||
import { ReadMoreComponent } from '../../../shared/read-more/read-more.component';
|
||||
import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ImageComponent } from '../../../shared/image/image.component';
|
||||
import { CardActionablesComponent } from '../../../cards/card-item/card-actionables/card-actionables.component';
|
||||
import { NgIf, NgClass, AsyncPipe, DecimalPipe, DatePipe } from '@angular/common';
|
||||
import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
|
||||
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {ToastrService} from 'ngx-toastr';
|
||||
import {take} from 'rxjs/operators';
|
||||
import {ConfirmService} from 'src/app/shared/confirm.service';
|
||||
import {UtilityService} from 'src/app/shared/_services/utility.service';
|
||||
import {LibraryType} from 'src/app/_models/library';
|
||||
import {MangaFormat} from 'src/app/_models/manga-format';
|
||||
import {ReadingList, ReadingListItem} from 'src/app/_models/reading-list';
|
||||
import {AccountService} from 'src/app/_services/account.service';
|
||||
import {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service';
|
||||
import {ActionService} from 'src/app/_services/action.service';
|
||||
import {ImageService} from 'src/app/_services/image.service';
|
||||
import {ReadingListService} from 'src/app/_services/reading-list.service';
|
||||
import {
|
||||
DraggableOrderedListComponent,
|
||||
IndexUpdateEvent
|
||||
} from '../draggable-ordered-list/draggable-ordered-list.component';
|
||||
import {forkJoin, Observable} from 'rxjs';
|
||||
import {ReaderService} from 'src/app/_services/reader.service';
|
||||
import {LibraryService} from 'src/app/_services/library.service';
|
||||
import {Person} from 'src/app/_models/metadata/person';
|
||||
import {ReadingListItemComponent} from '../reading-list-item/reading-list-item.component';
|
||||
import {LoadingComponent} from '../../../shared/loading/loading.component';
|
||||
import {A11yClickDirective} from '../../../shared/a11y-click.directive';
|
||||
import {PersonBadgeComponent} from '../../../shared/person-badge/person-badge.component';
|
||||
import {BadgeExpanderComponent} from '../../../shared/badge-expander/badge-expander.component';
|
||||
import {ReadMoreComponent} from '../../../shared/read-more/read-more.component';
|
||||
import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle} from '@ng-bootstrap/ng-bootstrap';
|
||||
import {ImageComponent} from '../../../shared/image/image.component';
|
||||
import {AsyncPipe, DatePipe, DecimalPipe, NgClass, NgIf} from '@angular/common';
|
||||
import {
|
||||
SideNavCompanionBarComponent
|
||||
} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
|
||||
import {translate, TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
||||
import {CardActionablesComponent} from "../../../_single-module/card-actionables/card-actionables.component";
|
||||
import {FilterUtilitiesService} from "../../../shared/_services/filter-utilities.service";
|
||||
import {FilterField} from "../../../_models/metadata/v2/filter-field";
|
||||
import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
|
||||
import {MetadataDetailComponent} from "../../../series-detail/_components/metadata-detail/metadata-detail.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-reading-list-detail',
|
||||
|
|
@ -36,7 +45,7 @@ import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
|||
styleUrls: ['./reading-list-detail.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
imports: [SideNavCompanionBarComponent, NgIf, CardActionablesComponent, ImageComponent, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, ReadMoreComponent, BadgeExpanderComponent, PersonBadgeComponent, A11yClickDirective, LoadingComponent, DraggableOrderedListComponent, ReadingListItemComponent, NgClass, AsyncPipe, DecimalPipe, DatePipe, TranslocoDirective]
|
||||
imports: [SideNavCompanionBarComponent, NgIf, CardActionablesComponent, ImageComponent, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, ReadMoreComponent, BadgeExpanderComponent, PersonBadgeComponent, A11yClickDirective, LoadingComponent, DraggableOrderedListComponent, ReadingListItemComponent, NgClass, AsyncPipe, DecimalPipe, DatePipe, TranslocoDirective, MetadataDetailComponent]
|
||||
})
|
||||
export class ReadingListDetailComponent implements OnInit {
|
||||
items: Array<ReadingListItem> = [];
|
||||
|
|
@ -67,7 +76,7 @@ export class ReadingListDetailComponent implements OnInit {
|
|||
private actionService: ActionService, private actionFactoryService: ActionFactoryService, public utilityService: UtilityService,
|
||||
public imageService: ImageService, private accountService: AccountService, private toastr: ToastrService,
|
||||
private confirmService: ConfirmService, private libraryService: LibraryService, private readerService: ReaderService,
|
||||
private readonly cdRef: ChangeDetectorRef) {}
|
||||
private readonly cdRef: ChangeDetectorRef, private filterUtilityService: FilterUtilitiesService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
const listId = this.route.snapshot.paramMap.get('id');
|
||||
|
|
@ -93,7 +102,7 @@ export class ReadingListDetailComponent implements OnInit {
|
|||
|
||||
if (readingList == null) {
|
||||
// The list doesn't exist
|
||||
this.toastr.error('This list doesn\'t exist.');
|
||||
this.toastr.error(translate('toasts.list-doesnt-exist'));
|
||||
this.router.navigateByUrl('library');
|
||||
return;
|
||||
}
|
||||
|
|
@ -224,4 +233,8 @@ export class ReadingListDetailComponent implements OnInit {
|
|||
this.accessibilityMode = !this.accessibilityMode;
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
goToCharacter(character: Person) {
|
||||
this.filterUtilityService.applyFilter(['all-series'], FilterField.Characters, FilterComparison.Contains, character.id + '');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ import { ImportCblModalComponent } from '../../_modals/import-cbl-modal/import-c
|
|||
import { CardItemComponent } from '../../../cards/card-item/card-item.component';
|
||||
import { CardDetailLayoutComponent } from '../../../cards/card-detail-layout/card-detail-layout.component';
|
||||
import { NgIf, DecimalPipe } from '@angular/common';
|
||||
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 {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
||||
import {CardActionablesComponent} from "../../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-reading-lists',
|
||||
|
|
|
|||
|
|
@ -126,7 +126,6 @@ export class EditReadingListModalComponent implements OnInit {
|
|||
|
||||
updateSelectedIndex(index: number) {
|
||||
this.coverImageIndex = index;
|
||||
console.log(this.coverImageIndex)
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import {ImageComponent} from "../shared/image/image.component";
|
|||
import {ReadMoreComponent} from "../shared/read-more/read-more.component";
|
||||
import {PersonBadgeComponent} from "../shared/person-badge/person-badge.component";
|
||||
import {BadgeExpanderComponent} from "../shared/badge-expander/badge-expander.component";
|
||||
import {CardActionablesComponent} from "../cards/card-item/card-actionables/card-actionables.component";
|
||||
import {MangaFormatPipe} from "../pipe/manga-format.pipe";
|
||||
import {MangaFormatIconPipe} from "../pipe/manga-format-icon.pipe";
|
||||
import {SafeHtmlPipe} from "../pipe/safe-html.pipe";
|
||||
|
|
@ -28,6 +27,7 @@ import {
|
|||
} from "../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component";
|
||||
import {LoadingComponent} from "../shared/loading/loading.component";
|
||||
import {A11yClickDirective} from "../shared/a11y-click.directive";
|
||||
import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue