feat(webui): better handling of library deletion

depending on the current screen, data can be reloaded or redirection to home page

komga-webui/src/components/CollectionActionsMenu.vue

@@ -53,11 +53,5 @@ export default Vue.extend({
 })
 </script>
 <style scoped>
-.list-warning:hover {
-  background: #F44336;
-}
-
-.list-warning:hover .v-list-item__title {
-  color: white;
-}
+@import "../styles/list-warning.css";
 </style>

komga-webui/src/components/Dialogs.vue

@@ -11,18 +11,25 @@
       :collection="deleteCollection"
       @deleted="collectionDeleted"
     />
+
+    <library-delete-dialog
+      v-model="deleteLibraryDialog"
+      :library="deleteLibrary"
+      @deleted="libraryDeleted"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import CollectionAddToDialog from '@/components/CollectionAddToDialog.vue'
 import CollectionDeleteDialog from '@/components/CollectionDeleteDialog.vue'
-import { COLLECTION_CHANGED, SERIES_CHANGED } from '@/types/events'
+import LibraryDeleteDialog from '@/components/LibraryDeleteDialog.vue'
+import { COLLECTION_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
 import Vue from 'vue'
 
 export default Vue.extend({
   name: 'Dialogs',
-  components: { CollectionAddToDialog, CollectionDeleteDialog },
+  components: { CollectionAddToDialog, CollectionDeleteDialog, LibraryDeleteDialog },
   computed: {
     addToCollectionDialog: {
       get (): boolean {
@@ -46,6 +53,17 @@ export default Vue.extend({
     deleteCollection (): CollectionDto {
       return this.$store.state.deleteCollection
     },
+    deleteLibraryDialog: {
+      get (): boolean {
+        return this.$store.state.deleteLibraryDialog
+      },
+      set (val) {
+        this.$store.dispatch('dialogDeleteLibraryDisplay', val)
+      },
+    },
+    deleteLibrary (): LibraryDto {
+      return this.$store.state.deleteLibrary
+    },
   },
   methods: {
     collectionAdded () {
@@ -67,6 +85,11 @@ export default Vue.extend({
     collectionDeleted () {
       this.$eventHub.$emit(COLLECTION_CHANGED)
     },
+    libraryDeleted () {
+      this.$eventHub.$emit(LIBRARY_DELETED, {
+        id: this.deleteLibrary.id,
+      } as EventLibraryDeleted)
+    },
   },
 })
 </script>

komga-webui/src/components/LibraryActionsMenu.vue

@@ -22,25 +22,13 @@
         </v-list-item>
       </v-list>
     </v-menu>
-
-    <library-delete-dialog v-model="modalDeleteLibrary"
-                           :library="library"
-                           @deleted="navigateHome"
-    />
   </div>
 </template>
 <script lang="ts">
-import LibraryDeleteDialog from '@/components/LibraryDeleteDialog.vue'
 import Vue from 'vue'
 
 export default Vue.extend({
   name: 'LibraryActionsMenu',
-  components: { LibraryDeleteDialog },
-  data: function () {
-    return {
-      modalDeleteLibrary: false,
-    }
-  },
   props: {
     library: {
       type: Object as () => LibraryDto,
@@ -63,20 +51,11 @@ export default Vue.extend({
       this.$komgaLibraries.refreshMetadata(this.library)
     },
     promptDeleteLibrary () {
-      this.modalDeleteLibrary = true
-    },
-    navigateHome () {
-      this.$router.push({ name: 'home' })
+      this.$store.dispatch('dialogDeleteLibrary', this.library)
     },
   },
 })
 </script>
 <style scoped>
-.list-warning:hover {
-  background: #F44336;
-}
-
-.list-warning:hover .v-list-item__title {
-  color: white;
-}
+@import "../styles/list-warning.css";
 </style>

komga-webui/src/store.ts

@@ -9,6 +9,8 @@ export default new Vuex.Store({
     addToCollectionDialog: false,
     deleteCollection: {} as CollectionDto,
     deleteCollectionDialog: false,
+    deleteLibrary: {} as LibraryDto,
+    deleteLibraryDialog: false,
   },
   mutations: {
     setAddToCollectionSeries (state, series) {
@@ -23,6 +25,12 @@ export default new Vuex.Store({
     setDeleteCollectionDialog (state, dialog) {
       state.deleteCollectionDialog = dialog
     },
+    setDeleteLibrary (state, library) {
+      state.deleteLibrary = library
+    },
+    setDeleteLibraryDialog (state, dialog) {
+      state.deleteLibraryDialog = dialog
+    },
   },
   actions: {
     dialogAddSeriesToCollection ({ commit }, series) {
@@ -39,5 +47,12 @@ export default new Vuex.Store({
     dialogDeleteCollectionDisplay ({ commit }, value) {
       commit('setDeleteCollectionDialog', value)
     },
+    dialogDeleteLibrary ({ commit }, library) {
+      commit('setDeleteLibrary', library)
+      commit('setDeleteLibraryDialog', true)
+    },
+    dialogDeleteLibraryDisplay ({ commit }, value) {
+      commit('setDeleteLibraryDialog', value)
+    },
   },
 })

komga-webui/src/styles/list-warning.css

@@ -0,0 +1,7 @@
+.list-warning:hover {
+    background: #F44336;
+}
+
+.list-warning:hover .v-list-item__title {
+    color: white;
+}

komga-webui/src/types/events-payloads.ts

@@ -7,3 +7,7 @@ interface EventSeriesChanged {
   id: number,
   libraryId: number
 }
+
+interface EventLibraryDeleted {
+  id: number
+}

komga-webui/src/types/events.ts

@@ -1,3 +1,4 @@
 export const BOOK_CHANGED = 'book-changed'
 export const SERIES_CHANGED = 'series-changed'
 export const COLLECTION_CHANGED = 'collection-changed'
+export const LIBRARY_DELETED = 'library-deleted'

komga-webui/src/types/komga-books.ts

@@ -1,6 +1,7 @@
 interface BookDto {
   id: number,
   seriesId: number,
+  libraryId: number,
   name: string,
   url: string,
   number: number,

komga-webui/src/views/BrowseBook.vue

@@ -157,7 +157,7 @@ import { getReadProgress, getReadProgressPercentage } from '@/functions/book-pro
 import { getBookTitleCompact } from '@/functions/book-title'
 import { bookFileUrl, bookThumbnailUrl } from '@/functions/urls'
 import { ReadStatus } from '@/types/enum-books'
-import { BOOK_CHANGED } from '@/types/events'
+import { BOOK_CHANGED, LIBRARY_DELETED } from '@/types/events'
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -173,9 +173,11 @@ export default Vue.extend({
   async created () {
     this.loadBook(this.bookId)
     this.$eventHub.$on(BOOK_CHANGED, this.reloadBook)
+    this.$eventHub.$on(LIBRARY_DELETED, this.libraryDeleted)
   },
   beforeDestroy () {
     this.$eventHub.$off(BOOK_CHANGED, this.reloadBook)
+    this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted)
   },
   watch: {
     async book (val) {
@@ -234,6 +236,11 @@ export default Vue.extend({
     },
   },
   methods: {
+    libraryDeleted (event: EventLibraryDeleted) {
+      if (event.id === this.book.libraryId) {
+        this.$router.push({ name: 'home' })
+      }
+    },
     reloadBook (event: EventBookChanged) {
       if (event.id === this.bookId) this.loadBook(this.bookId)
     },

komga-webui/src/views/BrowseLibraries.vue

@@ -132,7 +132,7 @@ import ToolbarSticky from '@/components/ToolbarSticky.vue'
 import { parseQueryFilter, parseQuerySort } from '@/functions/query-params'
 import { ReadStatus } from '@/types/enum-books'
 import { SeriesStatus } from '@/types/enum-series'
-import { COLLECTION_CHANGED, SERIES_CHANGED } from '@/types/events'
+import { COLLECTION_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
 import Vue from 'vue'
 
 const cookiePageSize = 'pagesize'
@@ -210,10 +210,12 @@ export default Vue.extend({
   created () {
     this.$eventHub.$on(COLLECTION_CHANGED, this.reloadCollections)
     this.$eventHub.$on(SERIES_CHANGED, this.reloadSeries)
+    this.$eventHub.$on(LIBRARY_DELETED, this.libraryDeleted)
   },
   beforeDestroy () {
     this.$eventHub.$off(COLLECTION_CHANGED, this.reloadCollections)
     this.$eventHub.$off(SERIES_CHANGED, this.reloadSeries)
+    this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted)
   },
   mounted () {
     if (this.$cookies.isKey(cookiePageSize)) {
@@ -271,6 +273,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    libraryDeleted (event: EventLibraryDeleted) {
+      if (event.id === this.libraryId) {
+        this.$router.push({ name: 'home' })
+      } else if (this.libraryId === 0) {
+        this.loadLibrary(this.libraryId)
+      }
+    },
     setWatches () {
       this.sortUnwatch = this.$watch('sortActive', this.updateRouteAndReload)
       this.filterUnwatch = this.$watch('filters', this.updateRouteAndReload)

komga-webui/src/views/BrowseSeries.vue

@@ -211,7 +211,7 @@ import ToolbarSticky from '@/components/ToolbarSticky.vue'
 import { parseQueryFilter, parseQuerySort } from '@/functions/query-params'
 import { seriesThumbnailUrl } from '@/functions/urls'
 import { ReadStatus } from '@/types/enum-books'
-import { BOOK_CHANGED, SERIES_CHANGED } from '@/types/events'
+import { BOOK_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
 import Vue from 'vue'
 
 const cookiePageSize = 'pagesize'
@@ -319,10 +319,12 @@ export default Vue.extend({
   created () {
     this.$eventHub.$on(SERIES_CHANGED, this.reloadSeries)
     this.$eventHub.$on(BOOK_CHANGED, this.reloadBooks)
+    this.$eventHub.$on(LIBRARY_DELETED, this.libraryDeleted)
   },
   beforeDestroy () {
     this.$eventHub.$off(SERIES_CHANGED, this.reloadSeries)
-    this.$eventHub.$on(BOOK_CHANGED, this.reloadBooks)
+    this.$eventHub.$off(BOOK_CHANGED, this.reloadBooks)
+    this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted)
   },
   mounted () {
     if (this.$cookies.isKey(cookiePageSize)) {
@@ -391,6 +393,11 @@ export default Vue.extend({
 
       this.setWatches()
     },
+    libraryDeleted (event: EventLibraryDeleted) {
+      if (event.id === this.series.libraryId) {
+        this.$router.push({ name: 'home' })
+      }
+    },
     reloadSeries (event: EventSeriesChanged) {
       if (event.id === this.seriesId) this.loadSeries(this.seriesId)
     },

komga-webui/src/views/Dashboard.vue

@@ -89,6 +89,7 @@ import EmptyState from '@/components/EmptyState.vue'
 import HorizontalScroller from '@/components/HorizontalScroller.vue'
 import ItemCard from '@/components/ItemCard.vue'
 import { ReadStatus } from '@/types/enum-books'
+import { LIBRARY_DELETED } from '@/types/events'
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -107,12 +108,14 @@ export default Vue.extend({
       dialogEditBookSingle: false,
     }
   },
+  created () {
+    this.$eventHub.$on(LIBRARY_DELETED, this.loadAll)
+  },
+  beforeDestroy () {
+    this.$eventHub.$off(LIBRARY_DELETED, this.loadAll)
+  },
   mounted () {
-    this.loadNewSeries()
-    this.loadUpdatedSeries()
-    this.loadLatestBooks()
-    this.loadInProgressBooks()
-    this.loadOnDeckBooks()
+    this.loadAll()
   },
   watch: {
     editSeriesSingle (val: SeriesDto) {
@@ -150,6 +153,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    loadAll () {
+      this.loadNewSeries()
+      this.loadUpdatedSeries()
+      this.loadLatestBooks()
+      this.loadInProgressBooks()
+      this.loadOnDeckBooks()
+    },
     async loadNewSeries () {
       this.newSeries = (await this.$komgaSeries.getNewSeries()).content
     },