feat(webui): filter series by release year

closes #374
This commit is contained in:
Gauthier Roebroeck 2021-01-25 14:53:45 +08:00
parent 9133f3a441
commit 33ecb72f57
5 changed files with 51 additions and 22 deletions

View file

@ -1,4 +1,4 @@
import { AxiosInstance } from 'axios'
import {AxiosInstance} from 'axios'
import {SeriesDto} from "@/types/komga-series";
const qs = require('qs')
@ -82,7 +82,7 @@ export default class KomgaCollectionsService {
async getSeries (collectionId: string, pageRequest?: PageRequest,
libraryId?: string[], status?: string[],
readStatus?: string[], genre?: string[], tag?: string[], language?: string[],
publisher?: string[], ageRating?: string[]): Promise<Page<SeriesDto>> {
publisher?: string[], ageRating?: string[], releaseDate?: string[]): Promise<Page<SeriesDto>> {
try {
const params = { ...pageRequest } as any
if (libraryId) params.library_id = libraryId
@ -93,6 +93,7 @@ export default class KomgaCollectionsService {
if (language) params.language = language
if (publisher) params.publisher = publisher
if (ageRating) params.age_rating = ageRating
if (releaseDate) params.release_year = releaseDate
return (await this.http.get(`${API_COLLECTIONS}/${collectionId}/series`, {
params: params,

View file

@ -1,4 +1,4 @@
import { AxiosInstance } from 'axios'
import {AxiosInstance} from 'axios'
const qs = require('qs')
const tags = require('language-tags')
@ -106,6 +106,25 @@ export default class KomgaReferentialService {
}
}
async getSeriesReleaseDates (libraryId?: string, collectionId?: string): Promise<string[]> {
try {
const params = {} as any
if (libraryId) params.library_id = libraryId
if (collectionId) params.collection_id = collectionId
return (await this.http.get('/api/v1/series/release-dates', {
params: params,
paramsSerializer: params => qs.stringify(params, { indices: false }),
})).data
} catch (e) {
let msg = 'An error occurred while trying to retrieve series release dates'
if (e.response.data.message) {
msg += `: ${e.response.data.message}`
}
throw new Error(msg)
}
}
async getLanguages (libraryId?: string, collectionId?: string): Promise<NameValue[]> {
try {
const params = {} as any

View file

@ -1,5 +1,5 @@
import { AxiosInstance } from 'axios'
import { BookDto } from '@/types/komga-books'
import {AxiosInstance} from 'axios'
import {BookDto} from '@/types/komga-books'
import {SeriesDto, SeriesMetadataUpdateDto} from "@/types/komga-series";
const qs = require('qs')
@ -15,7 +15,7 @@ export default class KomgaSeriesService {
async getSeries (libraryId?: string, pageRequest?: PageRequest, search?: string, status?: string[],
readStatus?: string[], genre?: string[], tag?: string[], language?: string[],
publisher?: string[], ageRating?: string[]): Promise<Page<SeriesDto>> {
publisher?: string[], ageRating?: string[], releaseDate?: string[]): Promise<Page<SeriesDto>> {
try {
const params = { ...pageRequest } as any
if (libraryId) params.library_id = libraryId
@ -27,6 +27,7 @@ export default class KomgaSeriesService {
if (language) params.language = language
if (publisher) params.publisher = publisher
if (ageRating) params.age_rating = ageRating
if (releaseDate) params.release_year = releaseDate
return (await this.http.get(API_SERIES, {
params: params,

View file

@ -109,19 +109,19 @@
import CollectionActionsMenu from '@/components/menus/CollectionActionsMenu.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import { COLLECTION_CHANGED, COLLECTION_DELETED, SERIES_CHANGED } from '@/types/events'
import {COLLECTION_CHANGED, COLLECTION_DELETED, SERIES_CHANGED} from '@/types/events'
import Vue from 'vue'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import { LIBRARIES_ALL } from '@/types/library'
import { ReadStatus } from '@/types/enum-books'
import { SeriesStatus, SeriesStatusKeyValue } from '@/types/enum-series'
import { mergeFilterParams, toNameValue } from '@/functions/filter'
import {LIBRARIES_ALL} from '@/types/library'
import {ReadStatus} from '@/types/enum-books'
import {SeriesStatus, SeriesStatusKeyValue} from '@/types/enum-series'
import {mergeFilterParams, toNameValue} from '@/functions/filter'
import FilterDrawer from '@/components/FilterDrawer.vue'
import FilterPanels from '@/components/FilterPanels.vue'
import FilterList from '@/components/FilterList.vue'
import { Location } from 'vue-router'
import {Location} from 'vue-router'
import EmptyState from '@/components/EmptyState.vue'
import { parseQueryFilter } from '@/functions/query-params'
import {parseQueryFilter} from '@/functions/query-params'
import {SeriesDto} from "@/types/komga-series";
export default Vue.extend({
@ -154,6 +154,7 @@ export default Vue.extend({
publisher: { name: 'PUBLISHER', values: [] },
language: { name: 'LANGUAGE', values: [] },
ageRating: { name: 'AGE RATING', values: [] },
releaseDate: { name: 'RELEASE DATE', values: [] },
} as FiltersOptions,
filters: {} as FiltersActive,
filterUnwatch: null as any,
@ -211,6 +212,7 @@ export default Vue.extend({
this.filterOptionsPanel.publisher.values = []
this.filterOptionsPanel.language.values = []
this.filterOptionsPanel.ageRating.values = []
this.filterOptionsPanel.releaseDate.values = []
this.loadCollection(to.params.collectionId)
@ -236,6 +238,7 @@ export default Vue.extend({
this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptionsPanel.tag.values.map(x => x.value))
this.filters.language = parseQueryFilter(route.query.language, this.filterOptionsPanel.language.values.map(x => x.value))
this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptionsPanel.ageRating.values.map(x => x.value))
this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptionsPanel.releaseDate.values.map(x => x.value))
} else {
this.filters = this.$cookies.get(this.cookieFilter(route.params.collectionId)) || {} as FiltersActive
}
@ -266,7 +269,7 @@ export default Vue.extend({
this.setWatches()
},
async loadSeries (collectionId: string) {
this.series = (await this.$komgaCollections.getSeries(collectionId, { unpaged: true } as PageRequest, this.filters.library, this.filters.status, this.filters.readStatus, this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating)).content
this.series = (await this.$komgaCollections.getSeries(collectionId, { unpaged: true } as PageRequest, this.filters.library, this.filters.status, this.filters.readStatus, this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating, this.filters.releaseDate)).content
this.seriesCopy = [...this.series]
this.selectedSeries = []
},
@ -283,6 +286,7 @@ export default Vue.extend({
this.filterOptionsPanel.publisher.values = toNameValue(await this.$komgaReferential.getPublishers(undefined, collectionId))
this.filterOptionsPanel.language.values = (await this.$komgaReferential.getLanguages(undefined, collectionId))
this.filterOptionsPanel.ageRating.values = toNameValue(await this.$komgaReferential.getAgeRatings(undefined, collectionId))
this.filterOptionsPanel.releaseDate.values = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(undefined, collectionId))
},
updateRoute () {
const loc = {

View file

@ -93,18 +93,18 @@ import ItemBrowser from '@/components/ItemBrowser.vue'
import LibraryNavigation from '@/components/LibraryNavigation.vue'
import LibraryActionsMenu from '@/components/menus/LibraryActionsMenu.vue'
import PageSizeSelect from '@/components/PageSizeSelect.vue'
import { parseQueryFilter, parseQuerySort } from '@/functions/query-params'
import { ReadStatus } from '@/types/enum-books'
import { SeriesStatus, SeriesStatusKeyValue } from '@/types/enum-series'
import { LIBRARY_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
import {parseQueryFilter, parseQuerySort} from '@/functions/query-params'
import {ReadStatus} from '@/types/enum-books'
import {SeriesStatus, SeriesStatusKeyValue} from '@/types/enum-series'
import {LIBRARY_CHANGED, LIBRARY_DELETED, SERIES_CHANGED} from '@/types/events'
import Vue from 'vue'
import { Location } from 'vue-router'
import { LIBRARIES_ALL } from '@/types/library'
import {Location} from 'vue-router'
import {LIBRARIES_ALL} from '@/types/library'
import FilterDrawer from '@/components/FilterDrawer.vue'
import SortList from '@/components/SortList.vue'
import FilterPanels from '@/components/FilterPanels.vue'
import FilterList from '@/components/FilterList.vue'
import { mergeFilterParams, sortOrFilterActive, toNameValue } from '@/functions/filter'
import {mergeFilterParams, sortOrFilterActive, toNameValue} from '@/functions/filter'
import {SeriesDto} from "@/types/komga-series";
const cookiePageSize = 'pagesize'
@ -150,6 +150,7 @@ export default Vue.extend({
publisher: { name: 'PUBLISHER', values: [] },
language: { name: 'LANGUAGE', values: [] },
ageRating: { name: 'AGE RATING', values: [] },
releaseDate: { name: 'RELEASE DATE', values: [] },
} as FiltersOptions,
filters: {} as FiltersActive,
sortUnwatch: null as any,
@ -214,6 +215,7 @@ export default Vue.extend({
this.filterOptionsPanel.publisher.values = []
this.filterOptionsPanel.language.values = []
this.filterOptionsPanel.ageRating.values = []
this.filterOptionsPanel.releaseDate.values = []
this.loadLibrary(to.params.libraryId)
@ -262,6 +264,7 @@ export default Vue.extend({
this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptionsPanel.tag.values.map(x => x.value))
this.filters.language = parseQueryFilter(route.query.language, this.filterOptionsPanel.language.values.map(x => x.value))
this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptionsPanel.ageRating.values.map(x => x.value))
this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptionsPanel.releaseDate.values.map(x => x.value))
} else {
this.filters = this.$cookies.get(this.cookieFilter(route.params.libraryId)) || {} as FiltersActive
}
@ -327,6 +330,7 @@ export default Vue.extend({
this.filterOptionsPanel.publisher.values = toNameValue(await this.$komgaReferential.getPublishers(requestLibraryId))
this.filterOptionsPanel.language.values = (await this.$komgaReferential.getLanguages(requestLibraryId))
this.filterOptionsPanel.ageRating.values = toNameValue(await this.$komgaReferential.getAgeRatings(requestLibraryId))
this.filterOptionsPanel.releaseDate.values = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(requestLibraryId))
await this.loadPage(libraryId, this.page, this.sortActive)
},
@ -357,7 +361,7 @@ export default Vue.extend({
}
const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined
const seriesPage = await this.$komgaSeries.getSeries(requestLibraryId, pageRequest, undefined, this.filters.status, this.filters.readStatus, this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating)
const seriesPage = await this.$komgaSeries.getSeries(requestLibraryId, pageRequest, undefined, this.filters.status, this.filters.readStatus, this.filters.genre, this.filters.tag, this.filters.language, this.filters.publisher, this.filters.ageRating, this.filters.releaseDate)
this.totalPages = seriesPage.totalPages
this.totalElements = seriesPage.totalElements