fix(webui): properly restore query params on page reload

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() {
+  async mounted() {
-    this.loadCollection(this.collectionId)
+    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) => ({
+      await this.loadSeries(collectionId)
-        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))
     },
     updateRoute() {
       const loc = {

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() {

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)
+    await this.resetParams(this.$route, this.seriesId)
-
-    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))
-
     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)
+      await this.resetParams(to, to.params.seriesId)
-      this.filters.readStatus = parseQueryFilter(to.query.readStatus, Object.keys(ReadStatus))
       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 {