From 2a3398f768331d4aa53e557e88debe04f25e7206 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 27 Apr 2021 21:29:21 +0800
Subject: [PATCH] refactor: proper parameter passing

use beforeRouteUpdate
remove chip in toolbar
---
 .../src/services/komga-books.service.ts       |  12 +-
 .../src/services/komga-series.service.ts      |  10 +-
 komga-webui/src/views/Dashboard.vue           | 155 +++++++++---------
 3 files changed, 92 insertions(+), 85 deletions(-)

diff --git a/komga-webui/src/services/komga-books.service.ts b/komga-webui/src/services/komga-books.service.ts
index a47421754..a9627356b 100644
--- a/komga-webui/src/services/komga-books.service.ts
+++ b/komga-webui/src/services/komga-books.service.ts
@@ -1,5 +1,5 @@
-import { AxiosInstance } from 'axios'
-import { BookDto, BookMetadataUpdateDto, PageDto, ReadProgressUpdateDto } from '@/types/komga-books'
+import {AxiosInstance} from 'axios'
+import {BookDto, BookMetadataUpdateDto, PageDto, ReadProgressUpdateDto} from '@/types/komga-books'
 
 const qs = require('qs')
 
@@ -40,10 +40,14 @@ export default class KomgaBooksService {
     }
   }
 
-  async getBooksOnDeck (pageRequest?: PageRequest): Promise<Page<BookDto>> {
+  async getBooksOnDeck (libraryId?: string, pageRequest?: PageRequest): Promise<Page<BookDto>> {
     try {
+      const params = { ...pageRequest } as any
+      if (libraryId) {
+        params.library_id = libraryId
+      }
       return (await this.http.get(`${API_BOOKS}/ondeck`, {
-        params: { ...pageRequest },
+        params: params,
       })).data
     } catch (e) {
       let msg = 'An error occurred while trying to retrieve books on deck'
diff --git a/komga-webui/src/services/komga-series.service.ts b/komga-webui/src/services/komga-series.service.ts
index 44a11270e..d0a18e7b8 100644
--- a/komga-webui/src/services/komga-series.service.ts
+++ b/komga-webui/src/services/komga-series.service.ts
@@ -43,9 +43,12 @@ export default class KomgaSeriesService {
     }
   }
 
-  async getNewSeries (pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
+  async getNewSeries (libraryId?: string, pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
     try {
       const params = { ...pageRequest } as any
+      if (libraryId) {
+        params.library_id = libraryId
+      }
       return (await this.http.get(`${API_SERIES}/new`, {
         params: params,
       })).data
@@ -58,9 +61,12 @@ export default class KomgaSeriesService {
     }
   }
 
-  async getUpdatedSeries (pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
+  async getUpdatedSeries (libraryId?: string, pageRequest?: PageRequest): Promise<Page<SeriesDto>> {
     try {
       const params = { ...pageRequest } as any
+      if (libraryId) {
+        params.library_id = libraryId
+      }
       return (await this.http.get(`${API_SERIES}/updated`, {
         params: params,
       })).data
diff --git a/komga-webui/src/views/Dashboard.vue b/komga-webui/src/views/Dashboard.vue
index afae5d5fb..6ef106d06 100644
--- a/komga-webui/src/views/Dashboard.vue
+++ b/komga-webui/src/views/Dashboard.vue
@@ -1,19 +1,13 @@
 <template>
-  <div :style="libraryId && $vuetify.breakpoint.name === 'xs' ? 'margin-bottom: 56px' : undefined">
-    <div v-if="libraryId">
-        <toolbar-sticky v-if="selectedSeries.length === 0">
+  <div :style="$vuetify.breakpoint.name === 'xs' ? 'margin-bottom: 56px' : undefined">
+    <toolbar-sticky v-if="showLibraryBar && selectedSeries.length === 0">
+      <!--   Action menu   -->
+      <library-actions-menu v-if="library"
+                            :library="library"/>
 
-        <library-actions-menu
-          v-if="library"
-          :library="library"
-        />
-
-        <v-toolbar-title>
-            <span>{{ library ? library.name : $t('common.all_libraries') }}</span>
-            <v-chip label class="mx-4" v-if="totalElements">
-            <span style="font-size: 1.1rem">{{ totalElements }}</span>
-            </v-chip>
-        </v-toolbar-title>
+      <v-toolbar-title>
+        <span>{{ library ? library.name : $t('common.all_libraries') }}</span>
+      </v-toolbar-title>
 
         </toolbar-sticky>
 
@@ -138,6 +132,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";
 
 export default Vue.extend({
   name: 'Dashboard',
@@ -163,68 +158,80 @@ export default Vue.extend({
       selectedBooks: [] as BookDto[],
     }
   },
-  created () {
+  created() {
     this.$eventHub.$on(LIBRARY_DELETED, this.libraryDeleted)
-    this.$eventHub.$on(SERIES_CHANGED, this.loadAll)
-    this.$eventHub.$on(BOOK_CHANGED, this.loadAll)
+    this.$eventHub.$on(SERIES_CHANGED, this.reload)
+    this.$eventHub.$on(BOOK_CHANGED, this.reload)
   },
-  beforeDestroy () {
+  beforeDestroy() {
     this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted)
-    this.$eventHub.$off(SERIES_CHANGED, this.loadAll)
-    this.$eventHub.$off(BOOK_CHANGED, this.loadAll)
+    this.$eventHub.$off(SERIES_CHANGED, this.reload)
+    this.$eventHub.$off(BOOK_CHANGED, this.reload)
   },
-  mounted () {
-    this.loadAll()
+  mounted() {
+    this.reload()
   },
   props: {
     libraryId: {
       type: String,
+      default: LIBRARIES_ALL,
     },
   },
   watch: {
-    selectedSeries (val: SeriesDto[]) {
+    selectedSeries(val: SeriesDto[]) {
       val.forEach(i => this.replaceSeries(i))
     },
-    selectedBooks (val: BookDto[]) {
+    selectedBooks(val: BookDto[]) {
       val.forEach(i => this.replaceBook(i))
     },
-    '$route.path': function(val, oldVal){
-        this.loadAll()
-    },
+  },
+  beforeRouteUpdate(to, from, next) {
+    if (to.params.libraryId !== from.params.libraryId) {
+      this.loadAll(to.params.libraryId)
+    }
+
+    next()
   },
   computed: {
-    fixedCardWidth (): number {
+    fixedCardWidth(): number {
       return this.$vuetify.breakpoint.name === 'xs' ? 120 : 150
     },
-    allEmpty (): boolean {
+    allEmpty(): boolean {
       return this.newSeries.length === 0 &&
         this.updatedSeries.length === 0 &&
         this.latestBooks.length === 0 &&
         this.inProgressBooks.length === 0 &&
         this.onDeckBooks.length === 0
     },
+    showLibraryBar(): boolean {
+      return this.libraryId !== LIBRARIES_ALL
+    },
   },
   methods: {
-    libraryDeleted () {
+    getRequestLibraryId(libraryId: string): string | undefined {
+      return libraryId !== LIBRARIES_ALL ? libraryId : undefined
+    },
+    libraryDeleted() {
       if (this.$store.state.komgaLibraries.libraries.length === 0) {
-        this.$router.push({ name: 'welcome' })
+        this.$router.push({name: 'welcome'})
       } else {
-        this.loadAll()
+        this.reload()
       }
     },
-    loadAll () {
-      if(this.libraryId){
-        this.loadLibrary(this.libraryId)
-      }
+    reload() {
+      this.loadAll(this.libraryId)
+    },
+    loadAll(libraryId: string) {
+      this.library = this.getLibraryLazy(libraryId)
       this.selectedSeries = []
       this.selectedBooks = []
-      this.loadNewSeries()
-      this.loadUpdatedSeries()
-      this.loadLatestBooks()
-      this.loadInProgressBooks()
-      this.loadOnDeckBooks()
+      this.loadNewSeries(libraryId)
+      this.loadUpdatedSeries(libraryId)
+      this.loadLatestBooks(libraryId)
+      this.loadInProgressBooks(libraryId)
+      this.loadOnDeckBooks(libraryId)
     },
-    replaceSeries (series: SeriesDto) {
+    replaceSeries(series: SeriesDto) {
       let index = this.newSeries.findIndex(x => x.id === series.id)
       if (index !== -1) {
         this.newSeries.splice(index, 1, series)
@@ -234,7 +241,7 @@ export default Vue.extend({
         this.updatedSeries.splice(index, 1, series)
       }
     },
-    replaceBook (book: BookDto) {
+    replaceBook(book: BookDto) {
       let index = this.latestBooks.findIndex(x => x.id === book.id)
       if (index !== -1) {
         this.latestBooks.splice(index, 1, book)
@@ -248,48 +255,36 @@ export default Vue.extend({
         this.onDeckBooks.splice(index, 1, book)
       }
     },
-    async loadNewSeries () {
-      const pageRequest = {
-        library_id: this.libraryId,
-      } as PageRequest
-      this.newSeries = (await this.$komgaSeries.getNewSeries(pageRequest)).content
+    async loadNewSeries(libraryId: string) {
+      this.newSeries = (await this.$komgaSeries.getNewSeries(this.getRequestLibraryId(libraryId))).content
     },
-    async loadUpdatedSeries () {
-      const pageRequest = {
-        library_id: this.libraryId,
-      } as PageRequest
-      this.updatedSeries = (await this.$komgaSeries.getUpdatedSeries(pageRequest)).content
+    async loadUpdatedSeries(libraryId: string) {
+      this.updatedSeries = (await this.$komgaSeries.getUpdatedSeries(this.getRequestLibraryId(libraryId))).content
     },
-    async loadLatestBooks () {
+    async loadLatestBooks(libraryId: string) {
       const pageRequest = {
         sort: ['createdDate,desc'],
-        library_id: this.libraryId,
       } as PageRequest
 
-      this.latestBooks = (await this.$komgaBooks.getBooks(undefined, pageRequest)).content
+      this.latestBooks = (await this.$komgaBooks.getBooks(this.getRequestLibraryId(libraryId), pageRequest)).content
     },
-    async loadInProgressBooks () {
+    async loadInProgressBooks(libraryId: string) {
       const pageRequest = {
         sort: ['readProgress.lastModified,desc'],
-        library_id: this.libraryId,
       } as PageRequest
 
-      this.inProgressBooks = (await this.$komgaBooks.getBooks(undefined, pageRequest, undefined, undefined, [ReadStatus.IN_PROGRESS])).content
+      this.inProgressBooks = (await this.$komgaBooks.getBooks(this.getRequestLibraryId(libraryId), pageRequest, undefined, undefined, [ReadStatus.IN_PROGRESS])).content
     },
-    async loadOnDeckBooks () {
-      const pageRequest = {
-          library_id: this.libraryId,
-      } as PageRequest
-
-      this.onDeckBooks = (await this.$komgaBooks.getBooksOnDeck(pageRequest)).content
+    async loadOnDeckBooks(libraryId: string) {
+      this.onDeckBooks = (await this.$komgaBooks.getBooksOnDeck(this.getRequestLibraryId(libraryId))).content
     },
-    singleEditSeries (series: SeriesDto) {
+    singleEditSeries(series: SeriesDto) {
       this.$store.dispatch('dialogUpdateSeries', series)
     },
-    singleEditBook (book: BookDto) {
+    singleEditBook(book: BookDto) {
       this.$store.dispatch('dialogUpdateBooks', book)
     },
-    async markSelectedSeriesRead () {
+    async markSelectedSeriesRead() {
       await Promise.all(this.selectedSeries.map(s =>
         this.$komgaSeries.markAsRead(s.id),
       ))
@@ -297,7 +292,7 @@ export default Vue.extend({
         this.$komgaSeries.getOneSeries(s.id),
       ))
     },
-    async markSelectedSeriesUnread () {
+    async markSelectedSeriesUnread() {
       await Promise.all(this.selectedSeries.map(s =>
         this.$komgaSeries.markAsUnread(s.id),
       ))
@@ -305,27 +300,27 @@ export default Vue.extend({
         this.$komgaSeries.getOneSeries(s.id),
       ))
     },
-    addToCollection () {
+    addToCollection() {
       this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries)
     },
-    editMultipleSeries () {
+    editMultipleSeries() {
       this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
     },
-    editMultipleBooks () {
+    editMultipleBooks() {
       this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
     },
-    addToReadList () {
+    addToReadList() {
       this.$store.dispatch('dialogAddBooksToReadList', this.selectedBooks)
     },
-    async markSelectedBooksRead () {
+    async markSelectedBooksRead() {
       await Promise.all(this.selectedBooks.map(b =>
-        this.$komgaBooks.updateReadProgress(b.id, { completed: true }),
+        this.$komgaBooks.updateReadProgress(b.id, {completed: true}),
       ))
       this.selectedBooks = await Promise.all(this.selectedBooks.map(b =>
         this.$komgaBooks.getBook(b.id),
       ))
     },
-    async markSelectedBooksUnread () {
+    async markSelectedBooksUnread() {
       await Promise.all(this.selectedBooks.map(b =>
         this.$komgaBooks.deleteReadProgress(b.id),
       ))
@@ -333,9 +328,11 @@ export default Vue.extend({
         this.$komgaBooks.getBook(b.id),
       ))
     },
-    loadLibrary(libraryId: string) {
-      if (libraryId) {
-       this.library = this.$store.getters.getLibraryById(libraryId)
+    getLibraryLazy(libraryId: string): LibraryDto | undefined {
+      if (libraryId !== LIBRARIES_ALL) {
+        return this.$store.getters.getLibraryById(libraryId)
+      } else {
+        return undefined
       }
     },
   },