mirror of
https://github.com/gotson/komga.git
synced 2025-01-09 04:08:00 +08:00
fix(webui): properly restore query params on page reload
This commit is contained in:
Gauthier Roebroeck
parent
42c30c390f
commit
01f9317b89
@ -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 = {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user