From f0615c29714b812951e517c6f4bb70500556f660 Mon Sep 17 00:00:00 2001
From: Selfhost Alt <selfhost.alt@gmail.com>
Date: Mon, 18 Apr 2022 21:06:58 -0700
Subject: [PATCH] Include the type of filter being applied in the UI

---
 client/components/app/LazyBookshelf.vue     |  2 +-
 client/components/controls/FilterSelect.vue | 26 +++++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 868a5592..7f65572b 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -91,7 +91,7 @@ export default {
     emptyMessage() {
       if (this.page === 'series') return `You have no series`
       if (this.page === 'collections') return "You haven't made any collections yet"
-      if (this.hasFilter) return `No Results for filter "${this.filterValue}"`
+      if (this.hasFilter) return `No Results for filter "${this.filterName}: ${this.filterValue}"`
       return 'No results'
     },
     entityName() {
diff --git a/client/components/controls/FilterSelect.vue b/client/components/controls/FilterSelect.vue
index dd4a6734..32cee841 100644
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@@ -161,23 +161,29 @@ export default {
     selectedText() {
       if (!this.selected) return ''
       var parts = this.selected.split('.')
+      var filterName = this.selectItems.find((i) => i.value === parts[0]);
+      var filterValue = null;
       if (parts.length > 1) {
         var decoded = this.$decode(parts[1])
         if (decoded.startsWith('aut_')) {
           var author = this.authors.find((au) => au.id == decoded)
-          if (author) return author.name
-          return ''
-        }
-        if (decoded.startsWith('ser_')) {
+          if (author) filterValue = author.name;
+        } else if (decoded.startsWith('ser_')) {
           var series = this.series.find((se) => se.id == decoded)
-          if (series) return series.name
-          return ''
+          if (series) filterValue = series.name
+        } else {
+          filterValue = decoded;
         }
-        return decoded
       }
-      var _sel = this.selectItems.find((i) => i.value === this.selected)
-      if (!_sel) return ''
-      return _sel.text
+      if (filterName && filterValue) {
+        return `${filterName.text}: ${filterValue}`;
+      } else if (filterName) {
+        return filterName.text;
+      } else if (filterValue) {
+        return filterValue;
+      } else {
+        return ''
+      }
     },
     genres() {
       return this.filterData.genres || []