Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-06 03:27:08 +02:00
Code Issues Projects Releases Wiki Activity

perf(webui): reduce number of API calls on book details screen

Browse source
This commit is contained in:
Gauthier Roebroeck 2022-02-14 10:07:56 +08:00
parent f388e9bf76
commit 5f8894d47a
1 changed files with 8 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
komga-webui/src/views/BrowseBook.vue
View file

@ -5,7 +5,7 @@
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-btn icon <v-btn icon
v-on="on" v-on="on"
:to="parent.route" :to="parentLocation"
> >
<rtl-icon icon="mdi-arrow-left" rtl="mdi-arrow-right"/> <rtl-icon icon="mdi-arrow-left" rtl="mdi-arrow-right"/>
</v-btn> </v-btn>
@ -116,10 +116,9 @@
<v-row> <v-row>
<v-col class="py-1"> <v-col class="py-1">
<router-link <router-link
v-if="!$_.isEmpty(series)"
:to="{name:'browse-series', params: {seriesId: book.seriesId}}" :to="{name:'browse-series', params: {seriesId: book.seriesId}}"
class="link-underline text-h5" class="link-underline text-h5"
>{{ series.metadata.title }} >{{ book.seriesTitle }}
</router-link> </router-link>
<router-link <router-link
class="caption link-underline" class="caption link-underline"
@ -412,13 +411,13 @@ import Vue from 'vue'
import ReadListsExpansionPanels from '@/components/ReadListsExpansionPanels.vue' import ReadListsExpansionPanels from '@/components/ReadListsExpansionPanels.vue'
import {BookDto, BookFormat} from '@/types/komga-books' import {BookDto, BookFormat} from '@/types/komga-books'
import {Context, ContextOrigin} from '@/types/context' import {Context, ContextOrigin} from '@/types/context'
import {SeriesDto} from '@/types/komga-series'
import ReadMore from '@/components/ReadMore.vue' import ReadMore from '@/components/ReadMore.vue'
import VueHorizontal from 'vue-horizontal' import VueHorizontal from 'vue-horizontal'
import {authorRoles} from '@/types/author-roles' import {authorRoles} from '@/types/author-roles'
import {convertErrorCodes} from '@/functions/error-codes' import {convertErrorCodes} from '@/functions/error-codes'
import RtlIcon from '@/components/RtlIcon.vue' import RtlIcon from '@/components/RtlIcon.vue'
import {BookSseDto, LibrarySseDto, ReadListSseDto, ReadProgressSseDto} from '@/types/komga-sse' import {BookSseDto, LibrarySseDto, ReadListSseDto, ReadProgressSseDto} from '@/types/komga-sse'
import {RawLocation} from 'vue-router/types/router'
export default Vue.extend({ export default Vue.extend({
name: 'BrowseBook', name: 'BrowseBook',
@ -427,7 +426,6 @@ export default Vue.extend({
return { return {
MediaStatus, MediaStatus,
book: {} as BookDto, book: {} as BookDto,
series: {} as SeriesDto,
context: {} as Context, context: {} as Context,
contextName: '', contextName: '',
siblings: [] as BookDto[], siblings: [] as BookDto[],
@ -519,17 +517,11 @@ export default Vue.extend({
mediaComment(): string { mediaComment(): string {
return convertErrorCodes(this.book.media.comment) return convertErrorCodes(this.book.media.comment)
}, },
parent(): object { parentLocation(): RawLocation {
if (this.contextReadList) if (this.contextReadList)
return { return {name: 'browse-readlist', params: {readListId: this.context.id}}
name: this.contextName,
route: {name: 'browse-readlist', params: {readListId: this.context.id}},
}
else else
return { return {name: 'browse-series', params: {seriesId: this.book.seriesId}}
name: this.series.name,
route: {name: 'browse-series', params: {seriesId: this.book.seriesId}},
}
}, },
displayedRoles(): string[] { displayedRoles(): string[] {
const allRoles = this.$_.uniq([...authorRoles, ...(this.book.metadata.authors.map(x => x.role))]) const allRoles = this.$_.uniq([...authorRoles, ...(this.book.metadata.authors.map(x => x.role))])
@ -556,7 +548,7 @@ export default Vue.extend({
}, },
bookDeleted(event: BookSseDto) { bookDeleted(event: BookSseDto) {
if (event.bookId === this.bookId) { if (event.bookId === this.bookId) {
this.$router.push({name: 'browse-series', params: {seriesId: this.series.id}}) this.$router.push({name: 'browse-series', params: {seriesId: this.book.seriesId}})
} }
}, },
readProgressChanged(event: ReadProgressSseDto) { readProgressChanged(event: ReadProgressSseDto) {
@ -564,7 +556,6 @@ export default Vue.extend({
}, },
async loadBook(bookId: string) { async loadBook(bookId: string) {
this.book = await this.$komgaBooks.getBook(bookId) this.book = await this.$komgaBooks.getBook(bookId)
this.series = await this.$komgaSeries.getOneSeries(this.book.seriesId)
// parse query params to get context and contextId // parse query params to get context and contextId
if (this.$route.query.contextId && this.$route.query.context if (this.$route.query.contextId && this.$route.query.context
@ -591,7 +582,7 @@ export default Vue.extend({
.then(v => this.readLists = v) .then(v => this.readLists = v)
if (this.$_.has(this.book, 'metadata.title')) { if (this.$_.has(this.book, 'metadata.title')) {
document.title = `Komga - ${getBookTitleCompact(this.book.metadata.title, this.series.metadata.title)}` document.title = `Komga - ${getBookTitleCompact(this.book.metadata.title, this.book.seriesTitle)}`
} }
if (this?.context.origin === ContextOrigin.READLIST) { if (this?.context.origin === ContextOrigin.READLIST) {