From 8bf805e1e414a0f9464d121b0de53515f11697f1 Mon Sep 17 00:00:00 2001
From: Ben Kuskopf <kussie@gmail.com>
Date: Thu, 25 Feb 2021 13:14:22 +1000
Subject: [PATCH] feat(webui): make publisher, status, language, ageRating
 chips clickable

---
 komga-webui/src/views/BrowseLibraries.vue |  3 +-
 komga-webui/src/views/BrowseSeries.vue    | 47 ++++++++++++++++++-----
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue
index 6f5e7acd5..dc90ce70f 100644
--- a/komga-webui/src/views/BrowseLibraries.vue
+++ b/komga-webui/src/views/BrowseLibraries.vue
@@ -306,11 +306,12 @@ export default Vue.extend({
       this.filterOptions.releaseDate = toNameValue(await this.$komgaReferential.getSeriesReleaseDates(requestLibraryId))
 
       // filter query params with available filter values
-      if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating) {
+      if (route.query.status || route.query.readStatus || route.query.genre || route.query.tag || route.query.language || route.query.ageRating || route.query.publisher) {
         this.filters.status = parseQueryFilter(route.query.status, Object.keys(SeriesStatus))
         this.filters.readStatus = parseQueryFilter(route.query.readStatus, Object.keys(ReadStatus))
         this.filters.genre = parseQueryFilter(route.query.genre, this.filterOptions.genre.map(x => x.value))
         this.filters.tag = parseQueryFilter(route.query.tag, this.filterOptions.tag.map(x => x.value))
+        this.filters.publisher = parseQueryFilter(route.query.publisher, this.filterOptions.publisher.map(x => x.value))
         this.filters.language = parseQueryFilter(route.query.language, this.filterOptions.language.map(x => x.value))
         this.filters.ageRating = parseQueryFilter(route.query.ageRating, this.filterOptions.ageRating.map(x => x.value))
         this.filters.releaseDate = parseQueryFilter(route.query.releaseDate, this.filterOptions.releaseDate.map(x => x.value))
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 6fc4ce530..e5317a4e3 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -89,16 +89,36 @@
 
           <v-row class="text-body-2">
             <v-col>
-              <v-chip label small
-                      :color="statusChip.color"
-                      :text-color="statusChip.text"
-              >{{ $t(`enums.series_status.${series.metadata.status}`) }}
+              <v-chip
+                  label
+                  small
+                  link
+                  :color="statusChip.color"
+                  :text-color="statusChip.text"
+                  :to="{name:'browse-libraries', params: {libraryId: series.libraryId ? series.libraryId : 0 }, query: {status: series.metadata.status}}"
+              >
+                {{ $t(`enums.series_status.${series.metadata.status}`) }}
               </v-chip>
-              <v-chip label small v-if="series.metadata.ageRating" class="mx-1">{{
-                  series.metadata.ageRating
-                }}+
+              <v-chip
+                  label
+                  small
+                  link
+                  v-if="series.metadata.ageRating"
+                  :to="{name:'browse-libraries', params: {libraryId: series.libraryId ? series.libraryId : 0 }, query: {ageRating: series.metadata.ageRating}}"
+                  class="mx-1"
+              >
+                {{series.metadata.ageRating}}+
+              </v-chip>
+              <v-chip
+                  label
+                  small
+                  link
+                  :to="{name:'browse-libraries', params: {libraryId: series.libraryId ? series.libraryId : 0 }, query: {language: series.metadata.language}}"
+                  v-if="series.metadata.language"
+                  class="mx-1"
+              >
+                {{ languageDisplay }}
               </v-chip>
-              <v-chip label small v-if="series.metadata.language" class="mx-1">{{ languageDisplay }}</v-chip>
               <v-chip label small v-if="series.metadata.readingDirection" class="mx-1">{{ $t(`enums.reading_direction.${series.metadata.readingDirection}`) }}</v-chip>
             </v-col>
           </v-row>
@@ -138,7 +158,16 @@
           <v-row v-if="series.metadata.publisher">
             <v-col cols="6" sm="4" md="3" class="text-body-2 py-1 text-uppercase">{{ $t('common.publisher') }}</v-col>
             <v-col class="text-body-2 text-capitalize py-1">
-              {{ series.metadata.publisher }}
+              <v-chip
+                      :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
+                      :title="series.metadata.publisher"
+                      :to="{name:'browse-libraries', params: {libraryId: series.libraryId ? series.libraryId : 0 }, query: {publisher: series.metadata.publisher}}"
+                      label
+                      small
+                      outlined
+                      link
+              >{{ series.metadata.publisher }}
+              </v-chip>
             </v-col>
           </v-row>