AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

In-Depth Filtering (#850)

Browse source 
* Laying the foundation for the filter rework

* Filtering by Genre is now possible.

* Cleaned up code and preparing for People filtering

* People filtering is hooked up for the frontend

* Filtering now works. On Deck does not work with filtering currently due to a unique implementation.

* More cleanup

* Implemented the ability to reset the filters

* Added a mobile drawer for filtering

* Added some additional cases for NaturalSortComparer. Filter now uses a drawer on smaller screens.

* Fixed a bug where backup service was not pointing to the correct directory.

* Undid the fix, it's working as expected
This commit is contained in:
Joseph Milazzo 2021-12-15 10:23:10 -06:00 • committed by GitHub
parent ca893930d3
commit 28688ada8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 2354 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,24 +10,264 @@
</h2>
</div>
<button *ngIf="filters !== undefined && filters.length > 0" class="btn btn-secondary btn-small" (click)="collapse.toggle()" [attr.aria-expanded]="!filteringCollapsed" placement="left" ngbTooltip="{{filteringCollapsed ? 'Open' : 'Close'}} Filtering and Sorting" attr.aria-label="{{filteringCollapsed ? 'Open' : 'Close'}} Filtering and Sorting">
<button class="btn btn-secondary btn-small" (click)="collapse.toggle()" [attr.aria-expanded]="!filteringCollapsed" placement="left" ngbTooltip="{{filteringCollapsed ? 'Open' : 'Close'}} Filtering and Sorting" attr.aria-label="{{filteringCollapsed ? 'Open' : 'Close'}} Filtering and Sorting">
<i class="fa fa-filter" aria-hidden="true"></i>
<span class="sr-only">Sort / Filter</span>
</button>
</div>
<div class="row no-gutters filter-section" #collapse="ngbCollapse" [(ngbCollapse)]="filteringCollapsed">
<div class="col">
<form class="ml-2" [formGroup]="filterForm">
<div class="form-group" *ngIf="filters.length > 0">
<label for="series-filter">Filter</label>
<select class="form-control" id="series-filter" formControlName="filter" (ngModelChange)="handleFilterChange($event)" style="max-width: 200px;">
<option [value]="i" *ngFor="let opt of filters; let i = index">{{opt.title}}</option>
</select>
</div>
</form>
<div class="phone-hidden">
<div #collapse="ngbCollapse" [(ngbCollapse)]="filteringCollapsed">
<ng-container [ngTemplateOutlet]="filterSection"></ng-container>
</div>
</div>
<div class="not-phone-hidden">
<app-drawer #commentDrawer="drawer" [isOpen]="!filteringCollapsed" [style.--drawer-width]="'300px'" [style.--drawer-background-color]="'#010409'" (drawerClosed)="filteringCollapsed = !filteringCollapsed">
<div header>
<h2 style="margin-top: 0.5rem">Book Settings
<button type="button" class="close" aria-label="Close" (click)="commentDrawer.close()">
<span aria-hidden="true">&times;</span>
</button>
</h2>
</div>
<div body class="drawer-body">
<ng-container [ngTemplateOutlet]="filterSection"></ng-container>
</div>
</app-drawer>
</div>
<ng-template #filterSection>
<div class="filter-section">
<div class="row no-gutters">
<div class="col-md-3" *ngIf="!filterSettings.formatDisabled">
<div class="form-group">
<label for="format">Format</label>
<app-typeahead (selectedData)="updateFormatFilters($event)" [settings]="formatSettings" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3"*ngIf="!filterSettings.libraryDisabled">
<div class="form-group">
<label for="libraries">Libraries</label>
<app-typeahead (selectedData)="updateLibraryFilters($event)" [settings]="librarySettings" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="!filterSettings.collectionDisabled">
<div class="form-group">
<label for="collections">Collections</label>
<app-typeahead (selectedData)="updateCollectionFilters($event)" [settings]="collectionSettings" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="!filterSettings.genresDisabled">
<div class="form-group">
<label for="genres">Genres</label>
<app-typeahead (selectedData)="updateGenreFilters($event)" [settings]="genreSettings" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
</div>
<div class="row no-gutters">
<!-- The People row -->
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.CoverArtist)">
<div class="form-group">
<label for="cover-artist">(Cover) Artists</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.CoverArtist)" [settings]="getPersonsSettings(PersonRole.CoverArtist)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Writer)">
<div class="form-group">
<label for="writers">Writers</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Writer)" [settings]="getPersonsSettings(PersonRole.Writer)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Publisher)">
<div class="form-group">
<label for="publisher">Publisher</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Publisher)" [settings]="getPersonsSettings(PersonRole.Publisher)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Penciller)">
<div class="form-group">
<label for="Penciller">Penciller</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Penciller)" [settings]="getPersonsSettings(PersonRole.Penciller)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Letterer)">
<div class="form-group">
<label for="letterer">Letterer</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Letterer)" [settings]="getPersonsSettings(PersonRole.Letterer)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Inker)">
<div class="form-group">
<label for="inker">Inker</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Inker)" [settings]="getPersonsSettings(PersonRole.Inker)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Editor)">
<div class="form-group">
<label for="editor">Editor</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Editor)" [settings]="getPersonsSettings(PersonRole.Editor)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Colorist)">
<div class="form-group">
<label for="colorist">Colorist</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Colorist)" [settings]="getPersonsSettings(PersonRole.Colorist)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
<div class="col-md-3" *ngIf="peopleSettings.hasOwnProperty(PersonRole.Character)">
<div class="form-group">
<label for="character">Character</label>
<app-typeahead (selectedData)="updatePersonFilters($event, PersonRole.Character)" [settings]="getPersonsSettings(PersonRole.Character)" [reset]="resetTypeaheads">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</div>
</div>
</div>
<div class="row no-gutters">
<!-- Rating/Review/Progress -->
<div class="col" *ngIf="!filterSettings.readProgressDisabled">
<!-- Not sure how to do this on the backend, might have to be a UI control -->
<label>Read Progress</label>
<form [formGroup]="readProgressGroup" class="ml-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="notread" formControlName="notRead">
<label class="form-check-label" for="notread">Unread</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inprogress" formControlName="inProgress">
<label class="form-check-label" for="inprogress">In Progress</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="read" formControlName="read">
<label class="form-check-label" for="read">Read</label>
</div>
</form>
</div>
<div class="col" *ngIf="!filterSettings.ratingDisabled">
<label for="ratings">Rating</label>
<form class="form-inline ml-2">
<ngb-rating class="rating-star" [(rate)]="filter.rating" (rateChange)="updateRating($event)" [resettable]="true">
<ng-template let-fill="fill" let-index="index">
<span class="star" [class.filled]="(index >= (filter.rating - 1)) && filter.rating > 0" [ngbTooltip]="(index + 1) + ' and up'">&#9733;</span>
</ng-template>
</ngb-rating>
</form>
</div>
<div class="col">
<button class="btn btn-secondary mr-2" (click)="clear()">Clear</button>
<button class="btn btn-primary" (click)="apply()">Apply</button>
</div>
</div>
<div class="row no-gutters">
<!-- Sort by functionalities -->
</div>
</div>
</ng-template>
<ng-container [ngTemplateOutlet]="paginationTemplate" [ngTemplateOutletContext]="{ id: 'top' }"></ng-container>

9
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
View file

@ -0,0 +1,9 @@
@use '../../../theme/colors';
.star {
font-size: 1.5rem;
color: colors.$rating-empty;
}
.filled {
color: colors.$rating-filled;
}

379
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
View file

@ -1,39 +1,42 @@
import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Component, ContentChild, EventEmitter, Input, OnDestroy, OnInit, Output, TemplateRef } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { of, ReplaySubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { TypeaheadSettings } from 'src/app/typeahead/typeahead-settings';
import { CollectionTag } from 'src/app/_models/collection-tag';
import { Genre } from 'src/app/_models/genre';
import { Library } from 'src/app/_models/library';
import { MangaFormat } from 'src/app/_models/manga-format';
import { Pagination } from 'src/app/_models/pagination';
import { FilterItem } from 'src/app/_models/series-filter';
import { Person, PersonRole } from 'src/app/_models/person';
import { FilterItem, mangaFormatFilters, SeriesFilter } from 'src/app/_models/series-filter';
import { ActionItem } from 'src/app/_services/action-factory.service';
import { CollectionTagService } from 'src/app/_services/collection-tag.service';
import { LibraryService } from 'src/app/_services/library.service';
import { MetadataService } from 'src/app/_services/metadata.service';
import { SeriesService } from 'src/app/_services/series.service';
const FILTER_PAG_REGEX = /[^0-9]/g;
export enum FilterAction {
/**
* If an option is selected on a multi select component
*/
Added = 0,
/**
* If an option is unselected on a multi select component
*/
Removed = 1,
/**
* If an option is selected on a single select component
*/
Selected = 2
}
export interface UpdateFilterEvent {
filterItem: FilterItem;
action: FilterAction;
}
const ANIMATION_SPEED = 300;
export class FilterSettings {
libraryDisabled = false;
formatDisabled = false;
collectionDisabled = false;
genresDisabled = false;
peopleDisabled = false;
readProgressDisabled = false;
ratingDisabled = false;
}
@Component({
selector: 'app-card-detail-layout',
templateUrl: './card-detail-layout.component.html',
styleUrls: ['./card-detail-layout.component.scss']
})
export class CardDetailLayoutComponent implements OnInit {
export class CardDetailLayoutComponent implements OnInit, OnDestroy {
@Input() header: string = '';
@Input() isLoading: boolean = false;
@ -43,32 +46,253 @@ export class CardDetailLayoutComponent implements OnInit {
* Any actions to exist on the header for the parent collection (library, collection)
*/
@Input() actions: ActionItem<any>[] = [];
/**
* A list of Filters which can filter the data of the page. If nothing is passed, the control will not show.
*/
@Input() filters: Array<FilterItem> = [];
@Input() trackByIdentity!: (index: number, item: any) => string;
@Input() filterSettings!: FilterSettings;
@Output() itemClicked: EventEmitter<any> = new EventEmitter();
@Output() pageChange: EventEmitter<Pagination> = new EventEmitter();
@Output() applyFilter: EventEmitter<UpdateFilterEvent> = new EventEmitter();
@Output() applyFilter: EventEmitter<SeriesFilter> = new EventEmitter();
@ContentChild('cardItem') itemTemplate!: TemplateRef<any>;
filterForm: FormGroup = new FormGroup({
filter: new FormControl(0, []),
});
formatSettings: TypeaheadSettings<FilterItem<MangaFormat>> = new TypeaheadSettings();
librarySettings: TypeaheadSettings<FilterItem<Library>> = new TypeaheadSettings();
genreSettings: TypeaheadSettings<FilterItem<Genre>> = new TypeaheadSettings();
collectionSettings: TypeaheadSettings<FilterItem<CollectionTag>> = new TypeaheadSettings();
peopleSettings: {[PersonRole: string]: TypeaheadSettings<FilterItem<Person>>} = {};
resetTypeaheads: Subject<boolean> = new ReplaySubject(1);
/**
* Controls the visiblity of extended controls that sit below the main header.
*/
filteringCollapsed: boolean = true;
constructor() { }
filter!: SeriesFilter;
libraries: Array<FilterItem<Library>> = [];
genres: Array<FilterItem<Genre>> = [];
persons: Array<FilterItem<Person>> = [];
collectionTags: Array<FilterItem<CollectionTag>> = [];
readProgressGroup!: FormGroup;
updateApplied: number = 0;
private onDestory: Subject<void> = new Subject();
get PersonRole(): typeof PersonRole {
return PersonRole;
}
constructor(private libraryService: LibraryService, private metadataService: MetadataService, private seriesService: SeriesService,
private utilityService: UtilityService, private collectionTagService: CollectionTagService) {
this.filter = this.seriesService.createSeriesFilter();
this.readProgressGroup = new FormGroup({
read: new FormControl(this.filter.readStatus.read, []),
notRead: new FormControl(this.filter.readStatus.notRead, []),
inProgress: new FormControl(this.filter.readStatus.inProgress, []),
});
this.readProgressGroup.valueChanges.pipe(takeUntil(this.onDestory)).subscribe(changes => {
this.filter.readStatus.read = this.readProgressGroup.get('read')?.value;
this.filter.readStatus.inProgress = this.readProgressGroup.get('inProgress')?.value;
this.filter.readStatus.notRead = this.readProgressGroup.get('notRead')?.value;
});
}
ngOnInit(): void {
this.trackByIdentity = (index: number, item: any) => `${this.header}_${this.pagination?.currentPage}_${this.filterForm.get('filter')?.value}_${item.id}_${index}`;
this.trackByIdentity = (index: number, item: any) => `${this.header}_${this.pagination?.currentPage}_${this.updateApplied}`;
this.setupFormatTypeahead();
if (this.filterSettings === undefined) {
this.filterSettings = new FilterSettings();
}
this.metadataService.getAllGenres().subscribe(genres => {
this.genres = genres.map(genre => {
return {
title: genre.title,
value: genre,
selected: false,
}
});
this.setupGenreTypeahead();
});
this.libraryService.getLibrariesForMember().subscribe(libs => {
this.libraries = libs.map(lib => {
return {
title: lib.name,
value: lib,
selected: true,
}
});
this.setupLibraryTypeahead();
});
this.metadataService.getAllPeople().subscribe(res => {
this.persons = res.map(lib => {
return {
title: lib.name,
value: lib,
selected: true,
}
});
this.setupPersonTypeahead();
});
this.collectionTagService.allTags().subscribe(tags => {
this.collectionTags = tags.map(lib => {
return {
title: lib.title,
value: lib,
selected: false,
}
});
this.setupCollectionTagTypeahead();
});
}
ngOnDestroy() {
this.onDestory.next();
this.onDestory.complete();
}
setupFormatTypeahead() {
this.formatSettings.minCharacters = 0;
this.formatSettings.multiple = true;
this.formatSettings.id = 'format';
this.formatSettings.unique = true;
this.formatSettings.addIfNonExisting = false;
this.formatSettings.fetchFn = (filter: string) => of(mangaFormatFilters);
this.formatSettings.compareFn = (options: FilterItem<MangaFormat>[], filter: string) => {
const f = filter.toLowerCase();
return options.filter(m => m.title.toLowerCase() === f);
}
this.formatSettings.savedData = mangaFormatFilters;
}
setupLibraryTypeahead() {
this.librarySettings.minCharacters = 0;
this.librarySettings.multiple = true;
this.librarySettings.id = 'libraries';
this.librarySettings.unique = true;
this.librarySettings.addIfNonExisting = false;
this.librarySettings.fetchFn = (filter: string) => {
return of (this.libraries)
};
this.librarySettings.compareFn = (options: FilterItem<Library>[], filter: string) => {
const f = filter.toLowerCase();
return options.filter(m => m.title.toLowerCase() === f);
}
}
setupGenreTypeahead() {
this.genreSettings.minCharacters = 0;
this.genreSettings.multiple = true;
this.genreSettings.id = 'genres';
this.genreSettings.unique = true;
this.genreSettings.addIfNonExisting = false;
this.genreSettings.fetchFn = (filter: string) => {
return of (this.genres)
};
this.genreSettings.compareFn = (options: FilterItem<Genre>[], filter: string) => {
const f = filter.toLowerCase();
return options.filter(m => m.title.toLowerCase() === f);
}
}
setupCollectionTagTypeahead() {
this.collectionSettings.minCharacters = 0;
this.collectionSettings.multiple = true;
this.collectionSettings.id = 'collections';
this.collectionSettings.unique = true;
this.collectionSettings.addIfNonExisting = false;
this.collectionSettings.fetchFn = (filter: string) => {
return of (this.collectionTags)
};
this.collectionSettings.compareFn = (options: FilterItem<CollectionTag>[], filter: string) => {
const f = filter.toLowerCase();
return options.filter(m => m.title.toLowerCase() === f);
}
}
setupPersonTypeahead() {
this.peopleSettings = {};
var personSettings = this.createBlankPersonSettings('writers');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Writer && this.utilityService.filter(p.value.name, filter)));
};
this.peopleSettings[PersonRole.Writer] = personSettings;
personSettings = this.createBlankPersonSettings('character');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Character && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Character] = personSettings;
personSettings = this.createBlankPersonSettings('colorist');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Colorist && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Colorist] = personSettings;
personSettings = this.createBlankPersonSettings('cover-artist');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.CoverArtist && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.CoverArtist] = personSettings;
personSettings = this.createBlankPersonSettings('editor');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Editor && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Editor] = personSettings;
personSettings = this.createBlankPersonSettings('inker');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Inker && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Inker] = personSettings;
personSettings = this.createBlankPersonSettings('letterer');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Letterer && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Letterer] = personSettings;
personSettings = this.createBlankPersonSettings('penciller');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Penciller && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Penciller] = personSettings;
personSettings = this.createBlankPersonSettings('publisher');
personSettings.fetchFn = (filter: string) => {
return of (this.persons.filter(p => p.value.role == PersonRole.Publisher && this.utilityService.filter(p.title, filter)))
};
this.peopleSettings[PersonRole.Publisher] = personSettings;
}
createBlankPersonSettings(id: string) {
var personSettings = new TypeaheadSettings<FilterItem<Person>>();
personSettings.minCharacters = 0;
personSettings.multiple = true;
personSettings.unique = true;
personSettings.addIfNonExisting = false;
personSettings.id = id;
personSettings.compareFn = (options: FilterItem<Person>[], filter: string) => {
const f = filter.toLowerCase();
return options.filter(m => m.title.toLowerCase() === f);
}
return personSettings;
}
onPageChange(page: number) {
this.pageChange.emit(this.pagination);
}
@ -88,11 +312,88 @@ export class CardDetailLayoutComponent implements OnInit {
}
}
handleFilterChange(index: string) {
this.applyFilter.emit({
filterItem: this.filters[parseInt(index, 10)],
action: FilterAction.Selected
});
updateFormatFilters(formats: FilterItem<MangaFormat>[]) {
this.filter.formats = formats.map(item => item.value) || [];
}
updateLibraryFilters(libraries: FilterItem<Library>[]) {
this.filter.libraries = libraries.map(item => item.value.id) || [];
}
updateGenreFilters(genres: FilterItem<Genre>[]) {
this.filter.genres = genres.map(item => item.value.id) || [];
}
updatePersonFilters(persons: FilterItem<Person>[], role: PersonRole) {
switch (role) {
case PersonRole.CoverArtist:
this.filter.coverArtist = persons.map(p => p.value.id);
break;
case PersonRole.Character:
this.filter.character = persons.map(p => p.value.id);
break;
case PersonRole.Colorist:
this.filter.colorist = persons.map(p => p.value.id);
break;
// case PersonRole.Artist:
// this.filter.artist = persons.map(p => p.value.id);
// break;
case PersonRole.Editor:
this.filter.editor = persons.map(p => p.value.id);
break;
case PersonRole.Inker:
this.filter.inker = persons.map(p => p.value.id);
break;
case PersonRole.Letterer:
this.filter.letterer = persons.map(p => p.value.id);
break;
case PersonRole.Penciller:
this.filter.penciller = persons.map(p => p.value.id);
break;
case PersonRole.Publisher:
this.filter.publisher = persons.map(p => p.value.id);
break;
case PersonRole.Writer:
this.filter.writers = persons.map(p => p.value.id);
break;
}
}
updateCollectionFilters(tags: FilterItem<CollectionTag>[]) {
this.filter.collectionTags = tags.map(item => item.value.id) || [];
}
updateRating(rating: any) {
this.filter.rating = rating;
}
updateReadStatus(status: string) {
console.log('readstatus: ', this.filter.readStatus);
if (status === 'read') {
this.filter.readStatus.read = !this.filter.readStatus.read;
} else if (status === 'inProgress') {
this.filter.readStatus.inProgress = !this.filter.readStatus.inProgress;
} else if (status === 'notRead') {
this.filter.readStatus.notRead = !this.filter.readStatus.notRead;
}
}
getPersonsSettings(role: PersonRole) {
return this.peopleSettings[role];
}
clear() {
this.filter = this.seriesService.createSeriesFilter();
this.resetTypeaheads.next(true);
this.applyFilter.emit(this.filter);
this.updateApplied++;
}
apply() {
this.applyFilter.emit(this.filter);
this.updateApplied++;
}
}

3
UI/Web/src/app/cards/cards.module.ts
View file

@ -8,7 +8,7 @@ import { EditCollectionTagsComponent } from './_modals/edit-collection-tags/edit
import { ChangeCoverImageModalComponent } from './_modals/change-cover-image/change-cover-image-modal.component';
import { BookmarksModalComponent } from './_modals/bookmarks-modal/bookmarks-modal.component';
import { LazyLoadImageModule } from 'ng-lazyload-image';
import { NgbTooltipModule, NgbCollapseModule, NgbPaginationModule, NgbDropdownModule, NgbProgressbarModule, NgbNavModule, NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbTooltipModule, NgbCollapseModule, NgbPaginationModule, NgbDropdownModule, NgbProgressbarModule, NgbNavModule, NgbAccordionModule, NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';
import { CardActionablesComponent } from './card-item/card-actionables/card-actionables.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxFileDropModule } from 'ngx-file-drop';
@ -56,6 +56,7 @@ import { FileInfoComponent } from './file-info/file-info.component';
NgbNavModule,
NgbTooltipModule, // Card item
NgbCollapseModule,
NgbRatingModule,
NgbNavModule, //Series Detail
LazyLoadImageModule,

1
UI/Web/src/app/cards/chapter-metadata-detail/chapter-metadata-detail.component.ts
View file

@ -49,4 +49,5 @@ export class ChapterMetadataDetailComponent implements OnInit {
// }
}
}