From 73751eff7688ec9994c098ba95f1c08fad210e31 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 25 Jul 2021 16:31:16 +0200
Subject: Product page shows amount of product in cart.

Allows for removal of product from cart.
Product page now uses Vuex instead of local values.
---
 client/src/views/Product.vue | 49 +++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 26 deletions(-)

(limited to 'client/src/views')

diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index 11643c1..ff43857 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -4,15 +4,19 @@
       <div class="row g-0">
 
         <div class="col-md-6">
-          <img :src="productImg" class="img-fluid rounded-start">
+          <img :src="curProductImg" class="img-fluid rounded-start">
         </div>
 
         <div class="col-md-6">
           <div class="card-body">
-            <h3 class="card-title" v-text="productName"></h3>
-            <b><i>Price: ${{ productPrice }}</i></b><br/>
-            <p class="card-text" v-text="productDescription"></p>
+            <h3 class="card-title" v-text="curProduct.name"></h3>
+            <h6 class="card-subtitle mb-2 text-muted">Price: ${{ curProduct.price }}</h6>
+            <p class="card-text" v-text="curProduct.description"></p>
+            <p class="card-text"><small class="text-muted">Amount: {{curProductQuantity}}</small></p>
+          </div>
+          <div class="card-footer">
             <div class="btn btn-dark" @click="buy">Add to cart</div>
+            <div class="btn btn-secondary ms-3" v-show="curProductQuantity" @click="remove">Remove from cart</div>
           </div>
         </div>
 
@@ -22,35 +26,28 @@
 </template>
 
 <script>
-import axios from 'axios';
-
 export default {
   name: 'Product',
   async mounted() {
-    await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${this.$route.params.id}`)
-      .then(response => {
-        this.productName = response.data.name;
-        this.productDescription = response.data.description;
-        this.productImg =  `${process.env.VUE_APP_ROOT_API}/${response.data.imagePath}`;
-        this.productPrice = response.data.price;
-      })
-      .catch(error => console.error(error));
+    this.$store.dispatch('pullProduct', this.$route.params.id);
   },
-  data() {
-    return {
-      productName: String,
-      productDescription: String,
-      productImg: String,
-      productPrice: Number
-    }
+  computed: {
+    curProduct() {
+      return this.$store.getters.getCurrentProduct;
+    },
+    curProductImg() {
+      return this.$store.getters.getCurrentProductImgUrl;
+    },
+    curProductQuantity() {
+      return this.$store.getters.getCurrentProductQuantity;
+    },
   },
   methods: {
     buy() {
-      this.$store.commit('addToCart', {
-        _id: this.$route.params.id,
-        name: this.productName,
-        price: this.productPrice
-      });
+      this.$store.commit('addToCart');
+    },
+    remove() {
+      this.$store.commit('removeFromCart');
     }
   }
 }
-- 
cgit v1.2.3