From 2b533524fca17dd8e9e0645b730f10110006f398 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 15 Nov 2023 14:30:57 -0600
Subject: [PATCH] Add:Tags in search results #940

---
 components/cards/TagSearchCard.vue | 34 ++++++++++++++++++++++++++++++
 pages/search.vue                   | 16 ++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 components/cards/TagSearchCard.vue

diff --git a/components/cards/TagSearchCard.vue b/components/cards/TagSearchCard.vue
new file mode 100644
index 00000000..c4068a28
--- /dev/null
+++ b/components/cards/TagSearchCard.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-icons text-2xl text-gray-200">local_offer</span>
+    </div>
+    <div class="flex-grow px-2 tagSearchCardContent h-full">
+      <p class="truncate text-sm">{{ tag }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tag: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.tagSearchCardContent {
+  width: calc(100% - 40px);
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/pages/search.vue b/pages/search.vue
index 68f888fe..9683b699 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -54,6 +54,15 @@
           </nuxt-link>
         </div>
       </template>
+
+      <p v-if="tagResults.length" class="font-semibold text-sm mb-1 mt-2">Tags</p>
+      <template v-for="tag in tagResults">
+        <div :key="tag.name" class="w-full h-14 py-1">
+          <nuxt-link :to="`/bookshelf/library?filter=tags.${$encode(tag.name)}`">
+            <cards-tag-search-card :tag="tag.name" />
+          </nuxt-link>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -70,7 +79,8 @@ export default {
       podcastResults: [],
       seriesResults: [],
       authorResults: [],
-      narratorResults: []
+      narratorResults: [],
+      tagResults: []
     }
   },
   computed: {
@@ -81,7 +91,7 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.podcastResults.length + this.narratorResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.podcastResults.length + this.narratorResults.length + this.tagResults.length
     }
   },
   methods: {
@@ -97,6 +107,7 @@ export default {
         this.seriesResults = []
         this.authorResults = []
         this.narratorResults = []
+        this.tagResults = []
         return
       }
       this.isFetching = true
@@ -117,6 +128,7 @@ export default {
       this.seriesResults = results?.series || []
       this.authorResults = results?.authors || []
       this.narratorResults = results?.narrators || []
+      this.tagResults = results?.tags || []
     },
     updateSearch(val) {
       clearTimeout(this.searchTimeout)