Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-20 15:34:17 +01:00
Code Issues Projects Releases Wiki Activity

fix(webui): query param doesn't work with values containing comma

Browse source 
closes #557
This commit is contained in:
Gauthier Roebroeck 2021-06-21 17:03:00 +08:00
parent 7d7fbad749
commit b447101bcc
7 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
komga-webui/src/functions/filter.ts
View file

@ -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]
}
}

8
komga-webui/src/functions/query-params.ts
View file

@ -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(',') : []
}

11
komga-webui/src/router.ts
View file

@ -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: '/',

4
komga-webui/src/views/BrowseBook.vue
View file

@ -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

29
komga-webui/src/views/BrowseCollection.vue
View file

@ -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

20
komga-webui/src/views/BrowseLibraries.vue
View file

@ -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

22
komga-webui/src/views/BrowseSeries.vue
View file

@ -112,20 +112,20 @@
<v-row class="text-body-2">
<v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto">
<v-chip label small link :color="statusChip.color" :text-color="statusChip.text"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {status: series.metadata.status}}">
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {status: [series.metadata.status]}}">
{{ $t(`enums.series_status.${series.metadata.status}`) }}
</v-chip>
</v-col>
<v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto">
<v-chip label small link v-if="series.metadata.ageRating"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {ageRating: series.metadata.ageRating}}"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {ageRating: [series.metadata.ageRating]}}"
>
{{ series.metadata.ageRating }}+
</v-chip>
</v-col>
<v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto">
<v-chip label small link
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {language: series.metadata.language}}"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {language: [series.metadata.language]}}"
v-if="series.metadata.language"
>
{{ languageDisplay }}
@ -219,7 +219,7 @@
<v-chip
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
:title="series.metadata.publisher"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {publisher: series.metadata.publisher}}"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {publisher: [series.metadata.publisher]}}"
label
small
outlined
@ -249,7 +249,7 @@
:key="i"
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
:title="t"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {genre: t}}"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {genre: [t]}}"
label
small
outlined
@ -280,7 +280,7 @@
:key="i"
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
:title="t"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {tag: t}}"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {tag: [t]}}"
label
small
outlined
@ -315,7 +315,7 @@
:key="i"
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
:title="name"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {[role]: name}}"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {[role]: [name]}}"
label
small
outlined
@ -378,7 +378,7 @@ import ItemBrowser from '@/components/ItemBrowser.vue'
import ItemCard from '@/components/ItemCard.vue'
import SeriesActionsMenu from '@/components/menus/SeriesActionsMenu.vue'
import PageSizeSelect from '@/components/PageSizeSelect.vue'
import {parseQueryParam, parseQueryParamAndFilter, parseQuerySort} from '@/functions/query-params'
import {parseQuerySort} from '@/functions/query-params'
import {seriesFileUrl, seriesThumbnailUrl} from '@/functions/urls'
import {ReadStatus, replaceCompositeReadStatus} from '@/types/enum-books'
import {
@ -628,11 +628,11 @@ export default Vue.extend({
this.$set(this.filterOptions, 'tag', toNameValue(await this.$komgaReferential.getBookTags(seriesId)))
// filter query params with available filter values
this.$set(this.filters, 'readStatus', parseQueryParamAndFilter(this.$route.query.readStatus, Object.keys(ReadStatus)))
this.$set(this.filters, 'tag', parseQueryParamAndFilter(this.$route.query.tag, this.filterOptions.tag.map(x => 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() {