From 8280cf98c9a33613c7440442b73636e39dd297bc Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Thu, 3 Dec 2020 18:18:57 -0500
Subject: when item cart count is 0, item is removed from cart display

---
 iridescence/src/components/cart/CartItem.vue | 35 ++++++++++++++++++++++++----
 iridescence/src/store/index.js               |  5 ++++
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index c39ab13..2c7655a 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -17,13 +17,33 @@
               </strong>
             </div>
           </div>
-          <div class="level-item">
-            <button class="button is-static">
-              {{ inCart }}
-            </button>
-          </div>
         </div>
         <div class="level-right">
+          <div class="level-item">
+            <div class="field has-addons">
+              <p class="control is-expanded">
+                <a class="button is-static is-fullwidth">
+                  {{ inCart }} in cart
+                </a>
+              </p>
+              <div class="control">
+                <a
+                  @click="incrementCartQuantity(-1)"
+                  class="button is-info is-outlined"
+                >
+                  -
+                </a>
+              </div>
+              <div class="control">
+                <a
+                  @click="incrementCartQuantity(1)"
+                  class="button is-info is-outlined"
+                >
+                  +
+                </a>
+              </div>
+            </div>
+          </div>
           <div class="level-item">
             <button class="button is-outlined is-danger">
               Remove
@@ -54,6 +74,11 @@ export default {
         process.env.VUE_APP_IMAGE_ROOT + "/" + this.product.photo_thumbnail
       );
     }
+  },
+  methods: {
+    incrementCartQuantity(by) {
+      this.$store.commit("cartItem", { id: this.id, by });
+    }
   }
 };
 </script>
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 8208f35..48cae11 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -36,6 +36,11 @@ export default new Vuex.Store({
     cartItem(state, { id, by }) {
       if (state.cart[id]) {
         let newCount = (state.cart[id] += by);
+        if (newCount <= 0) {
+          // remove from cart entirely
+          delete state.cart[id];
+          return;
+        }
         state.cart = {
           ...state.cart,
           [id]: newCount
-- 
cgit v1.2.3