[ADD] product discount modal

src/components/cart/CartItem.vue

@@ -11,7 +11,7 @@
                 .cart-item-options
                     .cart-item-option(class="fa fa-plus" @click="add(item)")
                     .cart-item-option(class="fa fa-minus" @click="subtract(item)")
-                    .cart-item-option(class="fa fa-money")
+                    .cart-item-option(class="fa fa-money" @click="discount(item)")
                     .cart-item-option(class="fa fa-trash" @click="remove(item)")
 </template>
 
@@ -38,6 +38,9 @@
             subtract(item) {
                 this.subtractFromCart(item)
             },
+            discount(item) {
+                this.discountFromCart(item)
+            },
             remove(item) {
                 this.removeFromCart(item)
             },
@@ -50,6 +53,7 @@
             ...mapActions([
                 'addToCart',
                 'subtractFromCart',
+                'discountFromCart',
                 'removeFromCart'
             ])
         },

src/components/cart/ProductDiscount.vue

@@ -0,0 +1,104 @@
+<template lang="pug">
+    modal(name="product-discount" transition="nice-modal-fade" @before-close="beforeClose" :classes="['v--modal', 'product-discount']")
+        form.discount-form
+            .discount-item
+                label.discount-label Precio
+                input.discount-input(:value="formatAmount()")
+            
+            .discount-item
+                label.discount-label Descuento
+                input.discount-input(:value="discount")
+            
+            .discount-item
+                label.discount-label Precio Mínimo
+                input.discount-input(:value="format('min')")
+            
+            .discount-item
+                label.discount-label Precio Máximo
+                input.discount-input(:value="format('max')")
+        .discount-options
+            button.discount-button(value="accept" @click="discountHandler()") Aceptar
+            button.discount-button(value="cancel" @click="discountHandler()") Cancelar
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    export default {
+        computed: {
+            discount: {
+                set(value) {
+                    console.log(value)
+                },
+                get() {
+                    return accounting.formatMoney(0, this.currencySymbol, 0, '.', ',')
+                }
+            },
+            ...mapGetters([
+                'productToDiscount',
+                'currencySymbol'
+            ])
+        },
+        watch: {
+            productToDiscount(value) {
+                if (value) {
+                    this.$modal.show('product-discount')
+                } else {
+                    this.$modal.hide('product-discount')
+                }
+            }
+        },
+        methods: {
+            discountHandler(e) {
+                this.discountFromCart(null)
+            },
+            formatAmount() {
+                return accounting.formatMoney(this.productToDiscount ? this.productToDiscount.list_price : 0, this.currencySymbol, 0, '.', ',')
+            },
+            format(values) {
+                return accounting.formatMoney(0, this.currencySymbol, 0, '.', ',')
+            },
+            beforeClose(e) {
+                if (this.productToDiscount) {
+                    e.stop()
+                }
+
+            },
+            ...mapActions([
+                'discountFromCart'
+            ])
+        }
+    }
+</script>
+
+<style lang="sass">
+    .product-discount
+        .discount-form
+            width: 100%
+            height: 250px
+            padding: 15px
+            .discount-item
+                width: 100%
+                height: 45px
+                margin-bottom: 10px
+                .discount-label
+                    width: 30%
+                    height: 45px
+                    font-size: 14pt
+                .discount-input
+                    width: 70%
+                    height: 45px
+                    font-size: 28pt
+                    text-align: right
+        .discount-options
+            float: right
+            .discount-button
+                width: 160px
+                height: 40px
+                border: none
+                box-shadow: none
+                border-radius: 0
+                margin-right: 5px
+                background: #0288d1
+                color: #fff
+</style>

src/components/cart/ProductSelector.vue

@@ -73,9 +73,9 @@
                 return state.products.selectedProduct
             }, value => {
                 if (value) {                    
-                    this.$modal.show("product-selector")
+                    this.$modal.show('product-selector')
                 } else {
-                    this.$modal.hide("product-selector")                                
+                    this.$modal.hide('product-selector')                                
                 }
             })
         }

src/components/cart/ProductsGrid.vue

@@ -3,18 +3,21 @@
         .products-grid
             product-card(v-for="product in products" :key="product" :item="product")
             product-selector
+            product-discount
 </template>
 
 <script>
     import ProductCard from '@/components/cart/ProductCard'
     import ProductSelector from '@/components/cart/ProductSelector'
+    import ProductDiscount from '@/components/cart/ProductDiscount'
 
     import { mapGetters, mapActions } from 'vuex'
 
     export default {
         components: {
             ProductCard,
-            ProductSelector
+            ProductSelector,
+            ProductDiscount
         },
         computed: mapGetters([
             'products',

src/store/modules/cart.js

@@ -1,6 +1,7 @@
 const state = {
     cart: [],
-    total: 0
+    total: 0,
+    productToDiscount: null
 }
 
 const getters = {
@@ -12,6 +13,9 @@ const getters = {
     },
     cartIsEmpty(state) {
         return state.cart.length !== 0
+    },
+    productToDiscount(state) {
+        return state.productToDiscount
     }
 }
 
@@ -29,6 +33,9 @@ const mutations = {
         let finded = state.cart.find(item => item.id == payload.product.id)
         finded.qty = finded.qty - 1
     },
+    discountFromCart(state, payload) {
+        state.productToDiscount = payload
+    },
     removeFromCart(state, payload) {
         let findedIndex = state.cart.findIndex(item => item.id == payload.product.id)
         state.cart.splice(findedIndex, 1)
@@ -69,6 +76,9 @@ const actions = {
         
         commit('calculateTotal')
     },
+    discountFromCart({ commit }, payload) {
+        commit('discountFromCart', payload)
+    },
     removeFromCart({ commit, dispatch }, payload) {
         commit('removeFromCart', {
             product: payload