Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-20 15:34:17 +01:00
Code Issues Projects Releases Wiki Activity

feat(webui): select all option in the selection bar

Browse source
This commit is contained in:
Gauthier Roebroeck 2021-06-29 13:59:20 +08:00
parent 91ac548b7d
commit 8545574d38
9 changed files with 82 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
komga-webui/src/components/bars/BooksMultiSelectBar.vue → komga-webui/src/components/bars/MultiSelectBar.vue
View file

@ -2,9 +2,24 @@
<v-scroll-y-transition hide-on-leave>
<toolbar-sticky v-if="value.length > 0" :elevation="5" color="base">
<v-btn icon @click="unselectAll">
<v-icon>mdi-close</v-icon>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-close</v-icon>
</template>
<span>{{ $t('menu.deselect_all') }}</span>
</v-tooltip>
</v-btn>
<v-toolbar-title>
<v-btn icon @click="selectAll" v-if="showSelectAll">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-select-all</v-icon>
</template>
<span>{{ $t('menu.select_all') }}</span>
</v-tooltip>
</v-btn>
<v-toolbar-title class="mx-2">
<span>{{ $tc('common.n_selected', value.length) }}</span>
</v-toolbar-title>
@ -28,7 +43,16 @@
</v-tooltip>
</v-btn>
<v-btn icon @click="addToReadList" v-if="isAdmin">
<v-btn icon @click="addToCollection" v-if="isAdmin && kind === 'series'">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-playlist-plus</v-icon>
</template>
<span>{{ $t('menu.add_to_collection') }}</span>
</v-tooltip>
</v-btn>
<v-btn icon @click="addToReadList" v-if="isAdmin && kind === 'books'">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-book-plus-multiple</v-icon>
@ -54,7 +78,7 @@ import Vue from 'vue'
import ToolbarSticky from './ToolbarSticky.vue'
export default Vue.extend({
name: 'BooksMultiSelectBar',
name: 'MultiSelectBar',
components: { ToolbarSticky },
data: () => {
return {}
@ -64,6 +88,15 @@ export default Vue.extend({
type: Array,
required: true,
},
// books or series
kind: {
type: String,
required: true,
},
showSelectAll: {
type: Boolean,
default: false,
},
},
computed: {
isAdmin (): boolean {
@ -74,12 +107,18 @@ export default Vue.extend({
unselectAll () {
this.$emit('unselect-all')
},
selectAll () {
this.$emit('select-all')
},
markRead () {
this.$emit('mark-read')
},
markUnread () {
this.$emit('mark-unread')
},
addToCollection () {
this.$emit('add-to-collection')
},
addToReadList () {
this.$emit('add-to-readlist')
},

86
komga-webui/src/components/bars/SeriesMultiSelectBar.vue
View file

@ -1,86 +0,0 @@
<template>
<v-scroll-y-transition hide-on-leave>
<toolbar-sticky v-if="value.length > 0" :elevation="5" color="base">
<v-btn icon @click="unselectAll">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-toolbar-title>
<span>{{ $tc('common.n_selected', value.length) }}</span>
</v-toolbar-title>
<v-spacer/>
<v-btn icon @click="markRead">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-bookmark-check</v-icon>
</template>
<span>{{ $t('menu.mark_read') }}</span>
</v-tooltip>
</v-btn>
<v-btn icon @click="markUnread">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-bookmark-remove</v-icon>
</template>
<span>{{ $t('menu.mark_unread') }}</span>
</v-tooltip>
</v-btn>
<v-btn icon @click="addToCollection" v-if="isAdmin">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-playlist-plus</v-icon>
</template>
<span>{{ $t('menu.add_to_collection') }}</span>
</v-tooltip>
</v-btn>
<v-btn icon @click="edit" v-if="isAdmin">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</toolbar-sticky>
</v-scroll-y-transition>
</template>
<script lang="ts">
import Vue from 'vue'
import ToolbarSticky from './ToolbarSticky.vue'
export default Vue.extend({
name: 'SeriesMultiSelectBar',
components: { ToolbarSticky },
data: () => {
return {}
},
props: {
value: {
type: Array,
required: true,
},
},
computed: {
isAdmin (): boolean {
return this.$store.getters.meAdmin
},
},
methods: {
unselectAll () {
this.$emit('unselect-all')
},
markRead () {
this.$emit('mark-read')
},
markUnread () {
this.$emit('mark-unread')
},
addToCollection () {
this.$emit('add-to-collection')
},
edit () {
this.$emit('edit')
},
},
})
</script>

4
komga-webui/src/locales/en.json
View file

@ -546,7 +546,9 @@
"mark_read": "Mark as read",
"mark_unread": "Mark as unread",
"refresh_metadata": "Refresh metadata",
"scan_library_files": "Scan library files"
"scan_library_files": "Scan library files",
"deselect_all": "Deselect all",
"select_all": "Select all"
},
"navigation": {
"home": "Home",

9
komga-webui/src/views/BrowseCollection.vue
View file

@ -42,9 +42,12 @@
</toolbar-sticky>
<series-multi-select-bar
<multi-select-bar
v-model="selectedSeries"
kind="series"
show-select-all
@unselect-all="selectedSeries = []"
@select-all="selectedSeries = $_.cloneDeep(series)"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-collection="addToCollection"
@ -116,7 +119,7 @@ import ItemBrowser from '@/components/ItemBrowser.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import {COLLECTION_CHANGED, COLLECTION_DELETED, SERIES_CHANGED, SERIES_DELETED} from '@/types/events'
import Vue from 'vue'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import {LIBRARIES_ALL} from '@/types/library'
import {ReadStatus, replaceCompositeReadStatus} from '@/types/enum-books'
import {SeriesStatus, SeriesStatusKeyValue} from '@/types/enum-series'
@ -137,7 +140,7 @@ export default Vue.extend({
ToolbarSticky,
ItemBrowser,
CollectionActionsMenu,
SeriesMultiSelectBar,
MultiSelectBar,
FilterDrawer,
FilterPanels,
FilterList,

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

@ -25,9 +25,12 @@
</v-btn>
</toolbar-sticky>
<series-multi-select-bar
<multi-select-bar
v-model="selectedSeries"
kind="series"
show-select-all
@unselect-all="selectedSeries = []"
@select-all="selectedSeries = $_.cloneDeep(series)"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-collection="addToCollection"
@ -102,7 +105,7 @@
</template>
<script lang="ts">
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import EmptyState from '@/components/EmptyState.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
@ -135,7 +138,7 @@ export default Vue.extend({
ItemBrowser,
PageSizeSelect,
LibraryNavigation,
SeriesMultiSelectBar,
MultiSelectBar,
FilterDrawer,
FilterPanels,
FilterList,

9
komga-webui/src/views/BrowseReadList.vue
View file

@ -35,9 +35,12 @@
</toolbar-sticky>
<books-multi-select-bar
<multi-select-bar
v-model="selectedBooks"
kind="books"
show-select-all
@unselect-all="selectedBooks = []"
@select-all="selectedBooks = $_.cloneDeep(books)"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-readlist="addToReadList"
@ -86,7 +89,7 @@ import {
} from '@/types/events'
import Vue from 'vue'
import ReadListActionsMenu from '@/components/menus/ReadListActionsMenu.vue'
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import {BookDto, ReadProgressUpdateDto} from '@/types/komga-books'
import {ContextOrigin} from '@/types/context'
import {BookSseDto, ReadListSseDto, ReadProgressSseDto} from "@/types/komga-sse";
@ -97,7 +100,7 @@ export default Vue.extend({
ToolbarSticky,
ItemBrowser,
ReadListActionsMenu,
BooksMultiSelectBar,
MultiSelectBar,
},
data: () => {
return {

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

@ -38,9 +38,12 @@
</v-btn>
</toolbar-sticky>
<books-multi-select-bar
<multi-select-bar
v-model="selectedBooks"
kind="books"
show-select-all
@unselect-all="selectedBooks = []"
@select-all="selectedBooks = books"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-readlist="addToReadList"
@ -370,7 +373,7 @@
</template>
<script lang="ts">
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import CollectionsExpansionPanels from '@/components/CollectionsExpansionPanels.vue'
import EmptyState from '@/components/EmptyState.vue'
@ -423,7 +426,7 @@ export default Vue.extend({
SeriesActionsMenu,
ItemCard,
EmptyState,
BooksMultiSelectBar,
MultiSelectBar,
CollectionsExpansionPanels,
FilterDrawer,
FilterList,

12
komga-webui/src/views/Dashboard.vue
View file

@ -20,8 +20,9 @@
<library-navigation v-if="individualLibrary && $vuetify.breakpoint.name === 'xs'" :libraryId="libraryId"
bottom-navigation/>
<series-multi-select-bar
<multi-select-bar
v-model="selectedSeries"
kind="series"
@unselect-all="selectedSeries = []"
@mark-read="markSelectedSeriesRead"
@mark-unread="markSelectedSeriesUnread"
@ -29,8 +30,9 @@
@edit="editMultipleSeries"
/>
<books-multi-select-bar
<multi-select-bar
v-model="selectedBooks"
kind="books"
@unselect-all="selectedBooks = []"
@mark-read="markSelectedBooksRead"
@mark-unread="markSelectedBooksUnread"
@ -125,8 +127,7 @@
</template>
<script lang="ts">
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import EmptyState from '@/components/EmptyState.vue'
import HorizontalScroller from '@/components/HorizontalScroller.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
@ -159,8 +160,7 @@ export default Vue.extend({
ToolbarSticky,
LibraryNavigation,
ItemBrowser,
BooksMultiSelectBar,
SeriesMultiSelectBar,
MultiSelectBar,
LibraryActionsMenu,
},
data: () => {

12
komga-webui/src/views/Search.vue
View file

@ -6,8 +6,9 @@
</v-toolbar-title>
</toolbar-sticky>
<series-multi-select-bar
<multi-select-bar
v-model="selectedSeries"
kind="series"
@unselect-all="selectedSeries = []"
@mark-read="markSelectedSeriesRead"
@mark-unread="markSelectedSeriesUnread"
@ -15,8 +16,9 @@
@edit="editMultipleSeries"
/>
<books-multi-select-bar
<multi-select-bar
v-model="selectedBooks"
kind="books"
@unselect-all="selectedBooks = []"
@mark-read="markSelectedBooksRead"
@mark-unread="markSelectedBooksUnread"
@ -101,8 +103,7 @@
</template>
<script lang="ts">
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import EmptyState from '@/components/EmptyState.vue'
import HorizontalScroller from '@/components/HorizontalScroller.vue'
@ -132,8 +133,7 @@ export default Vue.extend({
ToolbarSticky,
HorizontalScroller,
ItemBrowser,
BooksMultiSelectBar,
SeriesMultiSelectBar,
MultiSelectBar,
},
data: () => {
return {