feat: filter menu by category

src/components/OrderList.vue

@@ -170,6 +170,7 @@ const totalPayment = computed(() => {
     box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
     padding: 10px 0;
     border: 1px solid transparent;
+    cursor: pointer;
 
     &.selected {
       color: white;

src/stores/menus.js

@@ -6,11 +6,6 @@ export const useMenuStore = defineStore('menus', {
     loading: false,
     error: null
   }),
-  getters: {
-    getMenuPerCategory: (state) => {
-      return (categoryName) => state.menus.filter((item) => item.category === categoryName)
-    }
-  },
   actions: {
     async fetchMenus() {
       this.menus = []
@@ -22,6 +17,18 @@ export const useMenuStore = defineStore('menus', {
       } finally {
         this.loading = false
       }
+    },
+    async getMenuPerCategory(categoryName) {
+      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
+      } else {
+        await this.fetchMenus()
+      }
     }
   }
 })

src/views/HomeView.vue

@@ -5,9 +5,9 @@
         <div class="category">
           <h5 class="mb-3">Categories</h5>
           <div class="d-flex gap-3 category-list">
-            <button v-for="item in categories" :key="item.id" class="btn btn-outline-dark"
-              :class="{ active: selectedCategories === item.id }" v-html="item.name"
-              @click="selectedCategories = item.id"></button>
+            <button v-for="category in categories" :key="category.id" class="btn btn-outline-dark"
+              :class="{ active: selectedCategories === category.id }" v-html="category.title"
+              @click="selectCategory(category)"></button>
           </div>
         </div>
         <MenuContainer />
@@ -20,8 +20,10 @@
 </template>
 
 <script>
+import { ref } from 'vue';
 import MenuContainer from '../components/MenuContainer.vue';
 import OrderList from '../components/OrderList.vue';
+import { useMenuStore } from '../stores/menus';
 
 export default {
   components: {
@@ -33,31 +35,51 @@ export default {
       categories: [
         {
           id: 1,
-          name: '&#129368; All Menu'
+          value: 'all',
+          title: '&#129368; All Menu'
         },
         {
           id: 2,
-          name: '&#9749; Coffee'
+          value: 'coffee',
+          title: '&#9749; Coffee'
         },
         {
           id: 3,
-          name: '&#127851; Chocolate'
+          value: 'tea',
+          title: '&#129483; Tea'
         },
         {
           id: 4,
-          name: '&#127839; Snacks'
+          value: 'chocolate',
+          title: '&#127851; Chocolate'
         },
         {
           id: 5,
-          name: '&#127848; Ice Cream'
+          value: 'snacks',
+          title: '&#127839; Snacks'
         },
-      ],
-      selectedCategories: 1
+        {
+          id: 6,
+          value: 'ice cream',
+          title: '&#127848; Ice Cream'
+        },
+      ]
     }
   }
 }
 </script>
 
+<script setup>
+const { getMenuPerCategory } = useMenuStore()
+
+let selectedCategories = ref(1)
+
+const selectCategory = (category) => {
+  selectedCategories.value = category.id;
+  getMenuPerCategory(category.value)
+}
+</script>
+
 <style lang="scss" scoped>
 .menu {
   padding: 28px 8px 0 32px;
@@ -75,15 +97,29 @@ export default {
 }
 
 .category {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 
   .category-list {
+    overflow-x: auto;
+    padding-bottom: 10px;
+
+    &::-webkit-scrollbar {
+      height: 5px;
+      // background-color: #f5f5f5;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: transparent;
+    }
+
     .btn {
       border-radius: 50px;
       padding: 8px 16px;
       border-color: #5C5470;
       color: #5C5470;
       font-size: 14px;
+      white-space: nowrap;
 
       &:hover {
         background: linear-gradient(232deg, rgba(185, 138, 238, 0.80) 0%, rgba(251, 190, 222, 0.80) 100%);