feat: add cart/order feature

package-lock.json

@@ -11,6 +11,7 @@
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.1",
         "jquery": "^3.7.1",
+        "pinia": "^2.1.6",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -2164,6 +2165,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
+      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.29",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
@@ -4269,6 +4320,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
+      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.29",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",

package.json

@@ -13,6 +13,7 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.1",
     "jquery": "^3.7.1",
+    "pinia": "^2.1.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

public/categories.json

@@ -0,0 +1,22 @@
+[
+  {
+    "id": 1,
+    "name": "Coffee"
+  },
+  {
+    "id": 2,
+    "name": "Tea"
+  },
+  {
+    "id": 3,
+    "name": "Chocolate"
+  },
+  {
+    "id": 4,
+    "name": "Snacks"
+  },
+  {
+    "id": 5,
+    "name": "Ice Cream"
+  }
+]

src/components/CardMenu.vue

@@ -1,30 +1,22 @@
 <template>
   <div class="card-menu rounded">
     <div class="ratio ratio-1x1 rounded overflow-hidden">
-      <img :src="`/img/${data.image}`" :alt="data.name" class="object-fit-cover">
+      <img :src="`/img/${props.data.image}`" :alt="props.data.name" class="object-fit-cover">
     </div>
-    <div class="mt-2 mb-1 fw-semibold">{{ data.name }}</div>
-    <div class="menu-desc lh-sm mb-1">{{ data.description }}</div>
-    <p class="fw-medium mb-2"><sup class="text-dark-purple">Rp</sup>{{ rupiah(data.price) }}</p>
-    <button class="btn btn-primary w-100 text-white btn-sm">Add to Cart</button>
+    <div class="mt-2 mb-1 fw-semibold">{{ props.data.name }}</div>
+    <div class="menu-desc lh-sm mb-1">{{ props.data.description }}</div>
+    <p class="fw-medium mb-2"><sup class="text-dark-purple">Rp</sup>{{ $rupiah(props.data.price) }}</p>
+    <button class="btn btn-primary w-100 text-white btn-sm" @click="cart.addItem(props.data)">Add to Cart</button>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'CardMenu',
-  props: {
-    data: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    rupiah(number) {
-      return Number(number).toLocaleString('id-ID')
-    }
-  }
-}
+<script setup>
+import { useCartStore } from '../stores/cart';
+const cart = useCartStore()
+
+const props = defineProps({
+  data: Object
+})
 </script>
 
 <style lang="scss" scoped>

src/components/CartItem.vue

@@ -2,19 +2,19 @@
   <div class="order-list-item position-relative mb-3">
     <div class="d-flex align-items-center gap-2">
       <div class="ratio ratio-1x1 rounded overflow-hidden">
-        <img :src="'/img/iced-choco.jpg'" class="object-fit-cover" alt="Chocolate">
+        <img :src="`/img/${dataMenu.image}`" class="object-fit-cover" alt="Chocolate">
       </div>
       <div>
-        <p class="mb-1">Expresso</p>
-        <p class="mb-0"><small>Rp21.000</small></p>
+        <p class="mb-1">{{ dataMenu.name }}</p>
+        <p class="mb-0"><small>Rp{{ $rupiah(dataMenu.price) }}</small></p>
       </div>
     </div>
     <div class="position-absolute bottom-0 end-0 d-flex align-items-center gap-2">
-      <Icon icon="iconoir:minus" width="18" class="icon-minus" />
+      <Icon icon="iconoir:minus" width="18" class="icon-minus" @click="decreaseQty(dataMenu.id)" />
       <span class="qty text-center">
-        <input type="number" class="form-control" value="2" min="0">
+        <input type="number" class="form-control" :value="dataMenu.qty" min="0">
       </span>
-      <Icon icon="iconoir:plus" width="18" class="icon-plus" />
+      <Icon icon="iconoir:plus" width="18" class="icon-plus" @click="increaseQty(dataMenu.id)" />
     </div>
   </div>
 </template>
@@ -26,10 +26,21 @@ export default {
   name: 'CartItem',
   components: {
     Icon
+  },
+  props: {
+    dataMenu: {
+      type: Object,
+      required: true
+    }
   }
 }
 </script>
 
+<script setup>
+import { useCartStore } from '../stores/cart'
+const { increaseQty, decreaseQty } = useCartStore()
+</script>
+
 <style lang="scss" scoped>
 .ratio {
   max-width: 50px;

src/components/MenuContainer.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="pb-4">
     <h5 class="mb-3">Menu</h5>
-    <div class="row g-4 row-cols-lg-3">
+    <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-for="menu in menus" :key="menu.id" class="col">
         <CardMenu :data="menu" />
       </div>
@@ -9,26 +11,15 @@
   </div>
 </template>
 
-<script>
-import CardMenu from './CardMenu.vue'; './CardMenu.vue'
+<script setup>
+import CardMenu from './CardMenu.vue'
+import { storeToRefs } from 'pinia'
+import { useMenuStore } from '../stores/menus'
 
-export default {
-  name: 'MenuContainer',
-  components: {
-    CardMenu
-  },
-  data() {
-    return {
-      menus: []
-    }
-  },
-  async mounted() {
-    await fetch('menu.json').then(resp => resp.json()).then(data => {
-      console.log(data)
-      this.menus = data
-    })
-  }
-}
+const { menus, loading, error } = storeToRefs(useMenuStore())
+const { fetchMenus } = useMenuStore()
+
+fetchMenus()
 </script>
 
 <style lang="scss" scoped></style>

src/components/OrderList.vue

@@ -21,34 +21,33 @@
     </div>
     <div class="row mt-4">
       <div class="col">
-        <div class="total-items">Total items:</div>
+        <div class="total-items">Total items: {{ getTotalItems }}</div>
       </div>
       <div class="col text-end">
-        <button class="btn btn-sm btn-outline-red btn-remove">Remove all</button>
+        <button v-if="getTotalItems > 0" class="btn btn-sm btn-outline-red btn-remove" @click="cartStore.$reset">Remove
+          all</button>
       </div>
     </div>
-    <div class="order-list mt-3">
-      <CartItem />
-      <CartItem />
-      <CartItem />
-      <CartItem />
+    <p v-if="getTotalItems === 0" class="text-center mt-3 mb-5">The order list is empty</p>
+    <div v-else class="order-list mt-3">
+      <CartItem v-for="item in carts" :key="item.id" :dataMenu="item" />
     </div>
-    <div class="total-payment px-3 py-2 mt-3">
+    <div v-if="getTotalItems > 0" class="total-payment px-3 py-2 mt-3">
       <div class="row">
         <div class="col">Subtotal</div>
-        <div class="col text-end fw-medium">Rp68.000</div>
+        <div class="col text-end fw-medium">Rp{{ $rupiah(getTotalPrice) }}</div>
       </div>
       <div class="row">
-        <div class="col">Tax</div>
-        <div class="col text-end fw-medium">Rp3.400</div>
+        <div class="col">Tax 5%</div>
+        <div class="col text-end fw-medium">Rp{{ $rupiah(getTax) || 0 }}</div>
       </div>
       <hr>
       <div class="row text-dark-purple fw-bold">
         <div class="col">Total</div>
-        <div class="col text-end">Rp71.400</div>
+        <div class="col text-end">Rp{{ $rupiah(totalPayment) }}</div>
       </div>
     </div>
-    <div class="payment-methods row">
+    <div v-if="getTotalItems > 0" class="payment-methods row">
       <div v-for="payment in paymentOption" :key="payment.id" class="col"
         :class="{ selected: order.paymentMethod === payment.name }" @click="order.paymentMethod = payment.name">
         <div class="d-flex gap-2 align-items-center justify-content-center">
@@ -57,12 +56,15 @@
         </div>
       </div>
     </div>
-    <button class="btn btn-checkout text-white w-100 fw-bold">Process order</button>
+    <button class="btn btn-checkout text-white w-100 fw-bold" :disabled="getTotalItems < 1">Process order</button>
   </div>
 </template>
 
 <script>
-import { Icon } from '@iconify/vue';
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import { storeToRefs } from 'pinia'
+import { useCartStore } from '../stores/cart'
 import CartItem from '../components/CartItem.vue'
 
 export default {
@@ -73,7 +75,6 @@ export default {
   },
   data() {
     return {
-      cart: [],
       paymentOption: [
         {
           id: 1,
@@ -102,6 +103,18 @@ export default {
 }
 </script>
 
+<script setup>
+const { carts, getTotalItems, getTotalPrice } = storeToRefs(useCartStore())
+const cartStore = useCartStore()
+const getTax = computed(() => {
+  // console.log(getTotalPrice)
+  return (getTotalPrice.value * 0.05)
+})
+const totalPayment = computed(() => {
+  return getTotalPrice.value + getTax.value
+})
+</script>
+
 <style lang="scss" scoped>
 .order-details {
   border-radius: 6px;
@@ -119,6 +132,7 @@ export default {
   justify-content: center;
   align-items: center;
   font-weight: 500;
+  min-height: 28px;
 }
 
 .btn-remove {
@@ -131,7 +145,7 @@ export default {
 }
 
 .order-list {
-  max-height: 156px;
+  max-height: 158px;
   overflow-y: auto;
 }
 

src/main.js

@@ -1,11 +1,17 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
 
+app.config.globalProperties.$rupiah = (number) => {
+  return Number(number).toLocaleString('id-ID')
+}
+app.use(createPinia())
 app.use(router)
 
 app.mount('#app')

src/stores/cart.js

@@ -0,0 +1,59 @@
+import { defineStore } from "pinia"
+
+export const useCartStore = defineStore('cart', {
+  state: () => ({
+    carts: [],
+  }),
+  getters: {
+    getTotalItems: (state) => {
+      // console.log('muncul gak nih')
+      if (state.carts.length) {
+        return state.carts?.reduce((total, item) => {
+          // console.log(total)
+          // console.log(item.qty)
+          return total + item.qty
+        }, 0)
+      }
+      return 0
+    },
+    getTotalPrice: (state) => {
+      if (state.carts.length) {
+        return state.carts?.reduce((total, item) => {
+          // console.log(item.price)
+          return total + item.price * item.qty
+        }, 0)
+      }
+      return 0
+    }
+  },
+  actions: {
+    addItem(product) {
+      // console.log(product)
+      const existingItem = this.carts.find((item) => item.id === product.id)
+
+      if (existingItem) {
+        existingItem.qty += 1
+      } else {
+        this.carts.push({ ...product, qty: 1 })
+      }
+      // console.log(this.carts)
+    },
+    increaseQty(id) {
+      const itemIndex = this.carts.findIndex(item => item.id === id)
+      this.carts[itemIndex].qty++
+    },
+    decreaseQty(id) {
+      const itemIndex = this.carts.findIndex(item => item.id === id)
+
+      if (this.carts[itemIndex].qty <= 1) {
+        this.removeItem(id)
+      } else {
+        this.carts[itemIndex].qty--
+      }
+    },
+    removeItem(id) {
+      const itemIndex = this.carts.findIndex(item => item.id === id)
+      this.carts.splice(itemIndex, 1)
+    }
+  }
+})

src/stores/menus.js

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia"
+
+export const useMenuStore = defineStore('menus', {
+  state: () => ({
+    menus: [],
+    loading: false,
+    error: null
+  }),
+  getters: {
+    getMenuPerCategory: (state) => {
+      return (categoryName) => state.menus.filter((item) => item.category === categoryName)
+    }
+  },
+  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
+      }
+    }
+  }
+})