Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-05 19:11:44 +02:00
Code Issues Projects Releases Wiki Activity

refactor(webui): use global dialogs for series and books edition

Browse source
This commit is contained in:
Gauthier Roebroeck 2020-06-28 12:37:39 +08:00
parent 32dad62777
commit bb1257709b
6 changed files with 69 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
komga-webui/src/components/Dialogs.vue
View file

@ -37,7 +37,17 @@
import CollectionAddToDialog from '@/components/dialogs/CollectionAddToDialog.vue'
import CollectionDeleteDialog from '@/components/dialogs/CollectionDeleteDialog.vue'
import LibraryDeleteDialog from '@/components/dialogs/LibraryDeleteDialog.vue'
import { BOOK_CHANGED, COLLECTION_CHANGED, COLLECTION_DELETED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
import {
BOOK_CHANGED,
bookToEventBookChanged,
COLLECTION_CHANGED,
COLLECTION_DELETED,
collectionToEventCollectionDeleted,
LIBRARY_DELETED,
libraryToEventLibraryDeleted,
SERIES_CHANGED,
seriesToEventSeriesChanged,
} from '@/types/events'
import Vue from 'vue'
import EditBooksDialog from '@/components/dialogs/EditBooksDialog.vue'
import EditSeriesDialog from '@/components/dialogs/EditSeriesDialog.vue'
@ -112,38 +122,24 @@ export default Vue.extend({
collectionAdded () {
if (Array.isArray(this.addToCollectionSeries)) {
this.addToCollectionSeries.forEach(s => {
this.$eventHub.$emit(SERIES_CHANGED, {
id: s.id,
libraryId: s.libraryId,
} as EventSeriesChanged)
this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(s))
})
} else {
this.$eventHub.$emit(SERIES_CHANGED, {
id: this.addToCollectionSeries.id,
libraryId: this.addToCollectionSeries.libraryId,
} as EventSeriesChanged)
this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(this.addToCollectionSeries))
}
this.$eventHub.$emit(COLLECTION_CHANGED)
},
collectionDeleted () {
this.$eventHub.$emit(COLLECTION_DELETED, {
id: this.deleteCollection.id,
} as EventCollectionDeleted)
this.$eventHub.$emit(COLLECTION_DELETED, collectionToEventCollectionDeleted(this.deleteCollection))
},
libraryDeleted () {
this.$eventHub.$emit(LIBRARY_DELETED, {
id: this.deleteLibrary.id,
} as EventLibraryDeleted)
this.$eventHub.$emit(LIBRARY_DELETED, libraryToEventLibraryDeleted(this.deleteLibrary))
},
bookUpdated (book: BookDto) {
this.$eventHub.$emit(BOOK_CHANGED, {
id: book.id,
} as EventBookChanged)
this.$eventHub.$emit(BOOK_CHANGED, bookToEventBookChanged(book))
},
seriesUpdated (series: SeriesDto) {
this.$eventHub.$emit(SERIES_CHANGED, {
id: series.id,
} as EventSeriesChanged)
this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(series))
},
},
})

12
komga-webui/src/components/menus/BookActionsMenu.vue
View file

@ -26,7 +26,7 @@
<script lang="ts">
import { getReadProgress } from '@/functions/book-progress'
import { ReadStatus } from '@/types/enum-books'
import { BOOK_CHANGED } from '@/types/events'
import { BOOK_CHANGED, bookToEventBookChanged } from '@/types/events'
import Vue from 'vue'
export default Vue.extend({
@ -72,17 +72,11 @@ export default Vue.extend({
async markRead () {
const readProgress = { completed: true } as ReadProgressUpdateDto
await this.$komgaBooks.updateReadProgress(this.book.id, readProgress)
this.$eventHub.$emit(BOOK_CHANGED, {
id: this.book.id,
seriesId: this.book.seriesId,
} as EventBookChanged)
this.$eventHub.$emit(BOOK_CHANGED, bookToEventBookChanged(this.book))
},
async markUnread () {
await this.$komgaBooks.deleteReadProgress(this.book.id)
this.$eventHub.$emit(BOOK_CHANGED, {
id: this.book.id,
seriesId: this.book.seriesId,
} as EventBookChanged)
this.$eventHub.$emit(BOOK_CHANGED, bookToEventBookChanged(this.book))
},
},
})

12
komga-webui/src/components/menus/SeriesActionsMenu.vue
View file

@ -27,7 +27,7 @@
</div>
</template>
<script lang="ts">
import { SERIES_CHANGED } from '@/types/events'
import { SERIES_CHANGED, seriesToEventSeriesChanged } from '@/types/events'
import Vue from 'vue'
export default Vue.extend({
@ -75,17 +75,11 @@ export default Vue.extend({
},
async markRead () {
await this.$komgaSeries.markAsRead(this.series.id)
this.$eventHub.$emit(SERIES_CHANGED, {
id: this.series.id,
libraryId: this.series.libraryId,
} as EventSeriesChanged)
this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(this.series))
},
async markUnread () {
await this.$komgaSeries.markAsUnread(this.series.id)
this.$eventHub.$emit(SERIES_CHANGED, {
id: this.series.id,
libraryId: this.series.libraryId,
} as EventSeriesChanged)
this.$eventHub.$emit(SERIES_CHANGED, seriesToEventSeriesChanged(this.series))
},
},
})

26
komga-webui/src/types/events.ts
View file

@ -3,3 +3,29 @@ export const SERIES_CHANGED = 'series-changed'
export const COLLECTION_DELETED = 'collection-deleted'
export const COLLECTION_CHANGED = 'collection-changed'
export const LIBRARY_DELETED = 'library-deleted'
export function bookToEventBookChanged (book: BookDto): EventBookChanged {
return {
id: book.id,
seriesId: book.seriesId,
} as EventBookChanged
}
export function seriesToEventSeriesChanged (series: SeriesDto): EventSeriesChanged {
return {
id: series.id,
libraryId: series.libraryId,
} as EventSeriesChanged
}
export function collectionToEventCollectionDeleted (collection: CollectionDto): EventCollectionDeleted {
return {
id: collection.id,
} as EventCollectionDeleted
}
export function libraryToEventLibraryDeleted (library: LibraryDto): EventLibraryDeleted {
return {
id: library.id,
} as EventLibraryDeleted
}

33
komga-webui/src/views/BrowseLibraries.vue
View file

@ -39,7 +39,7 @@
<v-spacer/>
<v-btn icon @click="markSelectedRead()">
<v-btn icon @click="markSelectedRead">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-bookmark-check</v-icon>
@ -48,7 +48,7 @@
</v-tooltip>
</v-btn>
<v-btn icon @click="markSelectedUnread()">
<v-btn icon @click="markSelectedUnread">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-bookmark-remove</v-icon>
@ -57,7 +57,7 @@
</v-tooltip>
</v-btn>
<v-btn icon @click="addToCollection()">
<v-btn icon @click="addToCollection">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-playlist-plus</v-icon>
@ -66,7 +66,7 @@
</v-tooltip>
</v-btn>
<v-btn icon @click="dialogEdit = true" v-if="isAdmin">
<v-btn icon @click="editMultipleSeries" v-if="isAdmin">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-pencil</v-icon>
@ -81,14 +81,6 @@
:libraryId="libraryId"
/>
<edit-series-dialog v-model="dialogEdit"
:series.sync="selectedSeries"
/>
<edit-series-dialog v-model="dialogEditSingle"
:series.sync="editSeriesSingle"
/>
<v-container fluid>
<empty-state
v-if="totalPages === 0"
@ -110,7 +102,7 @@
<item-browser
:items="series"
:selected.sync="selected"
:edit-function="singleEdit"
:edit-function="editSingleSeries"
/>
</template>
</v-container>
@ -120,7 +112,6 @@
<script lang="ts">
import Badge from '@/components/Badge.vue'
import EditSeriesDialog from '@/components/dialogs/EditSeriesDialog.vue'
import EmptyState from '@/components/EmptyState.vue'
import FilterMenuButton from '@/components/FilterMenuButton.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
@ -146,7 +137,6 @@ export default Vue.extend({
SortMenuButton,
FilterMenuButton,
Badge,
EditSeriesDialog,
ItemBrowser,
PageSizeSelect,
LibraryNavigation,
@ -175,9 +165,6 @@ export default Vue.extend({
pageUnwatch: null as any,
pageSizeUnwatch: null as any,
selected: [],
dialogEdit: false,
dialogEditSingle: false,
dialogAddToCollection: false,
collectionsCount: 0,
}
},
@ -367,10 +354,6 @@ export default Vue.extend({
return undefined
}
},
singleEdit (series: SeriesDto) {
this.editSeriesSingle = series
this.dialogEditSingle = true
},
async markSelectedRead () {
await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.markAsRead(s.id),
@ -390,6 +373,12 @@ export default Vue.extend({
addToCollection () {
this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries)
},
editSingleSeries (series: SeriesDto) {
this.$store.dispatch('dialogUpdateSeries', series)
},
editMultipleSeries () {
this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
},
},
})
</script>

50
komga-webui/src/views/BrowseSeries.vue
View file

@ -68,20 +68,12 @@
</v-tooltip>
</v-btn>
<v-btn icon @click="dialogEditBooks = true" v-if="isAdmin">
<v-btn icon @click="editMultipleBooks" v-if="isAdmin">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</toolbar-sticky>
</v-scroll-y-transition>
<edit-books-dialog v-model="dialogEditBooks"
:books.sync="selectedBooks"
/>
<edit-books-dialog v-model="dialogEditBookSingle"
:books.sync="editBookSingle"
/>
<v-container fluid>
<v-row>
<v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
@ -188,7 +180,7 @@
<item-browser :items="books"
:selected.sync="selected"
:edit-function="this.singleEdit"
:edit-function="editSingleBook"
/>
</template>
@ -199,7 +191,6 @@
<script lang="ts">
import Badge from '@/components/Badge.vue'
import EditBooksDialog from '@/components/dialogs/EditBooksDialog.vue'
import EmptyState from '@/components/EmptyState.vue'
import FilterMenuButton from '@/components/FilterMenuButton.vue'
import HorizontalScroller from '@/components/HorizontalScroller.vue'
@ -224,7 +215,6 @@ export default Vue.extend({
SortMenuButton,
FilterMenuButton,
Badge,
EditBooksDialog,
ItemBrowser,
PageSizeSelect,
SeriesActionsMenu,
@ -237,7 +227,6 @@ export default Vue.extend({
series: {} as SeriesDto,
books: [] as BookDto[],
selectedBooks: [] as BookDto[],
editBookSingle: {} as BookDto,
page: 1,
pageSize: 20,
totalPages: 1,
@ -256,9 +245,6 @@ export default Vue.extend({
pageUnwatch: null as any,
pageSizeUnwatch: null as any,
selected: [],
dialogEditBooks: false,
dialogEditBookSingle: false,
dialogAddToCollection: false,
collections: [] as CollectionDto[],
collectionsContent: [] as any[][],
collectionPanel: -1,
@ -301,20 +287,6 @@ export default Vue.extend({
this.selectedBooks = val.map(id => this.books.find(s => s.id === id))
.filter(x => x !== undefined) as BookDto[]
},
selectedBooks (val: BookDto[]) {
val.forEach(s => {
const index = this.books.findIndex(x => x.id === s.id)
if (index !== -1) {
this.books.splice(index, 1, s)
}
})
},
editBookSingle (val: BookDto) {
const index = this.books.findIndex(x => x.id === val.id)
if (index !== -1) {
this.books.splice(index, 1, val)
}
},
},
created () {
this.$eventHub.$on(SERIES_CHANGED, this.reloadSeries)
@ -455,27 +427,23 @@ export default Vue.extend({
editSeries () {
this.$store.dispatch('dialogUpdateSeries', this.series)
},
singleEdit (book: BookDto) {
this.editBookSingle = book
this.dialogEditBookSingle = true
editSingleBook (book: BookDto) {
this.$store.dispatch('dialogUpdateBooks', book)
},
editMultipleBooks () {
this.$store.dispatch('dialogUpdateBooks', this.selectedBooks)
},
async markSelectedRead () {
await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.updateReadProgress(b.id, { completed: true }),
))
this.selectedBooks = await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.getBook(b.id),
))
this.loadSeries(this.seriesId)
await this.loadSeries(this.seriesId)
},
async markSelectedUnread () {
await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.deleteReadProgress(b.id),
))
this.selectedBooks = await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.getBook(b.id),
))
this.loadSeries(this.seriesId)
await this.loadSeries(this.seriesId)
},
},
})