diff --git a/komga-webui/src/components/Dialogs.vue b/komga-webui/src/components/Dialogs.vue index c7e4a86b..77fe6678 100644 --- a/komga-webui/src/components/Dialogs.vue +++ b/komga-webui/src/components/Dialogs.vue @@ -4,6 +4,13 @@ v-model="addToCollectionDialog" :series="addToCollectionSeries" @added="collectionAdded" + @created="collectionAdded" + /> + + { 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)) diff --git a/komga-webui/src/components/dialogs/CollectionAddToDialog.vue b/komga-webui/src/components/dialogs/CollectionAddToDialog.vue index 8964030e..f6b112a5 100644 --- a/komga-webui/src/components/dialogs/CollectionAddToDialog.vue +++ b/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) diff --git a/komga-webui/src/store.ts b/komga-webui/src/store.ts index efa78b38..0be2e481 100644 --- a/komga-webui/src/store.ts +++ b/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) diff --git a/komga-webui/src/types/events-payloads.ts b/komga-webui/src/types/events-payloads.ts index 5c1cb655..b5e3d887 100644 --- a/komga-webui/src/types/events-payloads.ts +++ b/komga-webui/src/types/events-payloads.ts @@ -8,6 +8,10 @@ interface EventSeriesChanged { libraryId: number } +interface EventCollectionChanged { + id: number +} + interface EventCollectionDeleted { id: number } diff --git a/komga-webui/src/types/events.ts b/komga-webui/src/types/events.ts index b3631431..2548af97 100644 --- a/komga-webui/src/types/events.ts +++ b/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, diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue index a5da51eb..46755d09 100644 --- a/komga-webui/src/views/BrowseCollection.vue +++ b/komga-webui/src/views/BrowseCollection.vue @@ -100,11 +100,6 @@ - - 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' } })