From b447101bccda6b4b31a80c048288346026e8292c Mon Sep 17 00:00:00 2001 From: Gauthier Roebroeck Date: Mon, 21 Jun 2021 17:03:00 +0800 Subject: [PATCH] fix(webui): query param doesn't work with values containing comma closes #557 --- komga-webui/src/functions/filter.ts | 2 +- komga-webui/src/functions/query-params.ts | 8 ------ komga-webui/src/router.ts | 11 +++++++- komga-webui/src/views/BrowseBook.vue | 4 +-- komga-webui/src/views/BrowseCollection.vue | 29 +++++++++++----------- komga-webui/src/views/BrowseLibraries.vue | 20 +++++++-------- komga-webui/src/views/BrowseSeries.vue | 22 ++++++++-------- 7 files changed, 48 insertions(+), 48 deletions(-) diff --git a/komga-webui/src/functions/filter.ts b/komga-webui/src/functions/filter.ts index 7f796d6be..7bbdd61d5 100644 --- a/komga-webui/src/functions/filter.ts +++ b/komga-webui/src/functions/filter.ts @@ -6,7 +6,7 @@ export function sortOrFilterActive (sortActive: SortActive, sortDefault: SortAct export function mergeFilterParams (filter: FiltersActive, query: any) { for (const f of Object.keys(filter)) { - if (filter[f].length !== 0) query[f] = `${filter[f]}` + if (filter[f].length !== 0) query[f] = filter[f] } } diff --git a/komga-webui/src/functions/query-params.ts b/komga-webui/src/functions/query-params.ts index 06792182b..5837bb009 100644 --- a/komga-webui/src/functions/query-params.ts +++ b/komga-webui/src/functions/query-params.ts @@ -10,11 +10,3 @@ export function parseQuerySort (querySort: any, sortOptions: SortOption[]): Sort } return customSort } - -export function parseQueryParamAndFilter (queryParam: any, enumeration: string[]): string[] { - return queryParam ? queryParam.toString().split(',').filter((x: string) => enumeration.includes(x)) : [] -} - -export function parseQueryParam (queryParam: any): string[] { - return queryParam ? queryParam.toString().split(',') : [] -} diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts index 8f58b1f28..295ba2379 100644 --- a/komga-webui/src/router.ts +++ b/komga-webui/src/router.ts @@ -2,7 +2,9 @@ import urls from '@/functions/urls' import Vue from 'vue' import Router from 'vue-router' import store from './store' -import {LIBRARIES_ALL, LIBRARY_ROUTE} from "@/types/library"; +import {LIBRARIES_ALL, LIBRARY_ROUTE} from "@/types/library" + +const qs = require('qs') Vue.use(Router) @@ -36,6 +38,13 @@ const getLibraryRoute = (libraryId: string) => { const router = new Router({ mode: 'history', base: urls.base, + parseQuery(query: string) { + return qs.parse(query) + }, + stringifyQuery(query: Object) { + const res = qs.stringify(query) + return res ? `?${res}` : '' + }, routes: [ { path: '/', diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue index 45243ce1b..06d9214db 100644 --- a/komga-webui/src/views/BrowseBook.vue +++ b/komga-webui/src/views/BrowseBook.vue @@ -235,7 +235,7 @@ :key="i" :class="$vuetify.rtl ? 'ml-2' : 'mr-2'" :title="name" - :to="{name:'browse-series', params: {seriesId: book.seriesId }, query: {[role]: name}}" + :to="{name:'browse-series', params: {seriesId: book.seriesId }, query: {[role]: [name]}}" label small outlined @@ -265,7 +265,7 @@ :key="i" :class="$vuetify.rtl ? 'ml-2' : 'mr-2'" :title="t" - :to="{name:'browse-series', params: {seriesId: book.seriesId}, query: {tag: t}}" + :to="{name:'browse-series', params: {seriesId: book.seriesId}, query: {tag: [t]}}" label small outlined diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue index 87c34ebf1..f859a13f7 100644 --- a/komga-webui/src/views/BrowseCollection.vue +++ b/komga-webui/src/views/BrowseCollection.vue @@ -126,11 +126,10 @@ import FilterPanels from '@/components/FilterPanels.vue' import FilterList from '@/components/FilterList.vue' import {Location} from 'vue-router' import EmptyState from '@/components/EmptyState.vue' -import {parseQueryParam} from '@/functions/query-params' -import {SeriesDto} from "@/types/komga-series"; -import {authorRoles} from "@/types/author-roles"; -import {AuthorDto} from "@/types/komga-books"; -import {CollectionSseDto, SeriesSseDto} from "@/types/komga-sse"; +import {SeriesDto} from "@/types/komga-series" +import {authorRoles} from "@/types/author-roles" +import {AuthorDto} from "@/types/komga-books" +import {CollectionSseDto, SeriesSseDto} from "@/types/komga-sse" export default Vue.extend({ name: 'BrowseCollection', @@ -304,18 +303,18 @@ export default Vue.extend({ let activeFilters: any if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating || route.query.library || route.query.publisher || authorRoles.some(role => role in route.query)) { activeFilters = { - status: parseQueryParam(route.query.status), - readStatus: parseQueryParam(route.query.readStatus), - library: parseQueryParam(route.query.library), - genre: parseQueryParam(route.query.genre), - tag: parseQueryParam(route.query.tag), - publisher: parseQueryParam(route.query.publisher), - language: parseQueryParam(route.query.language), - ageRating: parseQueryParam(route.query.ageRating), - releaseDate: parseQueryParam(route.query.releaseDate), + status: route.query.status || [], + readStatus: route.query.readStatus || [], + library: route.query.library || [], + genre: route.query.genre || [], + tag: route.query.tag || [], + publisher: route.query.publisher || [], + language: route.query.language || [], + ageRating: route.query.ageRating || [], + releaseDate: route.query.releaseDate || [], } authorRoles.forEach((role: string) => { - activeFilters[role] = parseQueryParam(route.query[role]) + activeFilters[role] = route.query[role] || [] }) } else { activeFilters = this.$store.getters.getCollectionFilter(route.params.collectionId) || {} as FiltersActive diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue index a276bbc63..4af2c498c 100644 --- a/komga-webui/src/views/BrowseLibraries.vue +++ b/komga-webui/src/views/BrowseLibraries.vue @@ -109,7 +109,7 @@ 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 {parseQueryParam, parseQuerySort} from '@/functions/query-params' +import {parseQuerySort} from '@/functions/query-params' import {ReadStatus, replaceCompositeReadStatus} from '@/types/enum-books' import {SeriesStatus, SeriesStatusKeyValue} from '@/types/enum-series' import {LIBRARY_CHANGED, LIBRARY_DELETED, SERIES_ADDED, SERIES_CHANGED, SERIES_DELETED} from '@/types/events' @@ -337,17 +337,17 @@ export default Vue.extend({ let activeFilters: any if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating || route.query.publisher || authorRoles.some(role => role in route.query)) { activeFilters = { - status: parseQueryParam(route.query.status), - readStatus: parseQueryParam(route.query.readStatus), - genre: parseQueryParam(route.query.genre), - tag: parseQueryParam(route.query.tag), - publisher: parseQueryParam(route.query.publisher), - language: parseQueryParam(route.query.language), - ageRating: parseQueryParam(route.query.ageRating), - releaseDate: parseQueryParam(route.query.releaseDate), + status: route.query.status || [], + readStatus: route.query.readStatus || [], + genre: route.query.genre || [], + tag: route.query.tag || [], + publisher: route.query.publisher || [], + language: route.query.language || [], + ageRating: route.query.ageRating || [], + releaseDate: route.query.releaseDate || [], } authorRoles.forEach((role: string) => { - activeFilters[role] = parseQueryParam(route.query[role]) + activeFilters[role] = route.query[role] || [] }) } else { activeFilters = this.$store.getters.getLibraryFilter(route.params.libraryId) || {} as FiltersActive diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue index 7f717899c..05fe31ce1 100644 --- a/komga-webui/src/views/BrowseSeries.vue +++ b/komga-webui/src/views/BrowseSeries.vue @@ -112,20 +112,20 @@ + :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {status: [series.metadata.status]}}"> {{ $t(`enums.series_status.${series.metadata.status}`) }} {{ series.metadata.ageRating }}+ {{ languageDisplay }} @@ -219,7 +219,7 @@ x.value))) + this.$set(this.filters, 'readStatus', (route.query.readStatus || []).filter((x: string) => Object.keys(ReadStatus).includes(x))) + this.$set(this.filters, 'tag', (route.query.tag || []).filter((x: string) => this.filterOptions.tag.map(x => x.value).includes(x))) authorRoles.forEach((role: string) => { //@ts-ignore - this.$set(this.filters, role, parseQueryParam(route.query[role])) + this.$set(this.filters, role, route.query[role] || []) }) }, setWatches() {