From 8545574d387e7242291f2a5eb8f9ce81bbda3d73 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 29 Jun 2021 13:59:20 +0800
Subject: [PATCH] feat(webui): select all option in the selection bar

---
 ...sMultiSelectBar.vue => MultiSelectBar.vue} | 47 +++++++++-
 .../components/bars/SeriesMultiSelectBar.vue  | 86 -------------------
 komga-webui/src/locales/en.json               |  4 +-
 komga-webui/src/views/BrowseCollection.vue    |  9 +-
 komga-webui/src/views/BrowseLibraries.vue     |  9 +-
 komga-webui/src/views/BrowseReadList.vue      |  9 +-
 komga-webui/src/views/BrowseSeries.vue        |  9 +-
 komga-webui/src/views/Dashboard.vue           | 12 +--
 komga-webui/src/views/Search.vue              | 12 +--
 9 files changed, 82 insertions(+), 115 deletions(-)
 rename komga-webui/src/components/bars/{BooksMultiSelectBar.vue => MultiSelectBar.vue} (62%)
 delete mode 100644 komga-webui/src/components/bars/SeriesMultiSelectBar.vue

diff --git a/komga-webui/src/components/bars/BooksMultiSelectBar.vue b/komga-webui/src/components/bars/MultiSelectBar.vue
similarity index 62%
rename from komga-webui/src/components/bars/BooksMultiSelectBar.vue
rename to komga-webui/src/components/bars/MultiSelectBar.vue
index aa3a8011e..89386a0e2 100644
--- a/komga-webui/src/components/bars/BooksMultiSelectBar.vue
+++ b/komga-webui/src/components/bars/MultiSelectBar.vue
@@ -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')
     },
diff --git a/komga-webui/src/components/bars/SeriesMultiSelectBar.vue b/komga-webui/src/components/bars/SeriesMultiSelectBar.vue
deleted file mode 100644
index c1395986e..000000000
--- a/komga-webui/src/components/bars/SeriesMultiSelectBar.vue
+++ /dev/null
@@ -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>
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index 8c9308639..a8105b336 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -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",
diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue
index f859a13f7..195e5ae31 100644
--- a/komga-webui/src/views/BrowseCollection.vue
+++ b/komga-webui/src/views/BrowseCollection.vue
@@ -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,
diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue
index 4af2c498c..e563e45d5 100644
--- a/komga-webui/src/views/BrowseLibraries.vue
+++ b/komga-webui/src/views/BrowseLibraries.vue
@@ -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,
diff --git a/komga-webui/src/views/BrowseReadList.vue b/komga-webui/src/views/BrowseReadList.vue
index 8c78cc117..7b7628440 100644
--- a/komga-webui/src/views/BrowseReadList.vue
+++ b/komga-webui/src/views/BrowseReadList.vue
@@ -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 {
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 05fe31ce1..d7157be5c 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -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,
diff --git a/komga-webui/src/views/Dashboard.vue b/komga-webui/src/views/Dashboard.vue
index 130ff15e1..5f36d8a15 100644
--- a/komga-webui/src/views/Dashboard.vue
+++ b/komga-webui/src/views/Dashboard.vue
@@ -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: () => {
diff --git a/komga-webui/src/views/Search.vue b/komga-webui/src/views/Search.vue
index 3a6d743ff..75427dec7 100644
--- a/komga-webui/src/views/Search.vue
+++ b/komga-webui/src/views/Search.vue
@@ -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 {