[ADD] cart implemented

src/components/common/Cart.vue

@@ -4,7 +4,7 @@
             h2.currency-cart-total {{ totalInCurrencyFormat() }}
         .cart-items-wrapper
             transition-group(name='list' tag='ul' class='cart-items')
-                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged')
+                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickDelete='onDeleteItem')
 </template>
 
 <script>
@@ -70,6 +70,20 @@
             },
             onItemChanged(item) {
                 this.computeTotal();
+            },
+            onIncrementQty(item) {
+                this.$emit('onIncrementQty', item)
+            },
+            onDecrementQty(item) {
+                this.$emit('onDecrementQty', item)
+            },
+            onDeleteItem(item) {
+                this.$emit('onDeleteItem', item)
+            }
+        },
+        watch: {
+            items(value) {
+                this.computeTotal()
             }
         },
         data() {

src/components/common/CartItem.vue

@@ -8,9 +8,9 @@
         span.item-subtotal {{ (item.price || 1) * (item.quantity || 1) }}
         .cart-item-options-wrapper
             .cart-item-options
-                .cart-item-option(class='fa fa-plus')
-                .cart-item-option(class='fa fa-minus')
-                .cart-item-option(class='fa fa-trash')
+                .cart-item-option(class='fa fa-plus' @click='onClickIncrement')
+                .cart-item-option(class='fa fa-minus' @click='onClickDecrement')
+                .cart-item-option(class='fa fa-trash' @click='onClickDelete')
 </template>
 
 <script>
@@ -38,6 +38,15 @@
         methods: {
             onChange(item) {
                 this.$emit('onChange', item)
+            },
+            onClickIncrement() {
+                this.$emit('onClickIncrement', this.item)
+            },
+            onClickDecrement() {
+                this.$emit('onClickDecrement', this.item)
+            },
+            onClickDelete() {
+                this.$emit('onClickDelete', this.item)
             }
         }
     }

src/components/steps/Product.vue

@@ -4,7 +4,7 @@
             searcher(:items='products' :keys="['name', 'displayName']")
             card-grid(:items='products' :loading='loadingProducts' canAdd @onAdd='showProductForm' @onSelect='selectProduct')
             product-modal(:show='showingProductForm' @onAccept='submitProduct' @onCancel='hideProductForm')
-        cart(:items='cartItems' @onTotalComputed='changeCartTotal')
+        cart(:items='cartItems' @onTotalComputed='changeCartTotal' @onIncrementQty='addToCart' @onDecrementQty='decreaseFromCart' @onDeleteItem='removeFromCart')
 </template>
 
 <script>
@@ -12,7 +12,7 @@
     import { Searcher, CardGrid, Cart } from '@@/common'
     import ProductModal from '@@/modals/ProductModal'
 
-    import { SELECT_PRODUCT, CHANGE_CART_TOTAL, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT } from '@/constants/actionTypes'
+    import { SELECT_PRODUCT, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CHANGE_CART_TOTAL, ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART } from '@/constants/actionTypes'
 
     export default {
         components: {
@@ -29,10 +29,13 @@
         ]),
         methods: mapActions([
             SELECT_PRODUCT,
-            CHANGE_CART_TOTAL,
             SHOW_PRODUCT_FORM,
             HIDE_PRODUCT_FORM,
-            SUBMIT_PRODUCT
+            SUBMIT_PRODUCT,
+            CHANGE_CART_TOTAL,
+            ADD_TO_CART,
+            DECREASE_FROM_CART,
+            REMOVE_FROM_CART
         ])
     }
 </script>

src/constants/actionTypes.js

@@ -44,9 +44,13 @@ const SELECT_CUSTOMER = 'selectCustomer'
 
 const INIT_CURRENCIES = 'initCurrencies'
 
+const CHANGE_CART_TOTAL = 'changeCartTotal'
+
 const ADD_TO_CART = 'addToCart'
 
-const CHANGE_CART_TOTAL = 'changeCartTotal'
+const DECREASE_FROM_CART = 'decreaseFromCart'
+
+const REMOVE_FROM_CART = 'removeFromCart'
 
 export {
     NOTIFY,
@@ -72,6 +76,8 @@ export {
     RECEIVE_CUSTOMER,
     SELECT_CUSTOMER,
     INIT_CURRENCIES,
+    CHANGE_CART_TOTAL,
     ADD_TO_CART,
-    CHANGE_CART_TOTAL
+    DECREASE_FROM_CART,
+    REMOVE_FROM_CART
 }

src/constants/mutationTypes.js

@@ -42,6 +42,8 @@ const SET_LOADING_CURRENCIES = 'setLoadingCurrencies'
 
 const PUSH_TO_CART = 'pushToCart'
 
+const PULL_FROM_CART = 'pullFromCart'
+
 const SET_CART_TOTAL = 'setCartTotal'
 
 export {
@@ -52,5 +54,5 @@ export {
     SET_DATE, SET_LOADING_DATE, // Date
     SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM, SET_SELECTED_CUSTOMER, ADD_CUSTOMER, // Customer
     SET_CURRENCIES, SET_LOADING_CURRENCIES, // Currency
-    PUSH_TO_CART, SET_CART_TOTAL // Cart
+    PUSH_TO_CART, PULL_FROM_CART, SET_CART_TOTAL // Cart
 }

src/store/modules/cart.js

@@ -1,5 +1,5 @@
-import { PUSH_TO_CART, SET_CART_TOTAL } from '@/constants/mutationTypes'
-import { ADD_TO_CART, CHANGE_CART_TOTAL } from '@/constants/actionTypes'
+import { PUSH_TO_CART, PULL_FROM_CART, SET_CART_TOTAL } from '@/constants/mutationTypes'
+import { ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART, CHANGE_CART_TOTAL } from '@/constants/actionTypes'
 
 const initialState = {
     cartItems: [],
@@ -44,6 +44,20 @@ const mutations = {
 
         state.cartItems = [payload, ...state.cartItems]
     },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    [PULL_FROM_CART] (state, payload) {
+        let productFoundIndex = state.cartItems.findIndex(item => item.id === payload.item.id)
+
+        if (payload.mode === 'partial') {
+            state.cartItems[productFoundIndex].quantity = state.cartItems[productFoundIndex].quantity - 1
+        } else {
+            state.cartItems.splice(productFoundIndex, 1)
+        }
+    },
     /**
      * 
      * @param {*} state 
@@ -63,6 +77,28 @@ const actions = {
     [ADD_TO_CART] ({ commit }, payload) {
         commit(PUSH_TO_CART, payload)
     },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    [DECREASE_FROM_CART] ({ commit }, payload) {
+        commit(PULL_FROM_CART, {
+            item: payload,
+            mode: 'partial'
+        })
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    [REMOVE_FROM_CART] ({ commit }, payload) {
+        commit(PULL_FROM_CART, {
+            item: payload,
+            mode: 'full'
+        })
+    },
     /**
      * 
      * @param {*} param0