feat(webui): display and filter series aggregated book tags

closes #513

komga-webui/src/plugins/vuetify.ts

@@ -33,6 +33,7 @@ export default new Vuetify({
         secondary: '#fec000',
         accent: '#ff0335',
         'contrast-1': colors.grey.lighten4,
+        'contrast-light-2': colors.grey.darken2,
       },
       dark: {
         base: colors.shades.black,
@@ -40,6 +41,7 @@ export default new Vuetify({
         secondary: '#fec000',
         accent: '#ff0335',
         'contrast-1': colors.grey.darken4,
+        'contrast-light-2': colors.grey.lighten2,
       },
     },
   },

komga-webui/src/services/komga-referential.service.ts

@@ -83,18 +83,18 @@ export default class KomgaReferentialService {
     }
   }
 
-  async getSeriesTags(libraryId?: string, collectionId?: string): Promise<string[]> {
+  async getSeriesAndBookTags(libraryId?: string, collectionId?: string): Promise<string[]> {
     try {
       const params = {} as any
       if (libraryId) params.library_id = libraryId
       if (collectionId) params.collection_id = collectionId
 
-      return (await this.http.get('/api/v1/tags/series', {
+      return (await this.http.get('/api/v1/tags', {
         params: params,
         paramsSerializer: params => qs.stringify(params, {indices: false}),
       })).data
     } catch (e) {
-      let msg = 'An error occurred while trying to retrieve series tags'
+      let msg = 'An error occurred while trying to retrieve series and book tags'
       if (e.response.data.message) {
         msg += `: ${e.response.data.message}`
       }

komga-webui/src/types/komga-series.ts

@@ -46,6 +46,7 @@ export interface SeriesBooksMetadataDto {
   created: string,
   lastModified: string
   authors: AuthorDto[],
+  tags: string[],
   releaseDate: string,
   summary: string,
   summaryNumber: string,

komga-webui/src/views/BrowseCollection.vue

@@ -288,7 +288,7 @@ export default Vue.extend({
 
       const [genres, tags, publishers, languages, ageRatings, releaseDates] = await Promise.all([
         this.$komgaReferential.getGenres(undefined, collectionId),
-        this.$komgaReferential.getSeriesTags(undefined, collectionId),
+        this.$komgaReferential.getSeriesAndBookTags(undefined, collectionId),
         this.$komgaReferential.getPublishers(undefined, collectionId),
         this.$komgaReferential.getLanguages(undefined, collectionId),
         this.$komgaReferential.getAgeRatings(undefined, collectionId),

komga-webui/src/views/BrowseLibraries.vue

@@ -361,7 +361,7 @@ export default Vue.extend({
       // load dynamic filters
       const [genres, tags, publishers, languages, ageRatings, releaseDates] = await Promise.all([
         this.$komgaReferential.getGenres(requestLibraryId),
-        this.$komgaReferential.getSeriesTags(requestLibraryId),
+        this.$komgaReferential.getSeriesAndBookTags(requestLibraryId),
         this.$komgaReferential.getPublishers(requestLibraryId),
         this.$komgaReferential.getLanguages(requestLibraryId),
         this.$komgaReferential.getAgeRatings(requestLibraryId),

komga-webui/src/views/BrowseSeries.vue

@@ -279,7 +279,8 @@
       </v-row>
 
       <!--  Tags    -->
-      <v-row v-if="series.metadata.tags.length > 0" class="align-center text-caption">
+      <v-row v-if="series.metadata.tags.length > 0 || series.booksMetadata.tags.length > 0"
+             class="align-center text-caption">
         <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t('common.tags') }}</v-col>
         <v-col cols="8" sm="9" md="10" xl="11" class="py-1 text-capitalize">
           <vue-horizontal>
@@ -294,8 +295,8 @@
                 <v-icon>mdi-chevron-right</v-icon>
               </v-btn>
             </template>
-            <v-chip v-for="(t, i) in series.metadata.tags"
+            <v-chip v-for="(t, i) in $_.sortBy(series.metadata.tags)"
-                    :key="i"
+                    :key="`series_${i}`"
                     :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
                     :title="t"
                     :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {tag: [t]}}"
@@ -305,6 +306,18 @@
                     link
             >{{ t }}
             </v-chip>
+            <v-chip v-for="(t, i) in $_(series.booksMetadata.tags).difference(series.metadata.tags).sortBy()"
+                    :key="`book_${i}`"
+                    :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
+                    :title="t"
+                    :to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {tag: [t]}}"
+                    label
+                    small
+                    outlined
+                    link
+                    color="contrast-light-2"
+            >{{ t }}
+            </v-chip>
           </vue-horizontal>
         </v-col>
       </v-row>