refactor(webui): use global dialogs for collection edition

komga-webui/src/components/Dialogs.vue

@@ -4,6 +4,13 @@
       v-model="addToCollectionDialog"
       :series="addToCollectionSeries"
       @added="collectionAdded"
+      @created="collectionAdded"
+    />
+
+    <collection-edit-dialog
+      v-model="editCollectionDialog"
+      :collection="editCollection"
+      @updated="collectionUpdated"
     />
 
     <collection-delete-dialog
@@ -42,6 +49,7 @@ import {
   bookToEventBookChanged,
   COLLECTION_CHANGED,
   COLLECTION_DELETED,
+  collectionToEventCollectionChanged,
   collectionToEventCollectionDeleted,
   LIBRARY_DELETED,
   libraryToEventLibraryDeleted,
@@ -51,11 +59,13 @@ import {
 import Vue from 'vue'
 import EditBooksDialog from '@/components/dialogs/EditBooksDialog.vue'
 import EditSeriesDialog from '@/components/dialogs/EditSeriesDialog.vue'
+import CollectionEditDialog from '@/components/dialogs/CollectionEditDialog.vue'
 
 export default Vue.extend({
   name: 'Dialogs',
   components: {
     CollectionAddToDialog,
+    CollectionEditDialog,
     CollectionDeleteDialog,
     LibraryDeleteDialog,
     EditBooksDialog,
@@ -73,6 +83,17 @@ export default Vue.extend({
     addToCollectionSeries (): SeriesDto | SeriesDto[] {
       return this.$store.state.addToCollectionSeries
     },
+    editCollectionDialog: {
+      get (): boolean {
+        return this.$store.state.editCollectionDialog
+      },
+      set (val) {
+        this.$store.dispatch('dialogEditCollectionDisplay', val)
+      },
+    },
+    editCollection (): CollectionDto {
+      return this.$store.state.editCollection
+    },
     deleteCollectionDialog: {
       get (): boolean {
         return this.$store.state.deleteCollectionDialog
@@ -119,7 +140,7 @@ export default Vue.extend({
     },
   },
   methods: {
-    collectionAdded () {
+    collectionAdded (collection: CollectionDto) {
       if (Array.isArray(this.addToCollectionSeries)) {
         this.addToCollectionSeries.forEach(s => {
           this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(s))
@@ -127,7 +148,10 @@ export default Vue.extend({
       } else {
         this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(this.addToCollectionSeries))
       }
-      this.$eventHub.$emit(COLLECTION_CHANGED)
+      this.$eventHub.$emit(COLLECTION_CHANGED, collectionToEventCollectionChanged(collection))
+    },
+    collectionUpdated () {
+      this.$eventHub.$emit(COLLECTION_CHANGED, collectionToEventCollectionChanged(this.editCollection))
     },
     collectionDeleted () {
       this.$eventHub.$emit(COLLECTION_DELETED, collectionToEventCollectionDeleted(this.deleteCollection))

komga-webui/src/components/dialogs/CollectionAddToDialog.vue

@@ -144,7 +144,7 @@ export default Vue.extend({
 
       try {
         await this.$komgaCollections.patchCollection(collection.id, toUpdate)
-        this.$emit('added', true)
+        this.$emit('added', collection)
         this.dialogClose()
       } catch (e) {
         this.showSnack(e.message)
@@ -158,8 +158,8 @@ export default Vue.extend({
       } as CollectionCreationDto
 
       try {
-        await this.$komgaCollections.postCollection(toCreate)
-        this.$emit('added', true)
+        const created = await this.$komgaCollections.postCollection(toCreate)
+        this.$emit('created', created)
         this.dialogClose()
       } catch (e) {
         this.showSnack(e.message)

komga-webui/src/store.ts

@@ -7,6 +7,8 @@ export default new Vuex.Store({
   state: {
     addToCollectionSeries: {} as SeriesDto | SeriesDto[],
     addToCollectionDialog: false,
+    editCollection: {} as CollectionDto,
+    editCollectionDialog: false,
     deleteCollection: {} as CollectionDto,
     deleteCollectionDialog: false,
     deleteLibrary: {} as LibraryDto,
@@ -23,6 +25,12 @@ export default new Vuex.Store({
     setAddToCollectionDialog (state, dialog) {
       state.addToCollectionDialog = dialog
     },
+    setEditCollection (state, collection) {
+      state.editCollection = collection
+    },
+    setEditCollectionDialog (state, dialog) {
+      state.editCollectionDialog = dialog
+    },
     setDeleteCollection (state, collection) {
       state.deleteCollection = collection
     },
@@ -56,6 +64,13 @@ export default new Vuex.Store({
     dialogAddSeriesToCollectionDisplay ({ commit }, value) {
       commit('setAddToCollectionDialog', value)
     },
+    dialogEditCollection ({ commit }, collection) {
+      commit('setEditCollection', collection)
+      commit('setEditCollectionDialog', true)
+    },
+    dialogEditCollectionDisplay ({ commit }, value) {
+      commit('setEditCollectionDialog', value)
+    },
     dialogDeleteCollection ({ commit }, collection) {
       commit('setDeleteCollection', collection)
       commit('setDeleteCollectionDialog', true)

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

@@ -8,6 +8,10 @@ interface EventSeriesChanged {
   libraryId: number
 }
 
+interface EventCollectionChanged {
+  id: number
+}
+
 interface EventCollectionDeleted {
   id: number
 }

komga-webui/src/types/events.ts

@@ -18,6 +18,12 @@ export function seriesToEventSeriesChanged (series: SeriesDto): EventSeriesChang
   } as EventSeriesChanged
 }
 
+export function collectionToEventCollectionChanged (collection: CollectionDto): EventCollectionChanged {
+  return {
+    id: collection.id,
+  } as EventCollectionChanged
+}
+
 export function collectionToEventCollectionDeleted (collection: CollectionDto): EventCollectionDeleted {
   return {
     id: collection.id,

komga-webui/src/views/BrowseCollection.vue

@@ -100,11 +100,6 @@
       </toolbar-sticky>
     </v-scroll-y-transition>
 
-    <collection-edit-dialog v-model="dialogEditCollection"
-                            :collection="collection"
-                            @updated="loadCollection(collectionId)"
-    />
-
     <v-container fluid>
 
       <item-browser
@@ -123,10 +118,9 @@
 <script lang="ts">
 import Badge from '@/components/Badge.vue'
 import CollectionActionsMenu from '@/components/menus/CollectionActionsMenu.vue'
-import CollectionEditDialog from '@/components/dialogs/CollectionEditDialog.vue'
 import ItemBrowser from '@/components/ItemBrowser.vue'
 import ToolbarSticky from '@/components/ToolbarSticky.vue'
-import { COLLECTION_DELETED, SERIES_CHANGED } from '@/types/events'
+import { COLLECTION_CHANGED, COLLECTION_DELETED, SERIES_CHANGED } from '@/types/events'
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -134,7 +128,6 @@ export default Vue.extend({
   components: {
     ToolbarSticky,
     ItemBrowser,
-    CollectionEditDialog,
     CollectionActionsMenu,
     Badge,
   },
@@ -146,7 +139,6 @@ export default Vue.extend({
       selectedSeries: [] as SeriesDto[],
       editSeriesSingle: {} as SeriesDto,
       selected: [],
-      dialogEditCollection: false,
       editElements: false,
     }
   },
@@ -185,10 +177,12 @@ export default Vue.extend({
     },
   },
   created () {
+    this.$eventHub.$on(COLLECTION_CHANGED, this.collectionChanged)
     this.$eventHub.$on(COLLECTION_DELETED, this.afterDelete)
     this.$eventHub.$on(SERIES_CHANGED, this.reloadSeries)
   },
   beforeDestroy () {
+    this.$eventHub.$off(COLLECTION_CHANGED, this.collectionChanged)
     this.$eventHub.$off(COLLECTION_DELETED, this.afterDelete)
     this.$eventHub.$off(SERIES_CHANGED, this.reloadSeries)
   },
@@ -212,6 +206,11 @@ export default Vue.extend({
     },
   },
   methods: {
+    collectionChanged (event: EventCollectionChanged) {
+      if (event.id === this.collectionId) {
+        this.loadCollection(this.collectionId)
+      }
+    },
     async loadCollection (collectionId: number) {
       this.collection = await this.$komgaCollections.getOneCollection(collectionId)
       this.series = (await this.$komgaCollections.getSeries(collectionId, { unpaged: true } as PageRequest)).content
@@ -258,7 +257,7 @@ export default Vue.extend({
       this.loadCollection(this.collectionId)
     },
     editCollection () {
-      this.dialogEditCollection = true
+      this.$store.dispatch('dialogEditCollection', this.collection)
     },
     afterDelete () {
       this.$router.push({ name: 'browse-collections', params: { libraryId: '0' } })