diff --git a/komga-webui/src/plugins/persisted-state.ts b/komga-webui/src/plugins/persisted-state.ts index 00df4f383..febaf86e5 100644 --- a/komga-webui/src/plugins/persisted-state.ts +++ b/komga-webui/src/plugins/persisted-state.ts @@ -26,6 +26,7 @@ export const persistedModule: Module = { library: { filter: {}, sort: {}, + route: {}, }, }, getters: { @@ -38,6 +39,9 @@ export const persistedModule: Module = { getLibrarySort: (state) => (id: string) => { return state.library.sort[id] }, + getLibraryRoute: (state) => (id: string) => { + return state.library.route[id] + }, }, mutations: { setLocale(state, val) { @@ -82,5 +86,8 @@ export const persistedModule: Module = { setLibrarySort(state, {id, sort}) { state.library.sort[id] = sort }, + setLibraryRoute(state, {id, route}) { + state.library.route[id] = route + }, }, } diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts index 6c6c08ba4..1e0ae4594 100644 --- a/komga-webui/src/router.ts +++ b/komga-webui/src/router.ts @@ -2,22 +2,37 @@ import urls from '@/functions/urls' import Vue from 'vue' import Router from 'vue-router' import store from './store' +import {LIBRARIES_ALL, LIBRARY_ROUTE} from "@/types/library"; Vue.use(Router) const lStore = store as any const adminGuard = (to: any, from: any, next: any) => { - if (!lStore.getters.meAdmin) next({ name: 'home' }) + if (!lStore.getters.meAdmin) next({name: 'home'}) else next() } const noLibraryGuard = (to: any, from: any, next: any) => { if (lStore.state.komgaLibraries.libraries.length === 0) { - next({ name: 'welcome' }) + next({name: 'welcome'}) } else next() } +const getLibraryRoute = (libraryId: string) => { + switch ((lStore.getters.getLibraryRoute(libraryId) as LIBRARY_ROUTE)) { + case LIBRARY_ROUTE.COLLECTIONS: + return 'browse-collections' + case LIBRARY_ROUTE.READLISTS: + return 'browse-readlists' + case LIBRARY_ROUTE.BROWSE: + return 'browse-libraries' + case LIBRARY_ROUTE.RECOMMENDED: + default: + return 'recommended-libraries' + } +} + const router = new Router({ mode: 'history', base: urls.base, @@ -25,7 +40,7 @@ const router = new Router({ { path: '/', name: 'home', - redirect: { name: 'dashboard' }, + redirect: {name: 'dashboard'}, component: () => import(/* webpackChunkName: "home" */ './views/Home.vue'), children: [ { @@ -42,7 +57,7 @@ const router = new Router({ { path: '/settings', name: 'settings', - redirect: { name: 'settings-analysis' }, + redirect: {name: 'settings-analysis'}, component: () => import(/* webpackChunkName: "settings" */ './views/Settings.vue'), children: [ { @@ -83,57 +98,65 @@ const router = new Router({ name: 'account', component: () => import(/* webpackChunkName: "account" */ './views/AccountSettings.vue'), }, + { + path: '/libraries/:libraryId?', + name: 'libraries', + redirect: (route) => ({ + name: getLibraryRoute(route.params.libraryId || LIBRARIES_ALL), + params: {libraryId: route.params.libraryId || LIBRARIES_ALL}, + }), + }, + { + path: '/libraries/:libraryId/recommended', + name: 'recommended-libraries', + beforeEnter: noLibraryGuard, + component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'), + props: (route) => ({libraryId: route.params.libraryId}), + }, { path: '/libraries/:libraryId/series', name: 'browse-libraries', beforeEnter: noLibraryGuard, component: () => import(/* webpackChunkName: "browse-libraries" */ './views/BrowseLibraries.vue'), - props: (route) => ({ libraryId: route.params.libraryId }), - }, - { - path: '/libraries/:libraryId/dashboard', - name: 'recommended-libraries', - beforeEnter: noLibraryGuard, - component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'), - props: (route) => ({ libraryId: route.params.libraryId }), + props: (route) => ({libraryId: route.params.libraryId}), }, { path: '/libraries/:libraryId/collections', name: 'browse-collections', beforeEnter: noLibraryGuard, component: () => import(/* webpackChunkName: "browse-collections" */ './views/BrowseCollections.vue'), - props: (route) => ({ libraryId: route.params.libraryId }), + props: (route) => ({libraryId: route.params.libraryId}), }, { path: '/libraries/:libraryId/readlists', name: 'browse-readlists', beforeEnter: noLibraryGuard, component: () => import(/* webpackChunkName: "browse-readlists" */ './views/BrowseReadLists.vue'), - props: (route) => ({ libraryId: route.params.libraryId }), + props: (route) => ({libraryId: route.params.libraryId}), }, { path: '/collections/:collectionId', name: 'browse-collection', component: () => import(/* webpackChunkName: "browse-collection" */ './views/BrowseCollection.vue'), - props: (route) => ({ collectionId: route.params.collectionId }), + props: (route) => ({collectionId: route.params.collectionId}), }, { path: '/readlists/:readListId', name: 'browse-readlist', component: () => import(/* webpackChunkName: "browse-readlist" */ './views/BrowseReadList.vue'), - props: (route) => ({ readListId: route.params.readListId }), + props: (route) => ({readListId: route.params.readListId}), }, { path: '/series/:seriesId', name: 'browse-series', component: () => import(/* webpackChunkName: "browse-series" */ './views/BrowseSeries.vue'), - props: (route) => ({ seriesId: route.params.seriesId }), + props: (route) => ({seriesId: route.params.seriesId}), }, { path: '/book/:bookId', name: 'browse-book', component: () => import(/* webpackChunkName: "browse-book" */ './views/BrowseBook.vue'), - props: (route) => ({ bookId: route.params.bookId }), + props: (route) => ({bookId: route.params.bookId}), }, { path: '/search', @@ -156,7 +179,7 @@ const router = new Router({ path: '/book/:bookId/read', name: 'read-book', component: () => import(/* webpackChunkName: "read-book" */ './views/BookReader.vue'), - props: (route) => ({ bookId: route.params.bookId }), + props: (route) => ({bookId: route.params.bookId}), }, { path: '*', @@ -164,12 +187,12 @@ const router = new Router({ component: () => import(/* webpackChunkName: "notfound" */ './views/PageNotFound.vue'), }, ], - scrollBehavior (to, from, savedPosition) { + scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (to.name !== from.name) { - return { x: 0, y: 0 } + return {x: 0, y: 0} } } }, @@ -180,7 +203,7 @@ router.beforeEach((to, from, next) => { document.title = 'Komga' } if (to.name !== 'startup' && to.name !== 'login' && !lStore.getters.authenticated) { - next({ name: 'startup', query: { redirect: to.fullPath } }) + next({name: 'startup', query: {redirect: to.fullPath}}) } else next() }) diff --git a/komga-webui/src/types/library.ts b/komga-webui/src/types/library.ts index b413d73bd..190254cc1 100644 --- a/komga-webui/src/types/library.ts +++ b/komga-webui/src/types/library.ts @@ -1 +1,8 @@ export const LIBRARIES_ALL = 'all' + +export enum LIBRARY_ROUTE { + BROWSE = 'BROWSE', + RECOMMENDED = 'RECOMMENDED', + COLLECTIONS = 'COLLECTIONS', + READLISTS = 'READLISTS' +} diff --git a/komga-webui/src/views/BrowseCollections.vue b/komga-webui/src/views/BrowseCollections.vue index 6aa0467ec..bd0ca8dc9 100644 --- a/komga-webui/src/views/BrowseCollections.vue +++ b/komga-webui/src/views/BrowseCollections.vue @@ -57,7 +57,7 @@ import PageSizeSelect from '@/components/PageSizeSelect.vue' import {COLLECTION_CHANGED, COLLECTION_DELETED, LIBRARY_CHANGED} from '@/types/events' import Vue from 'vue' import {Location} from 'vue-router' -import {LIBRARIES_ALL} from '@/types/library' +import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library' export default Vue.extend({ name: 'BrowseCollections', @@ -96,7 +96,8 @@ export default Vue.extend({ this.$eventHub.$off(COLLECTION_DELETED, this.reloadCollections) this.$eventHub.$off(LIBRARY_CHANGED, this.reloadLibrary) }, - mounted () { + mounted() { + this.$store.commit('setLibraryRoute', {id: this.libraryId, route: LIBRARY_ROUTE.COLLECTIONS}) this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue index 075977093..e9a253735 100644 --- a/komga-webui/src/views/BrowseLibraries.vue +++ b/komga-webui/src/views/BrowseLibraries.vue @@ -110,7 +110,7 @@ import {SeriesStatus, SeriesStatusKeyValue} from '@/types/enum-series' import {LIBRARY_CHANGED, LIBRARY_DELETED, SERIES_CHANGED} from '@/types/events' import Vue from 'vue' import {Location} from 'vue-router' -import {LIBRARIES_ALL} from '@/types/library' +import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library' import FilterDrawer from '@/components/FilterDrawer.vue' import SortList from '@/components/SortList.vue' import FilterPanels from '@/components/FilterPanels.vue' @@ -190,6 +190,7 @@ export default Vue.extend({ this.$eventHub.$off(LIBRARY_CHANGED, this.reloadLibrary) }, async mounted() { + this.$store.commit('setLibraryRoute', {id: this.libraryId, route: LIBRARY_ROUTE.BROWSE}) this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param diff --git a/komga-webui/src/views/BrowseReadLists.vue b/komga-webui/src/views/BrowseReadLists.vue index e1adc5651..d210bcf8e 100644 --- a/komga-webui/src/views/BrowseReadLists.vue +++ b/komga-webui/src/views/BrowseReadLists.vue @@ -57,7 +57,7 @@ import PageSizeSelect from '@/components/PageSizeSelect.vue' import {LIBRARY_CHANGED, READLIST_CHANGED, READLIST_DELETED} from '@/types/events' import Vue from 'vue' import {Location} from 'vue-router' -import {LIBRARIES_ALL} from '@/types/library' +import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library' export default Vue.extend({ name: 'BrowseReadLists', @@ -97,6 +97,7 @@ export default Vue.extend({ this.$eventHub.$off(LIBRARY_CHANGED, this.reloadLibrary) }, mounted () { + this.$store.commit('setLibraryRoute', {id: this.libraryId, route: LIBRARY_ROUTE.READLISTS}) this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param diff --git a/komga-webui/src/views/Dashboard.vue b/komga-webui/src/views/Dashboard.vue index 7c84d51d3..4a43feb1d 100644 --- a/komga-webui/src/views/Dashboard.vue +++ b/komga-webui/src/views/Dashboard.vue @@ -137,7 +137,7 @@ import {BookDto} from '@/types/komga-books' import {BOOK_CHANGED, LIBRARY_DELETED, SERIES_CHANGED} from '@/types/events' import Vue from 'vue' import {SeriesDto} from "@/types/komga-series"; -import {LIBRARIES_ALL} from "@/types/library"; +import {LIBRARIES_ALL, LIBRARY_ROUTE} from "@/types/library"; export default Vue.extend({ name: 'Dashboard', @@ -174,6 +174,7 @@ export default Vue.extend({ this.$eventHub.$off(BOOK_CHANGED, this.reload) }, mounted() { + if(this.showLibraryBar) this.$store.commit('setLibraryRoute', {id: this.libraryId, route: LIBRARY_ROUTE.RECOMMENDED}) this.reload() }, props: { diff --git a/komga-webui/src/views/Home.vue b/komga-webui/src/views/Home.vue index 95b793780..c378e5a6e 100644 --- a/komga-webui/src/views/Home.vue +++ b/komga-webui/src/views/Home.vue @@ -34,7 +34,7 @@ - + mdi-book-multiple @@ -51,7 +51,7 @@ @@ -149,12 +149,14 @@ import LibraryActionsMenu from '@/components/menus/LibraryActionsMenu.vue' import SearchBox from '@/components/SearchBox.vue' import {Theme} from '@/types/themes' import Vue from 'vue' +import {LIBRARIES_ALL} from "@/types/library"; export default Vue.extend({ name: 'home', components: {LibraryActionsMenu, SearchBox, Dialogs}, data: function () { return { + LIBRARIES_ALL, drawerVisible: this.$vuetify.breakpoint.lgAndUp, info: {} as ActuatorInfo, locales: this.$i18n.availableLocales.map((x: any) => ({text: this.$i18n.t('common.locale_name', x), value: x})),