feat(webui): display badge if some books are in error or unsupported

komga-webui/src/store.ts

@@ -38,152 +38,157 @@ export default new Vuex.Store({
     // series
     updateSeries: {} as SeriesDto | SeriesDto[],
     updateSeriesDialog: false,
+
+    booksToCheck: 0,
   },
   mutations: {
     // Collections
-    setAddToCollectionSeries (state, series) {
+    setAddToCollectionSeries(state, series) {
       state.addToCollectionSeries = series
     },
-    setAddToCollectionDialog (state, dialog) {
+    setAddToCollectionDialog(state, dialog) {
       state.addToCollectionDialog = dialog
     },
-    setEditCollection (state, collection) {
+    setEditCollection(state, collection) {
       state.editCollection = collection
     },
-    setEditCollectionDialog (state, dialog) {
+    setEditCollectionDialog(state, dialog) {
       state.editCollectionDialog = dialog
     },
-    setDeleteCollections (state, collections) {
+    setDeleteCollections(state, collections) {
       state.deleteCollections = collections
     },
-    setDeleteCollectionDialog (state, dialog) {
+    setDeleteCollectionDialog(state, dialog) {
       state.deleteCollectionDialog = dialog
     },
     // Read Lists
-    setAddToReadListBooks (state, book) {
+    setAddToReadListBooks(state, book) {
       state.addToReadListBooks = book
     },
-    setAddToReadListDialog (state, dialog) {
+    setAddToReadListDialog(state, dialog) {
       state.addToReadListDialog = dialog
     },
-    setEditReadList (state, readList) {
+    setEditReadList(state, readList) {
       state.editReadList = readList
     },
-    setEditReadListDialog (state, dialog) {
+    setEditReadListDialog(state, dialog) {
       state.editReadListDialog = dialog
     },
-    setDeleteReadLists (state, readLists) {
+    setDeleteReadLists(state, readLists) {
       state.deleteReadLists = readLists
     },
-    setDeleteReadListDialog (state, dialog) {
+    setDeleteReadListDialog(state, dialog) {
       state.deleteReadListDialog = dialog
     },
     // Libraries
-    setEditLibrary (state, library) {
+    setEditLibrary(state, library) {
       state.editLibrary = library
     },
-    setEditLibraryDialog (state, dialog) {
+    setEditLibraryDialog(state, dialog) {
       state.editLibraryDialog = dialog
     },
-    setDeleteLibrary (state, library) {
+    setDeleteLibrary(state, library) {
       state.deleteLibrary = library
     },
-    setDeleteLibraryDialog (state, dialog) {
+    setDeleteLibraryDialog(state, dialog) {
       state.deleteLibraryDialog = dialog
     },
     // Books
-    setUpdateBooks (state, books) {
+    setUpdateBooks(state, books) {
       state.updateBooks = books
     },
-    setUpdateBooksDialog (state, dialog) {
+    setUpdateBooksDialog(state, dialog) {
       state.updateBooksDialog = dialog
     },
     // Series
-    setUpdateSeries (state, series) {
+    setUpdateSeries(state, series) {
       state.updateSeries = series
     },
-    setUpdateSeriesDialog (state, dialog) {
+    setUpdateSeriesDialog(state, dialog) {
       state.updateSeriesDialog = dialog
     },
+    setBooksToCheck(state, count) {
+      state.booksToCheck = count
+    },
   },
   actions: {
     // collections
-    dialogAddSeriesToCollection ({ commit }, series) {
+    dialogAddSeriesToCollection({commit}, series) {
       commit('setAddToCollectionSeries', series)
       commit('setAddToCollectionDialog', true)
     },
-    dialogAddSeriesToCollectionDisplay ({ commit }, value) {
+    dialogAddSeriesToCollectionDisplay({commit}, value) {
       commit('setAddToCollectionDialog', value)
     },
-    dialogEditCollection ({ commit }, collection) {
+    dialogEditCollection({commit}, collection) {
       commit('setEditCollection', collection)
       commit('setEditCollectionDialog', true)
     },
-    dialogEditCollectionDisplay ({ commit }, value) {
+    dialogEditCollectionDisplay({commit}, value) {
       commit('setEditCollectionDialog', value)
     },
-    dialogDeleteCollection ({ commit }, collections) {
+    dialogDeleteCollection({commit}, collections) {
       commit('setDeleteCollections', collections)
       commit('setDeleteCollectionDialog', true)
     },
-    dialogDeleteCollectionDisplay ({ commit }, value) {
+    dialogDeleteCollectionDisplay({commit}, value) {
       commit('setDeleteCollectionDialog', value)
     },
     // read lists
-    dialogAddBooksToReadList ({ commit }, books) {
+    dialogAddBooksToReadList({commit}, books) {
       commit('setAddToReadListBooks', books)
       commit('setAddToReadListDialog', true)
     },
-    dialogAddBooksToReadListDisplay ({ commit }, value) {
+    dialogAddBooksToReadListDisplay({commit}, value) {
       commit('setAddToReadListDialog', value)
     },
-    dialogEditReadList ({ commit }, readList) {
+    dialogEditReadList({commit}, readList) {
       commit('setEditReadList', readList)
       commit('setEditReadListDialog', true)
     },
-    dialogEditReadListDisplay ({ commit }, value) {
+    dialogEditReadListDisplay({commit}, value) {
       commit('setEditReadListDialog', value)
     },
-    dialogDeleteReadList ({ commit }, readLists) {
+    dialogDeleteReadList({commit}, readLists) {
       commit('setDeleteReadLists', readLists)
       commit('setDeleteReadListDialog', true)
     },
-    dialogDeleteReadListDisplay ({ commit }, value) {
+    dialogDeleteReadListDisplay({commit}, value) {
       commit('setDeleteReadListDialog', value)
     },
     // libraries
-    dialogAddLibrary ({ commit }) {
+    dialogAddLibrary({commit}) {
       commit('setEditLibrary', undefined)
       commit('setEditLibraryDialog', true)
     },
-    dialogEditLibrary ({ commit }, value) {
+    dialogEditLibrary({commit}, value) {
       commit('setEditLibrary', value)
       commit('setEditLibraryDialog', true)
     },
-    dialogEditLibraryDisplay ({ commit }, value) {
+    dialogEditLibraryDisplay({commit}, value) {
       commit('setEditLibraryDialog', value)
     },
-    dialogDeleteLibrary ({ commit }, library) {
+    dialogDeleteLibrary({commit}, library) {
       commit('setDeleteLibrary', library)
       commit('setDeleteLibraryDialog', true)
     },
-    dialogDeleteLibraryDisplay ({ commit }, value) {
+    dialogDeleteLibraryDisplay({commit}, value) {
       commit('setDeleteLibraryDialog', value)
     },
     // books
-    dialogUpdateBooks ({ commit }, books) {
+    dialogUpdateBooks({commit}, books) {
       commit('setUpdateBooks', books)
       commit('setUpdateBooksDialog', true)
     },
-    dialogUpdateBooksDisplay ({ commit }, value) {
+    dialogUpdateBooksDisplay({commit}, value) {
       commit('setUpdateBooksDialog', value)
     },
     // series
-    dialogUpdateSeries ({ commit }, series) {
+    dialogUpdateSeries({commit}, series) {
       commit('setUpdateSeries', series)
       commit('setUpdateSeriesDialog', true)
     },
-    dialogUpdateSeriesDisplay ({ commit }, value) {
+    dialogUpdateSeriesDisplay({commit}, value) {
       commit('setUpdateSeriesDialog', value)
     },
   },

komga-webui/src/views/Home.vue

@@ -3,7 +3,16 @@
     <v-app-bar
       app
     >
-      <v-app-bar-nav-icon @click.stop="toggleDrawer"/>
+      <v-badge
+        dot
+        offset-x="15"
+        offset-y="20"
+        :value="drawerVisible ? 0 : booksToCheck"
+        color="accent"
+        :style="`margin-${$vuetify.rtl ? 'right' : 'left' }: -12px`"
+      >
+        <v-app-bar-nav-icon @click.stop="toggleDrawer"/>
+      </v-badge>
 
       <search-box class="flex-fill"/>
 
@@ -92,7 +101,14 @@
             <v-icon>mdi-cog</v-icon>
           </v-list-item-action>
           <v-list-item-content>
-            <v-list-item-title>{{ $t('server_settings.server_settings') }}</v-list-item-title>
+            <v-badge
+              dot
+              inline
+              v-model="booksToCheck"
+              color="accent"
+            >
+              <v-list-item-title>{{ $t('server_settings.server_settings') }}</v-list-item-title>
+            </v-badge>
           </v-list-item-content>
         </v-list-item>
 
@@ -170,6 +186,7 @@ import {Theme} from '@/types/themes'
 import Vue from 'vue'
 import {LIBRARIES_ALL} from "@/types/library"
 import Toaster from "@/components/Toaster.vue"
+import {MediaStatus} from "@/types/enum-books";
 
 export default Vue.extend({
   name: 'home',
@@ -185,9 +202,14 @@ export default Vue.extend({
   async created() {
     if (this.isAdmin) {
       this.info = await this.$actuator.getInfo()
+      this.$komgaBooks.getBooks(undefined, {size: 0} as PageRequest, undefined, [MediaStatus.ERROR, MediaStatus.UNSUPPORTED])
+        .then(x => this.$store.commit('setBooksToCheck', x.totalElements))
     }
   },
   computed: {
+    booksToCheck(): number {
+      return this.$store.state.booksToCheck
+    },
     taskCount(): number {
       return this.$store.state.komgaSse.taskCount
     },

komga-webui/src/views/Settings.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <v-tabs>
-      <v-tab :to="{name: 'settings-analysis'}">{{ $t('media_analysis.media_analysis') }}</v-tab>
+      <v-tab :to="{name: 'settings-analysis'}">
+        <v-badge
+          dot
+          v-model="booksToCheck"
+          color="accent"
+        >
+          {{ $t('media_analysis.media_analysis') }}
+        </v-badge>
+      </v-tab>
       <v-tab :to="{name: 'settings-users'}">{{ $t('users.users') }}</v-tab>
       <v-tab :to="{name: 'settings-server'}">{{ $t('server.tab_title') }}</v-tab>
       <v-tab :to="{name: 'settings-data-import'}">{{ $t('data_import.tab_title') }}</v-tab>
@@ -15,6 +23,11 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'Settings',
+  computed: {
+    booksToCheck(): number {
+      return this.$store.state.booksToCheck
+    },
+  },
 })
 </script>
 

komga-webui/src/views/SettingsMediaAnalysis.vue

@@ -86,6 +86,7 @@ export default Vue.extend({
 
       const booksPage = await this.$komgaBooks.getBooks(undefined, pageRequest, undefined, [MediaStatus.ERROR, MediaStatus.UNSUPPORTED])
       this.totalBooks = booksPage.totalElements
+      this.$store.commit('setBooksToCheck', booksPage.totalElements)
       this.books = booksPage.content
 
       this.loading = false