From d00336f340e02604076157613f971f7684e70f29 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas.haaf@fumix.de>
Date: Tue, 9 May 2023 12:05:47 +0200
Subject: [PATCH] add searchability to tags displayed

---
 client/src/components/DisplayTags.vue | 11 ++++++++++-
 client/src/views/PostsView.vue        |  1 -
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DisplayTags.vue b/client/src/components/DisplayTags.vue
index 78b9533..2bbd4c3 100644
--- a/client/src/components/DisplayTags.vue
+++ b/client/src/components/DisplayTags.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="badge-container">
-    <div v-for="tag in tags" :key="tag.id" class="badge me-1">
+    <div v-for="tag in tags" :key="tag.id" class="badge me-1" @click="searchWord(tag.name)">
       {{ tag.name }}
     </div>
   </div>
@@ -14,6 +14,7 @@
   .badge {
     background-color: $badge-background-color;
     color: $badge-text-color;
+    cursor: pointer;
   }
 }
 </style>
@@ -21,6 +22,14 @@
 <script setup lang="ts">
 import type { Tag } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const props = defineProps({ tags: { type: Array as PropType<Tag[]>, required: true } });
+
+const searchWord = (word: string): void => {
+  if (word) {
+    router.push(`/posts/?search=${word}&operator=and`);
+  }
+};
 </script>
diff --git a/client/src/views/PostsView.vue b/client/src/views/PostsView.vue
index 76613f1..f24961e 100644
--- a/client/src/views/PostsView.vue
+++ b/client/src/views/PostsView.vue
@@ -162,7 +162,6 @@ const goTo = (path: string) => {
 };
 
 const searchWord = (event: any) => {
-  console.log("SEARCH -------->", event);
   goTo(`/posts/?search=${event[0]}&operator=and`);
 };