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
|
|
@ -11,9 +11,9 @@ import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/acti
|
|||
import { BulkSelectionService } from '../bulk-selection.service';
|
||||
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
||||
import {AsyncPipe, CommonModule} from "@angular/common";
|
||||
import {CardActionablesComponent} from "../card-item/card-actionables/card-actionables.component";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-bulk-operations',
|
||||
|
|
|
|||
|
|
@ -43,13 +43,13 @@ import {ReadMoreComponent} from "../../shared/read-more/read-more.component";
|
|||
import {EntityInfoCardsComponent} from "../entity-info-cards/entity-info-cards.component";
|
||||
import {CoverImageChooserComponent} from "../cover-image-chooser/cover-image-chooser.component";
|
||||
import {ChapterMetadataDetailComponent} from "../chapter-metadata-detail/chapter-metadata-detail.component";
|
||||
import {CardActionablesComponent} from "../card-item/card-actionables/card-actionables.component";
|
||||
import {DefaultDatePipe} from "../../pipe/default-date.pipe";
|
||||
import {BytesPipe} from "../../pipe/bytes.pipe";
|
||||
import {BadgeExpanderComponent} from "../../shared/badge-expander/badge-expander.component";
|
||||
import {TagBadgeComponent} from "../../shared/tag-badge/tag-badge.component";
|
||||
import {PersonBadgeComponent} from "../../shared/person-badge/person-badge.component";
|
||||
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
enum TabID {
|
||||
General = 0,
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
|
||||
<div class="col me-auto">
|
||||
<h2>
|
||||
<span *ngIf="actions.length > 0" class="">
|
||||
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>
|
||||
</span>
|
||||
<span *ngIf="actions.length > 0" class="">
|
||||
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>
|
||||
</span>
|
||||
<span *ngIf="header !== undefined && header.length > 0">
|
||||
{{header}}
|
||||
<span class="badge bg-primary rounded-pill" [attr.aria-label]="t('total-items', {count: pagination.totalItems})" *ngIf="pagination !== undefined">{{pagination.totalItems}}</span>
|
||||
</span>
|
||||
{{header}}
|
||||
<span class="badge bg-primary rounded-pill" [attr.aria-label]="t('total-items', {count: pagination.totalItems})" *ngIf="pagination !== undefined">{{pagination.totalItems}}</span>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,15 @@ import {
|
|||
ChangeDetectorRef,
|
||||
Component,
|
||||
ContentChild,
|
||||
DestroyRef,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener, inject,
|
||||
HostListener,
|
||||
inject,
|
||||
Inject,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
TemplateRef,
|
||||
|
|
@ -25,16 +28,18 @@ import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.ser
|
|||
import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
|
||||
import { Library } from 'src/app/_models/library';
|
||||
import { Pagination } from 'src/app/_models/pagination';
|
||||
import { FilterEvent, FilterItem, SeriesFilter } from 'src/app/_models/metadata/series-filter';
|
||||
import { FilterEvent, FilterItem } from 'src/app/_models/metadata/series-filter';
|
||||
import { ActionItem } from 'src/app/_services/action-factory.service';
|
||||
import { JumpbarService } from 'src/app/_services/jumpbar.service';
|
||||
import { ScrollService } from 'src/app/_services/scroll.service';
|
||||
import {LoadingComponent} from "../../shared/loading/loading.component";
|
||||
|
||||
import {CardActionablesComponent} from "../card-item/card-actionables/card-actionables.component";
|
||||
|
||||
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.component";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-detail-layout',
|
||||
|
|
@ -84,12 +89,13 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
|
|||
@ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent;
|
||||
|
||||
private readonly filterUtilityService = inject(FilterUtilitiesService);
|
||||
filter: SeriesFilter = this.filterUtilityService.createSeriesFilter();
|
||||
filter: SeriesFilterV2 = this.filterUtilityService.createSeriesV2Filter();
|
||||
libraries: Array<FilterItem<Library>> = [];
|
||||
|
||||
updateApplied: number = 0;
|
||||
hasResumedJumpKey: boolean = false;
|
||||
|
||||
|
||||
get Breakpoint() {
|
||||
return Breakpoint;
|
||||
}
|
||||
|
|
@ -157,7 +163,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
|
|||
}
|
||||
|
||||
hasCustomSort() {
|
||||
return this.filter.sortOptions || this.filterSettings?.presets?.sortOptions;
|
||||
return this.filter?.sortOptions || this.filterSettings?.presetsV2?.sortOptions;
|
||||
}
|
||||
|
||||
performAction(action: ActionItem<any>) {
|
||||
|
|
@ -169,7 +175,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
|
|||
applyMetadataFilter(event: FilterEvent) {
|
||||
this.applyFilter.emit(event);
|
||||
this.updateApplied++;
|
||||
this.filter = event.filter;
|
||||
this.filter = event.filterV2;
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
<ng-container *transloco="let t; read: 'actionable'">
|
||||
<ng-container *ngIf="actions.length > 0">
|
||||
<div ngbDropdown container="body" class="d-inline-block">
|
||||
<button [disabled]="disabled" class="btn {{btnClass}}" id="actions-{{labelBy}}" ngbDropdownToggle
|
||||
(click)="preventEvent($event)"><i class="fa {{iconClass}}" aria-hidden="true"></i></button>
|
||||
<div ngbDropdownMenu attr.aria-labelledby="actions-{{labelBy}}">
|
||||
<ng-container *ngTemplateOutlet="submenu; context: { list: actions }"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #submenu let-list="list">
|
||||
<ng-container *ngFor="let action of list">
|
||||
<!-- Non Submenu items -->
|
||||
<ng-container *ngIf="action.children === undefined || action?.children?.length === 0 || action.dynamicList !== undefined ; else submenuDropdown">
|
||||
|
||||
<ng-container *ngIf="action.dynamicList !== undefined && (action.dynamicList | async | dynamicList) as dList; else justItem">
|
||||
<ng-container *ngFor="let dynamicItem of dList">
|
||||
<button ngbDropdownItem (click)="performDynamicClick($event, action, dynamicItem)">{{dynamicItem.title}}</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #justItem>
|
||||
<button ngbDropdownItem *ngIf="willRenderAction(action)" (click)="performAction($event, action)" (mouseover)="closeAllSubmenus()">{{t(action.title)}}</button>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<ng-template #submenuDropdown>
|
||||
<!-- Submenu items -->
|
||||
<ng-container *ngIf="shouldRenderSubMenu(action, action.children?.[0].dynamicList | async)">
|
||||
<div ngbDropdown #subMenuHover="ngbDropdown" placement="right left" (click)="preventEvent($event); openSubmenu(action.title, subMenuHover)" (mouseover)="preventEvent($event); openSubmenu(action.title, subMenuHover)" (mouseleave)="preventEvent($event)">
|
||||
<button *ngIf="willRenderAction(action)" id="actions-{{action.title}}" class="submenu-toggle" ngbDropdownToggle>{{t(action.title)}} <i class="fa-solid fa-angle-right submenu-icon"></i></button>
|
||||
<div ngbDropdownMenu attr.aria-labelledby="actions-{{action.title}}">
|
||||
<ng-container *ngTemplateOutlet="submenu; context: { list: action.children }"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.dropdown-toggle:after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.submenu-toggle {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
|
||||
font-weight: 400;
|
||||
text-align: inherit;
|
||||
border: 0;
|
||||
color: var(--dropdown-item-text-color);
|
||||
background-color: var(--dropdown-item-bg-color);
|
||||
&:hover {
|
||||
color: var(--dropdown-item-text-color);
|
||||
background-color: var(--dropdown-item-hover-bg-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus-visible {
|
||||
color: var(--dropdown-item-text-color);
|
||||
background-color: var(--dropdown-item-hover-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-icon {
|
||||
float: right;
|
||||
padding: var(--bs-dropdown-item-padding-y) 0;
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle} from '@ng-bootstrap/ng-bootstrap';
|
||||
import { take } from 'rxjs';
|
||||
import { AccountService } from 'src/app/_services/account.service';
|
||||
import { Action, ActionItem } from 'src/app/_services/action-factory.service';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {DynamicListPipe} from "../../dynamic-list.pipe";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-actionables',
|
||||
standalone: true,
|
||||
imports: [CommonModule, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, DynamicListPipe, TranslocoDirective],
|
||||
templateUrl: './card-actionables.component.html',
|
||||
styleUrls: ['./card-actionables.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class CardActionablesComponent implements OnInit {
|
||||
|
||||
@Input() iconClass = 'fa-ellipsis-v';
|
||||
@Input() btnClass = '';
|
||||
@Input() actions: ActionItem<any>[] = [];
|
||||
@Input() labelBy = 'card';
|
||||
@Input() disabled: boolean = false;
|
||||
@Output() actionHandler = new EventEmitter<ActionItem<any>>();
|
||||
|
||||
|
||||
isAdmin: boolean = false;
|
||||
canDownload: boolean = false;
|
||||
submenu: {[key: string]: NgbDropdown} = {};
|
||||
|
||||
constructor(private readonly cdRef: ChangeDetectorRef, private accountService: AccountService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.accountService.currentUser$.pipe(take(1)).subscribe((user) => {
|
||||
if (!user) return;
|
||||
this.isAdmin = this.accountService.hasAdminRole(user);
|
||||
this.canDownload = this.accountService.hasDownloadRole(user);
|
||||
|
||||
// We want to avoid an empty menu when user doesn't have access to anything
|
||||
if (!this.isAdmin && this.actions.filter(a => !a.requiresAdmin).length === 0) {
|
||||
this.actions = [];
|
||||
}
|
||||
this.cdRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
preventEvent(event: any) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
performAction(event: any, action: ActionItem<any>) {
|
||||
this.preventEvent(event);
|
||||
|
||||
if (typeof action.callback === 'function') {
|
||||
this.actionHandler.emit(action);
|
||||
}
|
||||
}
|
||||
|
||||
willRenderAction(action: ActionItem<any>) {
|
||||
return (action.requiresAdmin && this.isAdmin)
|
||||
|| (action.action === Action.Download && (this.canDownload || this.isAdmin))
|
||||
|| (!action.requiresAdmin && action.action !== Action.Download);
|
||||
}
|
||||
|
||||
shouldRenderSubMenu(action: ActionItem<any>, dynamicList: null | Array<any>) {
|
||||
return (action.children[0].dynamicList === undefined || action.children[0].dynamicList === null) || (dynamicList !== null && dynamicList.length > 0);
|
||||
}
|
||||
|
||||
openSubmenu(actionTitle: string, subMenu: NgbDropdown) {
|
||||
// We keep track when we open and when we get a request to open, if we have other keys, we close them and clear their keys
|
||||
if (Object.keys(this.submenu).length > 0) {
|
||||
const keys = Object.keys(this.submenu).filter(k => k !== actionTitle);
|
||||
keys.forEach(key => {
|
||||
this.submenu[key].close();
|
||||
delete this.submenu[key];
|
||||
});
|
||||
}
|
||||
this.submenu[actionTitle] = subMenu;
|
||||
subMenu.open();
|
||||
}
|
||||
|
||||
closeAllSubmenus() {
|
||||
Object.keys(this.submenu).forEach(key => {
|
||||
this.submenu[key].close();
|
||||
delete this.submenu[key];
|
||||
});
|
||||
}
|
||||
|
||||
performDynamicClick(event: any, action: ActionItem<any>, dynamicItem: any) {
|
||||
action._extra = dynamicItem;
|
||||
this.performAction(event, action);
|
||||
}
|
||||
}
|
||||
|
|
@ -36,11 +36,11 @@ import {DownloadIndicatorComponent} from "../download-indicator/download-indicat
|
|||
import {FormsModule} from "@angular/forms";
|
||||
import {MangaFormatPipe} from "../../pipe/manga-format.pipe";
|
||||
import {MangaFormatIconPipe} from "../../pipe/manga-format-icon.pipe";
|
||||
import {CardActionablesComponent} from "./card-actionables/card-actionables.component";
|
||||
import {SentenceCasePipe} from "../../pipe/sentence-case.pipe";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {RouterLink} from "@angular/router";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-item',
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'dynamicList',
|
||||
pure: true,
|
||||
standalone: true
|
||||
})
|
||||
export class DynamicListPipe implements PipeTransform {
|
||||
|
||||
transform(value: any): Array<{title: string, data: any}> {
|
||||
if (value === undefined || value === null) return [];
|
||||
return value as {title: string, data: any}[];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="mt-4 mb-3">
|
||||
<div class="row g-0" *ngIf="chapterMetadata ">
|
||||
<!-- Tags and Characters are used a lot of Hentai and Doujinshi type content, so showing in list item has value add on first glance -->
|
||||
<app-metadata-detail [tags]="chapterMetadata.tags" [libraryId]="libraryId" [queryParam]="FilterQueryParam.Tags" heading="Tags">
|
||||
<app-metadata-detail [tags]="chapterMetadata.tags" [libraryId]="libraryId" [queryParam]="FilterField.Tags" heading="Tags">
|
||||
<ng-template #titleTemplate let-item>{{item.title}}</ng-template>
|
||||
</app-metadata-detail>
|
||||
|
||||
<app-metadata-detail [tags]="chapterMetadata.characters" [libraryId]="libraryId" [queryParam]="FilterQueryParam.Character" heading="Characters">
|
||||
<app-metadata-detail [tags]="chapterMetadata.characters" [libraryId]="libraryId" [queryParam]="FilterField.Characters" heading="Characters">
|
||||
<ng-template #titleTemplate let-item>{{item.name}}</ng-template>
|
||||
</app-metadata-detail>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import {MetadataDetailComponent} from "../../series-detail/_components/metadata-
|
|||
import {FilterQueryParam} from "../../shared/_services/filter-utilities.service";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {TranslocoLocaleModule} from "@ngneat/transloco-locale";
|
||||
import {FilterField} from "../../_models/metadata/v2/filter-field";
|
||||
|
||||
@Component({
|
||||
selector: 'app-entity-info-cards',
|
||||
|
|
@ -75,6 +76,8 @@ export class EntityInfoCardsComponent implements OnInit {
|
|||
return AgeRating;
|
||||
}
|
||||
|
||||
get FilterField() { return FilterField; }
|
||||
|
||||
get WebLinks() {
|
||||
if (this.chapter.webLinks === '') return [];
|
||||
return this.chapter.webLinks.split(',');
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ import {CommonModule} from "@angular/common";
|
|||
import {ImageComponent} from "../../shared/image/image.component";
|
||||
import {DownloadIndicatorComponent} from "../download-indicator/download-indicator.component";
|
||||
import {EntityInfoCardsComponent} from "../entity-info-cards/entity-info-cards.component";
|
||||
import {CardActionablesComponent} from "../card-item/card-actionables/card-actionables.component";
|
||||
import {NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-item',
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@
|
|||
<ng-container *ngIf="seriesMetadata">
|
||||
<ng-container *ngIf="seriesMetadata.ageRating">
|
||||
<div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
|
||||
<app-icon-and-title [label]="t('age-rating-title')" [clickable]="true" fontClasses="fas fa-eye" (click)="handleGoTo(FilterQueryParam.AgeRating, seriesMetadata.ageRating)" [title]="t('age-rating-title')">
|
||||
<app-icon-and-title [label]="t('age-rating-title')" [clickable]="true" fontClasses="fas fa-eye" (click)="handleGoTo(FilterField.AgeRating, seriesMetadata.ageRating)" [title]="t('age-rating-title')">
|
||||
{{this.seriesMetadata.ageRating | ageRating}}
|
||||
</app-icon-and-title>
|
||||
</div>
|
||||
<div class="vr d-none d-lg-block m-2"></div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="seriesMetadata.language !== null">
|
||||
<ng-container *ngIf="seriesMetadata.language !== null && seriesMetadata.language !== ''">
|
||||
<div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
|
||||
<app-icon-and-title [label]="t('language-title')" [clickable]="true" fontClasses="fas fa-language" (click)="handleGoTo(FilterQueryParam.Languages, seriesMetadata.language)" [title]="t('language-title')">
|
||||
<app-icon-and-title [label]="t('language-title')" [clickable]="true" fontClasses="fas fa-language" (click)="handleGoTo(FilterField.Languages, seriesMetadata.language)" [title]="t('language-title')">
|
||||
{{seriesMetadata.language | defaultValue:'en' | languageName | async}}
|
||||
</app-icon-and-title>
|
||||
</div>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
|
||||
<ng-container *ngIf="seriesMetadata.publicationStatus | publicationStatus as pubStatus">
|
||||
<app-icon-and-title [label]="t('publication-status-title')" [clickable]="true" fontClasses="fa-solid fa-hourglass-{{pubStatus === t('ongoing') ? 'empty' : 'end'}}"
|
||||
(click)="handleGoTo(FilterQueryParam.PublicationStatus, seriesMetadata.publicationStatus)"
|
||||
(click)="handleGoTo(FilterField.PublicationStatus, seriesMetadata.publicationStatus)"
|
||||
[ngbTooltip]="t('publication-status-tooltip') + ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')'">
|
||||
{{pubStatus}}
|
||||
</app-icon-and-title>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<div class="d-none d-md-block col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
|
||||
<app-icon-and-title [label]="t('format-title')" [clickable]="true"
|
||||
[fontClasses]="'fa ' + (series.format | mangaFormatIcon)"
|
||||
(click)="handleGoTo(FilterQueryParam.Format, series.format)" [title]="t('format-title')">
|
||||
(click)="handleGoTo(FilterField.Formats, series.format)" [title]="t('format-title')">
|
||||
{{series.format | mangaFormat}}
|
||||
</app-icon-and-title>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import {
|
|||
Output
|
||||
} from '@angular/core';
|
||||
import {debounceTime, filter, map} from 'rxjs';
|
||||
import { FilterQueryParam } from 'src/app/shared/_services/filter-utilities.service';
|
||||
import { UtilityService } from 'src/app/shared/_services/utility.service';
|
||||
import { UserProgressUpdateEvent } from 'src/app/_models/events/user-progress-update-event';
|
||||
import { HourEstimateRange } from 'src/app/_models/series-detail/hour-estimate-range';
|
||||
|
|
@ -20,6 +19,7 @@ import { SeriesMetadata } from 'src/app/_models/metadata/series-metadata';
|
|||
import { AccountService } from 'src/app/_services/account.service';
|
||||
import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
|
||||
import { ReaderService } from 'src/app/_services/reader.service';
|
||||
import {FilterField} from "../../_models/metadata/v2/filter-field";
|
||||
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
||||
import {ScrobblingService} from "../../_services/scrobbling.service";
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
|
@ -53,7 +53,7 @@ export class SeriesInfoCardsComponent implements OnInit, OnChanges {
|
|||
* If this should make an API call to request readingTimeLeft
|
||||
*/
|
||||
@Input() showReadingTimeLeft: boolean = true;
|
||||
@Output() goTo: EventEmitter<{queryParamName: FilterQueryParam, filter: any}> = new EventEmitter();
|
||||
@Output() goTo: EventEmitter<{queryParamName: FilterField, filter: any}> = new EventEmitter();
|
||||
|
||||
readingTime: HourEstimateRange = {avgHours: 0, maxHours: 0, minHours: 0};
|
||||
isScrobbling: boolean = true;
|
||||
|
|
@ -64,8 +64,8 @@ export class SeriesInfoCardsComponent implements OnInit, OnChanges {
|
|||
return MangaFormat;
|
||||
}
|
||||
|
||||
get FilterQueryParam() {
|
||||
return FilterQueryParam;
|
||||
get FilterField() {
|
||||
return FilterField;
|
||||
}
|
||||
|
||||
constructor(public utilityService: UtilityService, private readerService: ReaderService,
|
||||
|
|
@ -110,7 +110,8 @@ export class SeriesInfoCardsComponent implements OnInit, OnChanges {
|
|||
}
|
||||
|
||||
|
||||
handleGoTo(queryParamName: FilterQueryParam, filter: any) {
|
||||
handleGoTo(queryParamName: FilterField, filter: any) {
|
||||
if (filter + '' === '') return;
|
||||
this.goTo.emit({queryParamName, filter});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue