From d777474b6723ebcc4320068b848cbcbc1ae06064 Mon Sep 17 00:00:00 2001
From: "sagargurung1001@gmail.com" <sagargurung1001@gmail.com>
Date: Tue, 4 Jun 2024 16:43:08 +0545
Subject: [PATCH] Enhance search by filters

Signed-off-by: sagargurung1001@gmail.com <sagargurung1001@gmail.com>
---
 src/helpers/constants.js |  1 +
 src/views/HomeView.vue   | 32 +++++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/helpers/constants.js b/src/helpers/constants.js
index 8d3871f..a69a0d4 100644
--- a/src/helpers/constants.js
+++ b/src/helpers/constants.js
@@ -22,6 +22,7 @@ export const SORT_OPTIONS = [
 ]
 
 export const FILTER_OPTIONS = [
+  { key: "title", label: "Title" },
   { key: "author", label: "Author" },
   { key: "tag", label: "Tags" }
 ]
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2413eeb..924f7de 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,7 +14,7 @@
         id="search"
         class="home-view--search--input"
         v-model="search"
-        placeholder="Search..."
+        :placeholder="getSearchPlaceHolder"
         @keyup.enter="makeSearch"
       >
       <div class="home-view--search--actions">
@@ -107,7 +107,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, onMounted } from "vue"
+import { ref, watch, onMounted, computed } from "vue"
 import { useRouter } from "vue-router"
 import BlogPeek from "../components/BlogPeek"
 import DropMenu from "../components/DropMenu"
@@ -126,12 +126,20 @@ const loading = ref(false)
 const filterBy = ref(null)
 const sortBy = ref(null)
 const homeViewMode = ref(null)
+const searchPlaceHolder = ref("")
 
 onMounted(async () => {
   init()
   tracker.trackPageView()
 })
 
+const getSearchPlaceHolder = computed(() => {
+  if (currentRoute.value.params.filterBy) {
+    return "search by " + searchPlaceHolder.value
+  }
+  return "search"
+})
+
 const init = () => {
   loading.value = true
   filterBy.value = currentRoute.value.params.filterBy
@@ -171,14 +179,22 @@ const makeSearch = () => {
   searchResultBlog.value = []
   if (filterBy.value) {
     peekData.value.forEach(item => {
-      if (filterBy.value === "tag") {
+      switch (filterBy.value) {
+      case "tag" :
         if (item.tags && item.tags.join(" ").toLowerCase().includes(searchVal)) {
           searchResultBlog.value.push(item)
         }
-      } else {
-        if (item.authorName.toLowerCase().includes(searchVal)) {
+        break
+      case "author" :
+        if (item.tags && item.tags.join(" ").toLowerCase().includes(searchVal)) {
           searchResultBlog.value.push(item)
         }
+        break
+      case "title":
+        if (item.title.toLowerCase().includes(searchVal)) {
+          searchResultBlog.value.push(item)
+        }
+        break
       }
     })
   } else if (sortBy.value) {
@@ -188,8 +204,9 @@ const makeSearch = () => {
       }
     })
   } else {
+    // by default user can search with any of the options (author, title, tags)
     peekData.value.forEach(item => {
-      if (item.title.toLowerCase().includes(searchVal)) {
+      if ((item.tags && item.tags.join(" ").toLowerCase().includes(searchVal)) || (item.authorName.toLowerCase().includes(searchVal)) || (item.title.toLowerCase().includes(searchVal))) {
         searchResultBlog.value.push(item)
       }
     })
@@ -206,7 +223,7 @@ const toHome = () => {
     .then(() => {
       peekData.value = getPeekData()
       sortPeekData(sortBy.value)
-      search.value = ""
+      clearSearch()
     })
 }
 
@@ -231,6 +248,7 @@ const setFilterKey = (key) => {
   if (currentRoute.value.params.filterBy === key) {
     toHome()
   } else {
+    searchPlaceHolder.value = key
     push({
       name: "Filter",
       params: {