feat(webui): remove from collection/readlist directly from the book/s…

…eries page Closes: #1518
gotson · Jan 20, 2025 · 901ea3c · 901ea3c
1 parent 378f99b
commit 901ea3c
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 4 deletions.
diff --git a/komga-webui/src/components/CollectionsExpansionPanels.vue b/komga-webui/src/components/CollectionsExpansionPanels.vue
@@ -10,6 +10,7 @@
           @scroll-changed="(percent) => scrollChanged(collectionsLoaders[index], percent)"
         >
           <template v-slot:prepend>
+            <slot name="prepend" v-bind:collection="c"/>
             <router-link class="text-overline"
                          :to="{name: 'browse-collection', params: {collectionId: c.id}}"
             >{{ $t('collections_expansion_panel.manage_collection') }}

diff --git a/komga-webui/src/components/ReadListsExpansionPanels.vue b/komga-webui/src/components/ReadListsExpansionPanels.vue
@@ -10,6 +10,7 @@
           @scroll-changed="(percent) => scrollChanged(readListsLoaders[index], percent)"
         >
           <template v-slot:prepend>
+            <slot name="prepend" v-bind:readlist="r"/>
             <router-link class="text-overline"
                          :to="{name: 'browse-readlist', params: {readListId: r.id}}"
             >{{ $t('readlists_expansion_panel.manage_readlist') }}

diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
@@ -177,6 +177,8 @@
     "outdated_tooltip": "The file for this book has changed, this book must be re-analyzed",
     "read_book": "Read book",
     "read_incognito": "Read incognito",
+    "remove_from_collection": "Remove book from collection",
+    "remove_from_readlist": "Remove book from read list",
     "size": "SIZE"
   },
   "browse_collection": {
@@ -191,6 +193,7 @@
   },
   "browse_series": {
     "earliest_year_from_release_dates": "This is the earliest year from the release dates from all books in the series",
+    "remove_from_collection": "Remove series from collection",
     "series_no_summary": "This series has no summary, so we picked one for you!",
     "summary_from_book": "Summary from book {number}:"
   },

diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
@@ -344,7 +344,18 @@
 
       <v-row>
         <v-col>
-          <read-lists-expansion-panels :read-lists="readLists"/>
+          <read-lists-expansion-panels :read-lists="readLists">
+            <template v-slot:prepend="props">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ on }">
+                  <v-btn icon class="me-2" v-on="on" @click="removeFromReadList(props.readlist.id)">
+                    <v-icon>mdi-book-remove</v-icon>
+                  </v-btn>
+                </template>
+                <span>{{ $t('browse_book.remove_from_readlist') }}</span>
+              </v-tooltip>
+            </template>
+          </read-lists-expansion-panels>
         </v-col>
       </v-row>
 
@@ -655,6 +666,14 @@ export default Vue.extend({
     editBook() {
       this.$store.dispatch('dialogUpdateBooks', this.book)
     },
+    removeFromReadList(readListId: string) {
+      const rl = this.readLists.find(x => x.id == readListId)
+      const modified = Object.assign({}, {bookIds: rl?.bookIds.filter(x => x != this.bookId)})
+      if (modified!.bookIds!.length == 0)
+        this.$komgaReadLists.deleteReadList(rl!.id)
+      else
+        this.$komgaReadLists.patchReadList(rl!.id, modified)
+    },
   },
 })
 </script>

diff --git a/komga-webui/src/views/BrowseOneshot.vue b/komga-webui/src/views/BrowseOneshot.vue
@@ -416,10 +416,32 @@
 
       <v-row>
         <v-col cols="12" class="pb-1">
-          <collections-expansion-panels :collections="collections"/>
+          <collections-expansion-panels :collections="collections">
+            <template v-slot:prepend="props">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ on }">
+                  <v-btn icon class="me-2" v-on="on" @click="removeFromCollection(props.collection.id)">
+                    <v-icon>mdi-playlist-remove</v-icon>
+                  </v-btn>
+                </template>
+                <span>{{ $t('browse_book.remove_from_collection') }}</span>
+              </v-tooltip>
+            </template>
+          </collections-expansion-panels>
         </v-col>
         <v-col cols="12" class="pt-1">
-          <read-lists-expansion-panels :read-lists="readLists"/>
+          <read-lists-expansion-panels :read-lists="readLists">
+            <template v-slot:prepend="props">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ on }">
+                  <v-btn icon class="me-2" v-on="on" @click="removeFromReadList(props.readlist.id)">
+                    <v-icon>mdi-book-remove</v-icon>
+                  </v-btn>
+                </template>
+                <span>{{ $t('browse_book.remove_from_readlist') }}</span>
+              </v-tooltip>
+            </template>
+          </read-lists-expansion-panels>
         </v-col>
       </v-row>
 
@@ -526,6 +548,7 @@ import {Oneshot, SeriesDto} from '@/types/komga-series'
 import CollectionsExpansionPanels from '@/components/CollectionsExpansionPanels.vue'
 import OneshotActionsMenu from '@/components/menus/OneshotActionsMenu.vue'
 import {
+  BookSearch,
   SearchConditionAgeRating,
   SearchConditionGenre,
   SearchConditionLanguage,
@@ -801,6 +824,22 @@ export default Vue.extend({
     editBook() {
       this.$store.dispatch('dialogUpdateOneshots', {series: this.series, book: this.book} as Oneshot)
     },
+    removeFromReadList(readListId: string) {
+      const rl = this.readLists.find(x => x.id == readListId)
+      const modified = Object.assign({}, {bookIds: rl?.bookIds.filter(x => x != this.book.id)})
+      if (modified!.bookIds!.length == 0)
+        this.$komgaReadLists.deleteReadList(rl!.id)
+      else
+        this.$komgaReadLists.patchReadList(rl!.id, modified)
+    },
+    removeFromCollection(collectionId: string) {
+      const col = this.collections.find(x => x.id == collectionId)
+      const modified = Object.assign({}, {seriesIds: col?.seriesIds.filter(x => x != this.seriesId)})
+      if (modified!.seriesIds!.length == 0)
+        this.$komgaCollections.deleteCollection(col!.id)
+      else
+        this.$komgaCollections.patchCollection(col!.id, modified)
+    },
   },
 })
 </script>

diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
@@ -434,7 +434,18 @@
 
       <v-row>
         <v-col>
-          <collections-expansion-panels :collections="collections"/>
+          <collections-expansion-panels :collections="collections">
+            <template v-slot:prepend="props">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ on }">
+                  <v-btn icon class="me-2" v-on="on" @click="removeFromCollection(props.collection.id)">
+                    <v-icon>mdi-playlist-remove</v-icon>
+                  </v-btn>
+                </template>
+                <span>{{ $t('browse_series.remove_from_collection') }}</span>
+              </v-tooltip>
+            </template>
+          </collections-expansion-panels>
         </v-col>
       </v-row>
 
@@ -1061,6 +1072,14 @@ export default Vue.extend({
     deleteBooks() {
       this.$store.dispatch('dialogDeleteBook', this.selectedBooks)
     },
+    removeFromCollection(collectionId: string) {
+      const col = this.collections.find(x => x.id == collectionId)
+      const modified = Object.assign({}, {seriesIds: col?.seriesIds.filter(x => x != this.seriesId)})
+      if (modified!.seriesIds!.length == 0)
+        this.$komgaCollections.deleteCollection(col!.id)
+      else
+        this.$komgaCollections.patchCollection(col!.id, modified)
+    },
   },
 })
 </script>