handle paging in url when browsing libraries along with scroll position for browser history

komga-webui/src/components/BrowseLibraries.vue

@@ -42,55 +42,88 @@ export default Vue.extend({
     return {
       libraryName: '',
       series: [] as SeriesDto[],
-      seriesPage: {} as Page<SeriesDto>,
+      lastPage: false,
+      page: null as number | null,
       infiniteId: +new Date()
     }
   },
   props: {
     libraryId: {
       type: Number,
-      required: false
+      default: 0
     }
   },
   async created () {
     this.libraryName = await this.getLibraryName()
   },
-  watch: {
-    async libraryId (val) {
-      this.libraryName = await this.getLibraryName()
+  beforeRouteUpdate (to, from, next) {
+    if (to.params.libraryId !== from.params.libraryId) {
+      this.libraryName = this.getLibraryNameLazy(Number(to.params.libraryId))
       this.series = []
-      this.seriesPage = {} as Page<SeriesDto>
+      this.lastPage = false
+      this.page = null
       this.infiniteId += 1
     }
-  },
-  mounted (): void {
+
+    next()
   },
   methods: {
     async infiniteHandler ($state: any) {
       await this.loadNextPage()
-      if (this.seriesPage.last) {
+      if (this.lastPage) {
         $state.complete()
       } else {
         $state.loaded()
       }
     },
     async loadNextPage () {
-      if (this.$_.get(this.seriesPage, 'last', false) !== true) {
+      if (!this.lastPage) {
+        let updateRoute = true
+        const pageSize = 50
         const pageRequest = {
-          page: this.$_.get(this.seriesPage, 'number', -1) + 1,
-          size: 50
+          page: 0,
+          size: pageSize
         } as PageRequest
 
-        this.seriesPage = await this.$komgaSeries.getSeries(this.libraryId, pageRequest)
-        this.series = this.series.concat(this.seriesPage.content)
+        if (this.page != null) {
+          pageRequest.page = this.page! + 1
+        } else if (this.$route.params.page) {
+          pageRequest.size = (Number(this.$route.params.page) + 1) * pageSize
+          updateRoute = false
+        }
+
+        let libraryId
+        if (this.libraryId !== 0) {
+          libraryId = this.libraryId
+        }
+        const newPage = await this.$komgaSeries.getSeries(libraryId, pageRequest)
+        this.lastPage = newPage.last
+        this.series = this.series.concat(newPage.content)
+
+        if (updateRoute) {
+          this.page = newPage.number
+          this.$router.replace({
+            name: this.$route.name,
+            params: { libraryId: this.$route.params.libraryId, page: newPage.number.toString() }
+          })
+        } else {
+          this.page = Number(this.$route.params.page)
+        }
       }
     },
     async getLibraryName (): Promise<string> {
-      if (this.libraryId) {
+      if (this.libraryId !== 0) {
         return (await this.$komgaLibraries.getLibrary(this.libraryId)).name
       } else {
         return 'All libraries'
       }
+    },
+    getLibraryNameLazy (libraryId: any): string {
+      if (libraryId !== 0) {
+        return (this.$store.getters.getLibraryById(libraryId)).name
+      } else {
+        return 'All libraries'
+      }
     }
   }
 })

komga-webui/src/router.ts

@@ -56,10 +56,13 @@ export default new Router({
           component: () => import(/* webpackChunkName: "account" */ './components/AccountSettings.vue')
         },
         {
-          path: '/libraries/:libraryId?',
+          path: '/libraries/:libraryId/:page?',
           name: 'browse-libraries',
           component: () => import(/* webpackChunkName: "browse" */ './components/BrowseLibraries.vue'),
-          props: (route) => ({ libraryId: Number(route.params.libraryId) })
+          props: (route) => (
+            {
+              libraryId: Number(route.params.libraryId)
+            })
         },
         {
           path: '/series/:seriesId',
@@ -76,5 +79,18 @@ export default new Router({
       component:
         () => import(/* webpackChunkName: "notfound" */ './views/PageNotFound.vue')
     }
-  ]
+  ],
+  scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve(savedPosition)
+        }, 2000)
+      })
+    } else {
+      if (to.name !== from.name) {
+        return { x: 0, y: 0 }
+      }
+    }
+  }
 })

komga-webui/src/views/Home.vue

@@ -2,7 +2,6 @@
   <div>
     <v-app-bar
       app
-      hide-on-scroll
     >
       <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
 
@@ -40,7 +39,7 @@
           </v-list-item-content>
         </v-list-item>
 
-        <v-list-item :to="{name:'browse-libraries'}" exact>
+        <v-list-item :to="{name:'browse-libraries', params: {libraryId: 0}}">
           <v-list-item-icon>
             <v-icon>mdi-book-multiple</v-icon>
           </v-list-item-icon>