Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-08 04:22:28 +02:00
Code Issues Projects Releases Wiki Activity

fix(webui): filter panel would not show values properly

Browse source
This commit is contained in:
Gauthier Roebroeck 2021-02-19 21:54:24 +08:00
parent 98a8f61a48
commit a63daafcce
3 changed files with 75 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -146,6 +146,15 @@ export default Vue.extend({
filters: {} as FiltersActive, filters: {} as FiltersActive,
filterUnwatch: null as any, filterUnwatch: null as any,
drawer: false, drawer: false,
filterOptions: {
library: [] as NameValue[],
genre: [] as NameValue[],
tag: [] as NameValue[],
publisher: [] as NameValue[],
language: [] as NameValue[],
ageRating: [] as NameValue[],
releaseDate: [] as NameValue[],
},
} }
}, },
props: { props: {
@ -193,13 +202,13 @@ export default Vue.extend({
this.resetParams(this.$route) this.resetParams(this.$route)
this.series = [] this.series = []
this.editElements = false this.editElements = false
this.filterOptionsPanel.library.values = [] this.filterOptions.library = []
this.filterOptionsPanel.genre.values = [] this.filterOptions.genre = []
this.filterOptionsPanel.tag.values = [] this.filterOptions.tag = []
this.filterOptionsPanel.publisher.values = [] this.filterOptions.publisher = []
this.filterOptionsPanel.language.values = [] this.filterOptions.language = []
this.filterOptionsPanel.ageRating.values = [] this.filterOptions.ageRating = []
this.filterOptionsPanel.releaseDate.values = [] this.filterOptions.releaseDate = []
this.loadCollection(to.params.collectionId) this.loadCollection(to.params.collectionId)
@ -216,14 +225,14 @@ export default Vue.extend({
}, },
filterOptionsPanel(): FiltersOptions { filterOptionsPanel(): FiltersOptions {
return { return {
library: {name: this.$i18n.t('filter.library').toString(), values: []}, library: {name: this.$i18n.t('filter.library').toString(), values: this.filterOptions.library},
status: {name: this.$i18n.t('filter.status').toString(), values: SeriesStatusKeyValue()}, status: {name: this.$i18n.t('filter.status').toString(), values: SeriesStatusKeyValue()},
genre: {name: this.$i18n.t('filter.genre').toString(), values: []}, genre: {name: this.$i18n.t('filter.genre').toString(), values: this.filterOptions.genre},
tag: {name: this.$i18n.t('filter.tag').toString(), values: []}, tag: {name: this.$i18n.t('filter.tag').toString(), values: this.filterOptions.tag},
publisher: {name: this.$i18n.t('filter.publisher').toString(), values: []}, publisher: {name: this.$i18n.t('filter.publisher').toString(), values: this.filterOptions.publisher},
language: {name: this.$i18n.t('filter.language').toString(), values: []}, language: {name: this.$i18n.t('filter.language').toString(), values: this.filterOptions.language},
ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: []}, ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: this.filterOptions.ageRating},
releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: []}, releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: this.filterOptions.releaseDate},
} as FiltersOptions } as FiltersOptions
}, },
isAdmin(): boolean { isAdmin(): boolean {
@ -235,14 +244,15 @@ export default Vue.extend({
}, },
methods: { methods: {
resetParams(route: any) { resetParams(route: any) {
if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating) { if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating || route.query.library) {
this.filters.status = parseQueryFilter(route.query.status, Object.keys(SeriesStatus)) this.filters.status = parseQueryFilter(route.query.status, Object.keys(SeriesStatus))
this.filters.readStatus = parseQueryFilter(route.query.readStatus, Object.keys(ReadStatus)) this.filters.readStatus = parseQueryFilter(route.query.readStatus, Object.keys(ReadStatus))
this.filters.genre = parseQueryFilter(route.query.genre, this.filterOptionsPanel.genre.values.map(x => x.value)) this.filters.library = parseQueryFilter(route.query.library, this.filterOptions.library.map(x => x.value))
this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptionsPanel.tag.values.map(x => x.value)) this.filters.genre = parseQueryFilter(route.query.genre, this.filterOptions.genre.map(x => x.value))
this.filters.language = parseQueryFilter(route.query.language, this.filterOptionsPanel.language.values.map(x => x.value)) this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptions.tag.map(x => x.value))
this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptionsPanel.ageRating.values.map(x => x.value)) this.filters.language = parseQueryFilter(route.query.language, this.filterOptions.language.map(x => x.value))
this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptionsPanel.releaseDate.values.map(x => x.value)) this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptions.ageRating.map(x => x.value))
this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptions.releaseDate.map(x => x.value))
} else { } else {
this.filters = this.$cookies.get(this.cookieFilter(route.params.collectionId)) || {} as FiltersActive this.filters = this.$cookies.get(this.cookieFilter(route.params.collectionId)) || {} as FiltersActive
} }
@ -281,16 +291,16 @@ export default Vue.extend({
this.collection = await this.$komgaCollections.getOneCollection(collectionId) this.collection = await this.$komgaCollections.getOneCollection(collectionId)
await this.loadSeries(collectionId) await this.loadSeries(collectionId)
this.filterOptionsPanel.library.values = this.$store.state.komgaLibraries.libraries.map((x: LibraryDto) => ({ this.filterOptions.library = this.$store.state.komgaLibraries.libraries.map((x: LibraryDto) => ({
name: x.name, name: x.name,
value: x.id, value: x.id,
})) }))
this.filterOptionsPanel.genre.values = toNameValue(await this.$komgaReferential.getGenres(undefined, collectionId)) this.filterOptions.genre = toNameValue(await this.$komgaReferential.getGenres(undefined, collectionId))
this.filterOptionsPanel.tag.values = toNameValue(await this.$komgaReferential.getTags(undefined, undefined, collectionId)) this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(undefined, undefined, collectionId))
this.filterOptionsPanel.publisher.values = toNameValue(await this.$komgaReferential.getPublishers(undefined, collectionId)) this.filterOptions.publisher = toNameValue(await this.$komgaReferential.getPublishers(undefined, collectionId))
this.filterOptionsPanel.language.values = (await this.$komgaReferential.getLanguages(undefined, collectionId)) this.filterOptions.language = (await this.$komgaReferential.getLanguages(undefined, collectionId))
this.filterOptionsPanel.ageRating.values = toNameValue(await this.$komgaReferential.getAgeRatings(undefined, collectionId)) this.filterOptions.ageRating = toNameValue(await this.$komgaReferential.getAgeRatings(undefined, collectionId))
this.filterOptionsPanel.releaseDate.values = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(undefined, collectionId)) this.filterOptions.releaseDate = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(undefined, collectionId))
}, },
updateRoute() { updateRoute() {
const loc = { const loc = {

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

@ -141,6 +141,14 @@ export default Vue.extend({
pageUnwatch: null as any, pageUnwatch: null as any,
pageSizeUnwatch: null as any, pageSizeUnwatch: null as any,
drawer: false, drawer: false,
filterOptions: {
genre: [] as NameValue[],
tag: [] as NameValue[],
publisher: [] as NameValue[],
language: [] as NameValue[],
ageRating: [] as NameValue[],
releaseDate: [] as NameValue[],
},
} }
}, },
props: { props: {
@ -193,12 +201,12 @@ export default Vue.extend({
this.totalPages = 1 this.totalPages = 1
this.totalElements = null this.totalElements = null
this.series = [] this.series = []
this.filterOptionsPanel.genre.values = [] this.filterOptions.genre = []
this.filterOptionsPanel.tag.values = [] this.filterOptions.tag = []
this.filterOptionsPanel.publisher.values = [] this.filterOptions.publisher = []
this.filterOptionsPanel.language.values = [] this.filterOptions.language = []
this.filterOptionsPanel.ageRating.values = [] this.filterOptions.ageRating = []
this.filterOptionsPanel.releaseDate.values = [] this.filterOptions.releaseDate = []
this.loadLibrary(to.params.libraryId) this.loadLibrary(to.params.libraryId)
@ -223,12 +231,12 @@ export default Vue.extend({
filterOptionsPanel(): FiltersOptions { filterOptionsPanel(): FiltersOptions {
return { return {
status: {name: this.$i18n.t('filter.status').toString(), values: SeriesStatusKeyValue()}, status: {name: this.$i18n.t('filter.status').toString(), values: SeriesStatusKeyValue()},
genre: {name: this.$i18n.t('filter.genre').toString(), values: []}, genre: {name: this.$i18n.t('filter.genre').toString(), values: this.filterOptions.genre},
tag: {name: this.$i18n.t('filter.tag').toString(), values: []}, tag: {name: this.$i18n.t('filter.tag').toString(), values: this.filterOptions.tag},
publisher: {name: this.$i18n.t('filter.publisher').toString(), values: []}, publisher: {name: this.$i18n.t('filter.publisher').toString(), values: this.filterOptions.publisher},
language: {name: this.$i18n.t('filter.language').toString(), values: []}, language: {name: this.$i18n.t('filter.language').toString(), values: this.filterOptions.language},
ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: []}, ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: this.filterOptions.ageRating},
releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: []}, releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: this.filterOptions.releaseDate},
} as FiltersOptions } as FiltersOptions
}, },
isAdmin(): boolean { isAdmin(): boolean {
@ -266,11 +274,11 @@ export default Vue.extend({
if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating) { if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating) {
this.filters.status = parseQueryFilter(route.query.status, Object.keys(SeriesStatus)) this.filters.status = parseQueryFilter(route.query.status, Object.keys(SeriesStatus))
this.filters.readStatus = parseQueryFilter(route.query.readStatus, Object.keys(ReadStatus)) this.filters.readStatus = parseQueryFilter(route.query.readStatus, Object.keys(ReadStatus))
this.filters.genre = parseQueryFilter(route.query.genre, this.filterOptionsPanel.genre.values.map(x => x.value)) this.filters.genre = parseQueryFilter(route.query.genre, this.filterOptions.genre.map(x => x.value))
this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptionsPanel.tag.values.map(x => x.value)) this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptions.tag.map(x => x.value))
this.filters.language = parseQueryFilter(route.query.language, this.filterOptionsPanel.language.values.map(x => x.value)) this.filters.language = parseQueryFilter(route.query.language, this.filterOptions.language.map(x => x.value))
this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptionsPanel.ageRating.values.map(x => x.value)) this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptions.ageRating.map(x => x.value))
this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptionsPanel.releaseDate.values.map(x => x.value)) this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptions.releaseDate.map(x => x.value))
} else { } else {
this.filters = this.$cookies.get(this.cookieFilter(route.params.libraryId)) || {} as FiltersActive this.filters = this.$cookies.get(this.cookieFilter(route.params.libraryId)) || {} as FiltersActive
} }
@ -331,12 +339,12 @@ export default Vue.extend({
this.library = this.getLibraryLazy(libraryId) this.library = this.getLibraryLazy(libraryId)
const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined
this.filterOptionsPanel.genre.values = toNameValue(await this.$komgaReferential.getGenres(requestLibraryId)) this.filterOptions.genre = toNameValue(await this.$komgaReferential.getGenres(requestLibraryId))
this.filterOptionsPanel.tag.values = toNameValue(await this.$komgaReferential.getTags(requestLibraryId)) this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(requestLibraryId))
this.filterOptionsPanel.publisher.values = toNameValue(await this.$komgaReferential.getPublishers(requestLibraryId)) this.filterOptions.publisher = toNameValue(await this.$komgaReferential.getPublishers(requestLibraryId))
this.filterOptionsPanel.language.values = (await this.$komgaReferential.getLanguages(requestLibraryId)) this.filterOptions.language = (await this.$komgaReferential.getLanguages(requestLibraryId))
this.filterOptionsPanel.ageRating.values = toNameValue(await this.$komgaReferential.getAgeRatings(requestLibraryId)) this.filterOptions.ageRating = toNameValue(await this.$komgaReferential.getAgeRatings(requestLibraryId))
this.filterOptionsPanel.releaseDate.values = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(requestLibraryId)) this.filterOptions.releaseDate = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(requestLibraryId))
await this.loadPage(libraryId, this.page, this.sortActive) await this.loadPage(libraryId, this.page, this.sortActive)
}, },

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

@ -291,6 +291,9 @@ export default Vue.extend({
pageSizeUnwatch: null as any, pageSizeUnwatch: null as any,
collections: [] as CollectionDto[], collections: [] as CollectionDto[],
drawer: false, drawer: false,
filterOptions: {
tag: [] as NameValue[],
},
} }
}, },
computed: { computed: {
@ -309,7 +312,7 @@ export default Vue.extend({
}, },
filterOptionsPanel(): FiltersOptions { filterOptionsPanel(): FiltersOptions {
return { return {
tag: {name: this.$i18n.t('filter.tag').toString(), values: []}, tag: {name: this.$i18n.t('filter.tag').toString(), values: this.filterOptions.tag},
} as FiltersOptions } as FiltersOptions
}, },
isAdmin(): boolean { isAdmin(): boolean {
@ -386,7 +389,7 @@ export default Vue.extend({
this.sortActive = this.parseQuerySortOrDefault(this.$route.query.sort) this.sortActive = this.parseQuerySortOrDefault(this.$route.query.sort)
this.filters.readStatus = parseQueryFilter(this.$route.query.readStatus, Object.keys(ReadStatus)) this.filters.readStatus = parseQueryFilter(this.$route.query.readStatus, Object.keys(ReadStatus))
this.filters.tag = parseQueryFilter(this.$route.query.tag, this.filterOptionsPanel.tag.values.map(x => x.value)) this.filters.tag = parseQueryFilter(this.$route.query.tag, this.filterOptions.tag.map(x => x.value))
if (this.$route.query.page) this.page = Number(this.$route.query.page) if (this.$route.query.page) this.page = Number(this.$route.query.page)
if (this.$route.query.pageSize) this.pageSize = Number(this.$route.query.pageSize) if (this.$route.query.pageSize) this.pageSize = Number(this.$route.query.pageSize)
@ -407,7 +410,7 @@ export default Vue.extend({
this.totalElements = null this.totalElements = null
this.books = [] this.books = []
this.collections = [] this.collections = []
this.filterOptionsPanel.tag.values = [] this.filterOptions.tag = []
this.loadSeries(to.params.seriesId) this.loadSeries(to.params.seriesId)
@ -461,7 +464,7 @@ export default Vue.extend({
this.series = await this.$komgaSeries.getOneSeries(seriesId) this.series = await this.$komgaSeries.getOneSeries(seriesId)
this.collections = await this.$komgaSeries.getCollections(seriesId) this.collections = await this.$komgaSeries.getCollections(seriesId)
this.filterOptionsPanel.tag.values = toNameValue(await this.$komgaReferential.getTags(undefined, this.seriesId)) this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(undefined, this.seriesId))
await this.loadPage(seriesId, this.page, this.sortActive) await this.loadPage(seriesId, this.page, this.sortActive)
}, },