feat(webui): display library name in book/series screen, empty all trash

adds a button in 'Server Settings > Server' to empty trash for all libraries
display the library name next to Series name on Book and Series details screen

Co-authored-by: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>

komga-webui/src/locales/en.json

@@ -172,6 +172,7 @@
     "title": "{name} collection"
   },
   "common": {
+    "library": "Library",
     "all_libraries": "All Libraries",
     "books": "Books",
     "books_n": "No book | 1 book | {count} books",
@@ -628,6 +629,7 @@
   },
   "server": {
     "server_management": {
+      "button_empty_trash": "Empty trash for all libraries",
       "button_shutdown": "Shut down",
       "section_title": "Server Management"
     },

komga-webui/src/views/BrowseBook.vue

@@ -101,8 +101,18 @@
           <v-container>
             <v-row>
               <v-col class="py-1">
-                <router-link :to="{name:'browse-series', params: {seriesId: book.seriesId}}" class="link-underline">
-                  <span class="text-h5" v-if="!$_.isEmpty(series)">{{ series.metadata.title }}</span>
+                <router-link
+                  v-if="!$_.isEmpty(series)"
+                  :to="{name:'browse-series', params: {seriesId: book.seriesId}}"
+                  class="link-underline text-h5"
+                >{{ series.metadata.title }}
+                </router-link>
+                <router-link
+                  class="caption link-underline"
+                  :class="$vuetify.breakpoint.smAndUp ? 'mx-1' : ''"
+                  :style="$vuetify.breakpoint.xsOnly ? 'display: block' : ''"
+                  :to="{name:'browse-libraries', params: {libraryId: book.libraryId }}"
+                >{{ $t('searchbox.in_library', {library: getLibraryName(book)}) }}
                 </router-link>
               </v-col>
             </v-row>
@@ -127,13 +137,17 @@
                 }}
               </v-col>
 
-              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="book.media.status === MediaStatus.OUTDATED">
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')"
+                     cols="auto"
+                     v-if="book.media.status === MediaStatus.OUTDATED">
                 <v-tooltip bottom :disabled="!isAdmin">
                   <template v-slot:activator="{ on }">
                     <v-chip label small color="warning" v-on="on">
                       {{ $t('common.outdated') }}
                     </v-chip>
-                  </template>{{ $t('browse_book.outdated_tooltip') }}</v-tooltip>
+                  </template>
+                  {{ $t('browse_book.outdated_tooltip') }}
+                </v-tooltip>
               </v-col>
 
               <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="unavailable">
@@ -480,13 +494,16 @@ export default Vue.extend({
     },
   },
   methods: {
+    getLibraryName(item: BookDto): string {
+      return this.$store.getters.getLibraryById(item.libraryId).name
+    },
     libraryDeleted(event: LibrarySseDto) {
       if (event.libraryId === this.book.libraryId) {
         this.$router.push({name: 'home'})
       }
     },
     readListChanged(event: ReadListSseDto) {
-      if(event.bookIds.includes(this.bookId) || this.readLists.map(x => x.id).includes(event.readListId)){
+      if (event.bookIds.includes(this.bookId) || this.readLists.map(x => x.id).includes(event.readListId)) {
         this.$komgaBooks.getReadLists(this.bookId)
           .then(v => this.readLists = v)
       }
@@ -495,11 +512,11 @@ export default Vue.extend({
       if (event.bookId === this.bookId) this.loadBook(this.bookId)
     },
     bookDeleted(event: BookSseDto) {
-      if (event.bookId === this.bookId){
-        this.$router.push({name:'browse-series', params: {seriesId: this.series.id }})
+      if (event.bookId === this.bookId) {
+        this.$router.push({name: 'browse-series', params: {seriesId: this.series.id}})
       }
     },
-    readProgressChanged(event: ReadProgressSseDto){
+    readProgressChanged(event: ReadProgressSseDto) {
       if (event.bookId === this.bookId) this.loadBook(this.bookId)
     },
     async loadBook(bookId: string) {

komga-webui/src/views/BrowseSeries.vue

@@ -17,7 +17,6 @@
       <series-actions-menu v-if="series"
                            :series="series"
       />
-
       <v-toolbar-title>
         <span v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</span>
         <v-chip label class="mx-4" v-if="totalElements">
@@ -96,7 +95,14 @@
           <v-container>
             <v-row>
               <v-col class="py-1">
-                <div class="text-h5" v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</div>
+                <span class="text-h5" v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</span>
+                <router-link
+                  class="caption link-underline"
+                  :class="$vuetify.breakpoint.smAndUp ? 'mx-2' : ''"
+                  :style="$vuetify.breakpoint.xsOnly ? 'display: block' : ''"
+                  :to="{name:'browse-libraries', params: {libraryId: series.libraryId }}"
+                >{{ $t('searchbox.in_library', {library: getLibraryName(series)}) }}
+                </router-link>
               </v-col>
             </v-row>
 
@@ -648,6 +654,9 @@ export default Vue.extend({
     next()
   },
   methods: {
+    getLibraryName(item: SeriesDto): string {
+      return this.$store.getters.getLibraryById(item.libraryId).name
+    },
     resetSortAndFilters() {
       this.drawer = false
       for (const prop in this.filters) {

komga-webui/src/views/SettingsServer.vue

@@ -5,12 +5,26 @@
     </v-row>
     <v-row>
       <v-col>
+        <v-btn @click="confirmEmptyTrash = true"
+               style="margin-right: 15px"
+               color="error"
+        >{{ $t('server.server_management.button_empty_trash') }}
+        </v-btn>
         <v-btn @click="modalStopServer = true"
                color="error"
-        >{{ $t('server.server_management.button_shutdown') }}</v-btn>
+        >{{ $t('server.server_management.button_shutdown') }}
+        </v-btn>
       </v-col>
     </v-row>
 
+    <confirmation-dialog
+      v-model="confirmEmptyTrash"
+      :title="$t('dialog.empty_trash.title')"
+      :body="$t('dialog.empty_trash.body')"
+      :button-confirm="$t('dialog.empty_trash.button_confirm')"
+      @confirm="emptyTrash"
+    />
+
     <confirmation-dialog
       v-model="modalStopServer"
       :title="$t('dialog.server_stop.dialog_title')"
@@ -27,14 +41,26 @@
 import Vue from 'vue'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 import {ERROR} from '@/types/events'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'SettingsServer',
   components: {ConfirmationDialog},
   data: () => ({
     modalStopServer: false,
+    confirmEmptyTrash: false,
   }),
+  computed: {
+    libraries(): LibraryDto[] {
+      return this.$store.state.komgaLibraries.libraries
+    },
+  },
   methods: {
+    emptyTrash() {
+      this.libraries.forEach(library => {
+        this.$komgaLibraries.emptyTrash(library)
+      })
+    },
     async stopServer() {
       try {
         await this.$actuator.shutdown()