diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue index 8faa951d3..89915aa66 100644 --- a/komga-webui/src/views/BrowseCollection.vue +++ b/komga-webui/src/views/BrowseCollection.vue @@ -143,7 +143,17 @@ export default Vue.extend({ seriesCopy: [] as SeriesDto[], selectedSeries: [] as SeriesDto[], editElements: false, - filters: {} as FiltersActive, + // we need to define all the possible values, else the properties are not reactive when changed + filters: { + status: [], + readStatus: [], + library: [], + genre: [], + tag: [], + language: [], + ageRating: [], + releaseDate: [], + } as FiltersActive, filterUnwatch: null as any, drawer: false, filterOptions: { @@ -187,19 +197,19 @@ export default Vue.extend({ this.$eventHub.$off(COLLECTION_DELETED, this.afterDelete) this.$eventHub.$off(SERIES_CHANGED, this.reloadSeries) }, - mounted() { - this.loadCollection(this.collectionId) + async mounted() { + await this.resetParams(this.$route, this.collectionId) - this.resetParams(this.$route) + this.loadCollection(this.collectionId) this.setWatches() }, - beforeRouteUpdate(to, from, next) { + async beforeRouteUpdate(to, from, next) { if (to.params.collectionId !== from.params.collectionId) { this.unsetWatches() // reset - this.resetParams(this.$route) + await this.resetParams(this.$route, to.params.collectionId) this.series = [] this.editElements = false this.filterOptions.library = [] @@ -250,7 +260,20 @@ export default Vue.extend({ }, }, methods: { - resetParams(route: any) { + async resetParams(route: any, collectionId: string) { + // load dynamic filters + this.filterOptions.library = this.$store.state.komgaLibraries.libraries.map((x: LibraryDto) => ({ + name: x.name, + value: x.id, + })) + 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)) + + // filter query params with available filter values 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)) @@ -296,18 +319,8 @@ export default Vue.extend({ }, async loadCollection(collectionId: string) { this.collection = await this.$komgaCollections.getOneCollection(collectionId) - await this.loadSeries(collectionId) - this.filterOptions.library = this.$store.state.komgaLibraries.libraries.map((x: LibraryDto) => ({ - name: x.name, - value: x.id, - })) - 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)) + await this.loadSeries(collectionId) }, updateRoute() { const loc = { diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue index 0b0bd64df..6f5e7acd5 100644 --- a/komga-webui/src/views/BrowseLibraries.vue +++ b/komga-webui/src/views/BrowseLibraries.vue @@ -142,7 +142,16 @@ export default Vue.extend({ totalElements: null as number | null, sortActive: {} as SortActive, sortDefault: {key: 'metadata.titleSort', order: 'asc'} as SortActive, - filters: {} as FiltersActive, + // we need to define all the possible values, else the properties are not reactive when changed + filters: { + status: [], + readStatus: [], + genre: [], + tag: [], + language: [], + ageRating: [], + releaseDate: [], + } as FiltersActive, sortUnwatch: null as any, filterUnwatch: null as any, pageUnwatch: null as any, @@ -190,7 +199,7 @@ export default Vue.extend({ } // restore from query param - this.resetParams(this.$route) + await this.resetParams(this.$route, this.libraryId) if (this.$route.query.page) this.page = Number(this.$route.query.page) if (this.$route.query.pageSize) this.pageSize = Number(this.$route.query.pageSize) @@ -198,12 +207,12 @@ export default Vue.extend({ this.setWatches() }, - beforeRouteUpdate(to, from, next) { + async beforeRouteUpdate(to, from, next) { if (to.params.libraryId !== from.params.libraryId) { this.unsetWatches() // reset - this.resetParams(to) + await this.resetParams(to, to.params.libraryId) this.page = 1 this.totalPages = 1 this.totalElements = null @@ -281,11 +290,22 @@ export default Vue.extend({ cookieFilter(libraryId: string): string { return `library.filter.${libraryId}` }, - resetParams(route: any) { + async resetParams(route: any, libraryId: string) { this.sortActive = parseQuerySort(route.query.sort, this.sortOptions) || this.$cookies.get(this.cookieSort(route.params.libraryId)) || this.$_.clone(this.sortDefault) + const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined + + // load dynamic filters + 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)) + + // filter query params with available filter values 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)) @@ -353,14 +373,6 @@ export default Vue.extend({ async loadLibrary(libraryId: string) { this.library = this.getLibraryLazy(libraryId) - const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined - 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) }, updateRoute() { diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue index c44d1ad5d..e6b23a700 100644 --- a/komga-webui/src/views/BrowseSeries.vue +++ b/komga-webui/src/views/BrowseSeries.vue @@ -291,7 +291,10 @@ export default Vue.extend({ totalElements: null as number | null, sortActive: {} as SortActive, sortDefault: {key: 'metadata.numberSort', order: 'asc'} as SortActive, - filters: {} as FiltersActive, + filters: { + readStatus: [], + tag: [], + } as FiltersActive, sortUnwatch: null as any, filterUnwatch: null as any, pageUnwatch: null as any, @@ -394,11 +397,7 @@ export default Vue.extend({ } // restore from query param - 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.filterOptions.tag.map(x => x.value)) - + await this.resetParams(this.$route, this.seriesId) if (this.$route.query.page) this.page = Number(this.$route.query.page) if (this.$route.query.pageSize) this.pageSize = Number(this.$route.query.pageSize) @@ -411,8 +410,7 @@ export default Vue.extend({ this.unsetWatches() // reset - this.sortActive = this.parseQuerySortOrDefault(to.query.sort) - this.filters.readStatus = parseQueryFilter(to.query.readStatus, Object.keys(ReadStatus)) + await this.resetParams(to, to.params.seriesId) this.page = 1 this.totalPages = 1 this.totalElements = null @@ -428,6 +426,16 @@ export default Vue.extend({ next() }, methods: { + async resetParams(route: any, seriesId: string) { + this.sortActive = this.parseQuerySortOrDefault(route.query.sort) + + // load dynamic filters + this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(undefined, this.seriesId)) + + // filter query params with available filter values + this.filters.readStatus = parseQueryFilter(this.$route.query.readStatus, Object.keys(ReadStatus)) + this.filters.tag = parseQueryFilter(this.$route.query.tag, this.filterOptions.tag.map(x => x.value)) + }, setWatches() { this.sortUnwatch = this.$watch('sortActive', this.updateRouteAndReload) this.filterUnwatch = this.$watch('filters', this.updateRouteAndReload) @@ -472,8 +480,6 @@ export default Vue.extend({ this.series = await this.$komgaSeries.getOneSeries(seriesId) this.collections = await this.$komgaSeries.getCollections(seriesId) - this.filterOptions.tag = toNameValue(await this.$komgaReferential.getTags(undefined, this.seriesId)) - await this.loadPage(seriesId, this.page, this.sortActive) }, parseQuerySortOrDefault(querySort: any): SortActive {