diff --git a/komga-webui/src/components/BrowseLibraries.vue b/komga-webui/src/components/BrowseLibraries.vue index c5418861..348be6c2 100644 --- a/komga-webui/src/components/BrowseLibraries.vue +++ b/komga-webui/src/components/BrowseLibraries.vue @@ -42,55 +42,88 @@ export default Vue.extend({ return { libraryName: '', series: [] as SeriesDto[], - seriesPage: {} as Page, + 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 + 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 { - 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' + } } } }) diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts index d09fe481..98d64743 100644 --- a/komga-webui/src/router.ts +++ b/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 } + } + } + } }) diff --git a/komga-webui/src/views/Home.vue b/komga-webui/src/views/Home.vue index 01548e3f..20418d0e 100644 --- a/komga-webui/src/views/Home.vue +++ b/komga-webui/src/views/Home.vue @@ -2,7 +2,6 @@
@@ -40,7 +39,7 @@ - + mdi-book-multiple