From a63daafcce8975df46b9d65be83e9d1aac4fb374 Mon Sep 17 00:00:00 2001 From: Gauthier Roebroeck Date: Fri, 19 Feb 2021 21:54:24 +0800 Subject: [PATCH] fix(webui): filter panel would not show values properly --- komga-webui/src/views/BrowseCollection.vue | 64 +++++++++++++--------- komga-webui/src/views/BrowseLibraries.vue | 54 ++++++++++-------- komga-webui/src/views/BrowseSeries.vue | 11 ++-- 3 files changed, 75 insertions(+), 54 deletions(-) diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue index cd7235d70..7554cc8f3 100644 --- a/komga-webui/src/views/BrowseCollection.vue +++ b/komga-webui/src/views/BrowseCollection.vue @@ -146,6 +146,15 @@ export default Vue.extend({ filters: {} as FiltersActive, filterUnwatch: null as any, 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: { @@ -193,13 +202,13 @@ export default Vue.extend({ this.resetParams(this.$route) this.series = [] this.editElements = false - this.filterOptionsPanel.library.values = [] - this.filterOptionsPanel.genre.values = [] - this.filterOptionsPanel.tag.values = [] - this.filterOptionsPanel.publisher.values = [] - this.filterOptionsPanel.language.values = [] - this.filterOptionsPanel.ageRating.values = [] - this.filterOptionsPanel.releaseDate.values = [] + this.filterOptions.library = [] + this.filterOptions.genre = [] + this.filterOptions.tag = [] + this.filterOptions.publisher = [] + this.filterOptions.language = [] + this.filterOptions.ageRating = [] + this.filterOptions.releaseDate = [] this.loadCollection(to.params.collectionId) @@ -216,14 +225,14 @@ export default Vue.extend({ }, filterOptionsPanel(): FiltersOptions { 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()}, - genre: {name: this.$i18n.t('filter.genre').toString(), values: []}, - tag: {name: this.$i18n.t('filter.tag').toString(), values: []}, - publisher: {name: this.$i18n.t('filter.publisher').toString(), values: []}, - language: {name: this.$i18n.t('filter.language').toString(), values: []}, - ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: []}, - releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: []}, + genre: {name: this.$i18n.t('filter.genre').toString(), values: this.filterOptions.genre}, + tag: {name: this.$i18n.t('filter.tag').toString(), values: this.filterOptions.tag}, + publisher: {name: this.$i18n.t('filter.publisher').toString(), values: this.filterOptions.publisher}, + language: {name: this.$i18n.t('filter.language').toString(), values: this.filterOptions.language}, + ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: this.filterOptions.ageRating}, + releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: this.filterOptions.releaseDate}, } as FiltersOptions }, isAdmin(): boolean { @@ -235,14 +244,15 @@ export default Vue.extend({ }, methods: { 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.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.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)) + this.filters.library = parseQueryFilter(route.query.library, this.filterOptions.library.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.filterOptions.tag.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.filterOptions.ageRating.map(x => x.value)) + this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptions.releaseDate.map(x => x.value)) } else { 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) 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, value: x.id, })) - this.filterOptionsPanel.genre.values = toNameValue(await this.$komgaReferential.getGenres(undefined, collectionId)) - this.filterOptionsPanel.tag.values = toNameValue(await this.$komgaReferential.getTags(undefined, undefined, collectionId)) - 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)) + this.filterOptions.genre = toNameValue(await this.$komgaReferential.getGenres(undefined, collectionId)) + this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(undefined, undefined, collectionId)) + this.filterOptions.publisher = toNameValue(await this.$komgaReferential.getPublishers(undefined, collectionId)) + this.filterOptions.language = (await this.$komgaReferential.getLanguages(undefined, collectionId)) + this.filterOptions.ageRating = toNameValue(await this.$komgaReferential.getAgeRatings(undefined, collectionId)) + this.filterOptions.releaseDate = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(undefined, collectionId)) }, updateRoute() { const loc = { diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue index 08546f457..fb8267b20 100644 --- a/komga-webui/src/views/BrowseLibraries.vue +++ b/komga-webui/src/views/BrowseLibraries.vue @@ -141,6 +141,14 @@ export default Vue.extend({ pageUnwatch: null as any, pageSizeUnwatch: null as any, drawer: false, + filterOptions: { + genre: [] as NameValue[], + tag: [] as NameValue[], + publisher: [] as NameValue[], + language: [] as NameValue[], + ageRating: [] as NameValue[], + releaseDate: [] as NameValue[], + }, } }, props: { @@ -193,12 +201,12 @@ export default Vue.extend({ this.totalPages = 1 this.totalElements = null this.series = [] - this.filterOptionsPanel.genre.values = [] - this.filterOptionsPanel.tag.values = [] - this.filterOptionsPanel.publisher.values = [] - this.filterOptionsPanel.language.values = [] - this.filterOptionsPanel.ageRating.values = [] - this.filterOptionsPanel.releaseDate.values = [] + this.filterOptions.genre = [] + this.filterOptions.tag = [] + this.filterOptions.publisher = [] + this.filterOptions.language = [] + this.filterOptions.ageRating = [] + this.filterOptions.releaseDate = [] this.loadLibrary(to.params.libraryId) @@ -223,12 +231,12 @@ export default Vue.extend({ filterOptionsPanel(): FiltersOptions { return { status: {name: this.$i18n.t('filter.status').toString(), values: SeriesStatusKeyValue()}, - genre: {name: this.$i18n.t('filter.genre').toString(), values: []}, - tag: {name: this.$i18n.t('filter.tag').toString(), values: []}, - publisher: {name: this.$i18n.t('filter.publisher').toString(), values: []}, - language: {name: this.$i18n.t('filter.language').toString(), values: []}, - ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: []}, - releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: []}, + genre: {name: this.$i18n.t('filter.genre').toString(), values: this.filterOptions.genre}, + tag: {name: this.$i18n.t('filter.tag').toString(), values: this.filterOptions.tag}, + publisher: {name: this.$i18n.t('filter.publisher').toString(), values: this.filterOptions.publisher}, + language: {name: this.$i18n.t('filter.language').toString(), values: this.filterOptions.language}, + ageRating: {name: this.$i18n.t('filter.age_rating').toString(), values: this.filterOptions.ageRating}, + releaseDate: {name: this.$i18n.t('filter.release_date').toString(), values: this.filterOptions.releaseDate}, } as FiltersOptions }, 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) { this.filters.status = parseQueryFilter(route.query.status, Object.keys(SeriesStatus)) 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.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)) + this.filters.genre = parseQueryFilter(route.query.genre, this.filterOptions.genre.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.filterOptions.language.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 { 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) const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined - this.filterOptionsPanel.genre.values = toNameValue(await this.$komgaReferential.getGenres(requestLibraryId)) - this.filterOptionsPanel.tag.values = toNameValue(await this.$komgaReferential.getTags(requestLibraryId)) - 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)) + this.filterOptions.genre = toNameValue(await this.$komgaReferential.getGenres(requestLibraryId)) + this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(requestLibraryId)) + this.filterOptions.publisher = toNameValue(await this.$komgaReferential.getPublishers(requestLibraryId)) + this.filterOptions.language = (await this.$komgaReferential.getLanguages(requestLibraryId)) + this.filterOptions.ageRating = toNameValue(await this.$komgaReferential.getAgeRatings(requestLibraryId)) + this.filterOptions.releaseDate = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(requestLibraryId)) await this.loadPage(libraryId, this.page, this.sortActive) }, diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue index 284c4eeae..292e56e3a 100644 --- a/komga-webui/src/views/BrowseSeries.vue +++ b/komga-webui/src/views/BrowseSeries.vue @@ -291,6 +291,9 @@ export default Vue.extend({ pageSizeUnwatch: null as any, collections: [] as CollectionDto[], drawer: false, + filterOptions: { + tag: [] as NameValue[], + }, } }, computed: { @@ -309,7 +312,7 @@ export default Vue.extend({ }, filterOptionsPanel(): FiltersOptions { return { - tag: {name: this.$i18n.t('filter.tag').toString(), values: []}, + tag: {name: this.$i18n.t('filter.tag').toString(), values: this.filterOptions.tag}, } as FiltersOptions }, isAdmin(): boolean { @@ -386,7 +389,7 @@ export default Vue.extend({ this.sortActive = this.parseQuerySortOrDefault(this.$route.query.sort) 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.pageSize) this.pageSize = Number(this.$route.query.pageSize) @@ -407,7 +410,7 @@ export default Vue.extend({ this.totalElements = null this.books = [] this.collections = [] - this.filterOptionsPanel.tag.values = [] + this.filterOptions.tag = [] this.loadSeries(to.params.seriesId) @@ -461,7 +464,7 @@ export default Vue.extend({ this.series = await this.$komgaSeries.getOneSeries(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) },