feat: search menu by name

src/components/MenuContainer.vue

@@ -2,12 +2,20 @@
   <div class="pb-4">
     <h5 class="mb-3">Menu</h5>
     <p v-if="loading">Loading menu ...</p>
-    <p v-if="error">{{ error.message }}</p>
-    <div v-if="menus" class="row g-4 row-cols-lg-3">
+    <div v-if="menus.length === 0 || filteredMenus.length === 0" class="row g-4 row-cols-lg-3">
+      <p class="w-100 text-center">Menu yang dicari tidak ditemukan.</p>
+    </div>
+    <div v-else-if="isFilter || isSearch" class="row g-4 row-cols-lg-3">
+      <div v-for="menu in filteredMenus" :key="menu.id" class="col">
+        <CardMenu :data="menu" />
+      </div>
+    </div>
+    <div v-else-if="menus" class="row g-4 row-cols-lg-3">
       <div v-for="menu in menus" :key="menu.id" class="col">
         <CardMenu :data="menu" />
       </div>
     </div>
+
   </div>
 </template>
 
@@ -16,7 +24,7 @@ import CardMenu from './CardMenu.vue'
 import { storeToRefs } from 'pinia'
 import { useMenuStore } from '../stores/menus'
 
-const { menus, loading, error } = storeToRefs(useMenuStore())
+const { menus, filteredMenus, isFilter, isSearch, loading } = storeToRefs(useMenuStore())
 const { fetchMenus } = useMenuStore()
 
 fetchMenus()

src/components/NavBar.vue

@@ -6,8 +6,9 @@
       </div>
       <div class="header-right container d-flex justify-content-between align-items-center flex-fill">
         <!-- search box -->
-        <form class="d-flex position-relative" role="search">
-          <input class="form-control" type="search" placeholder="Search menu" aria-label="Search" name="search">
+        <form class="d-flex position-relative" role="search" @submit.prevent="searchMenu(search)">
+          <input class="form-control" type="search" placeholder="Search menu" aria-label="Search" v-model="search"
+            required>
           <Icon icon="mdi:search" class="text-dark-purple icon-search" height="24"></Icon>
         </form>
         <div class="profil d-flex align-items-center gap-4">
@@ -31,15 +32,13 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 import { Icon } from '@iconify/vue';
+import { ref } from 'vue';
+import { useMenuStore } from '../stores/menus';
 
-export default {
-  name: 'NavBar',
-  components: {
-    Icon
-  }
-}
+const search = ref('')
+const { searchMenu } = useMenuStore()
 </script>
 
 <style>

src/stores/menus.js

@@ -3,32 +3,44 @@ import { defineStore } from "pinia"
 export const useMenuStore = defineStore('menus', {
   state: () => ({
     menus: [],
+    filteredMenus: [],
+    isFilter: false,
+    isSearch: false,
     loading: false,
     error: null
   }),
   actions: {
     async fetchMenus() {
-      this.menus = []
-      this.loading = true
-      try {
-        this.menus = await fetch('menu.json').then((response) => response.json())
-      } catch (error) {
-        this.error = error
-      } finally {
-        this.loading = false
+      if (this.menus.length === 0) {
+        this.loading = true
+        try {
+          const response = await fetch('menu.json')
+          this.menus = await response.json()
+        } catch (error) {
+          this.error = error
+        } finally {
+          this.loading = false
+        }
       }
     },
     async getMenuPerCategory(categoryName) {
+      this.isFilter = true
       await this.fetchMenus()
       console.log('nama kategori ' + categoryName)
 
       if (categoryName !== 'all') {
-        const filteredCategory = this.menus.filter((item) => item.category === categoryName)
-        console.log(filteredCategory)
-        this.menus = filteredCategory
+        this.filteredMenus = this.menus.filter((item) => item.category === categoryName)
+        console.log(this.filteredMenus)
       } else {
-        await this.fetchMenus()
+        this.filteredMenus = this.menus
       }
+    },
+    async searchMenu(keyword) {
+      this.isSearch = true
+      await this.fetchMenus()
+      this.filteredMenus = this.menus.filter((menu) => menu.name.toLowerCase().includes(keyword))
+      console.log(keyword)
+      console.log(this.filteredMenus)
     }
   }
 })