[ADD] quantity manually

src/components/common/Cart.vue

@@ -4,7 +4,7 @@
             h2.currency-cart-total {{ total | currency(...defaultOptions.currency) }}
         .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' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickMoney='onChangePrice' @onClickUndo='onUndoPrice' @onClickDelete='onDeleteItem' :options='defaultOptions.currency')
+                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onClickQuantity='onClickQuantity' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickMoney='onChangePrice' @onClickUndo='onUndoPrice' @onClickDelete='onDeleteItem' :options='defaultOptions.currency')
 </template>
 
 <script>

src/components/common/CartItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
     li.cart-item(:class="{'cart-item-invalid': !isValid()}")
         h3.item-name {{ item.displayName }}
-        input.item-quantity(type='number' min='1' :value='item.quantity' readonly)
+        input.item-quantity(type='number' v-model.number='quantity' @focus='onFocus' @blur='onBlur')
         span.item-x x
         span.item-price {{ item.price | currency(...options) }}
         span.item-equals =
@@ -38,6 +38,24 @@
                 }
             }
         },
+        computed: {
+            quantity: {
+                get() {
+                    return this.item.quantity
+                },
+                set(value) {
+                    this.input = !value ? 1 : value
+
+                    if (this.editing) {
+                        this.handleEditing(value)
+
+                        return
+                    }
+
+                    this.computeQuantity()
+                }
+            }
+        },
         watch: {
             item: {
                 handler(value) {
@@ -48,14 +66,52 @@
             }
         },
         methods: {
+            handleEditing(value) {
+                if (value === '') {
+                    clearTimeout(this.inputDaemon)
+                    return
+                }
+
+                if (this.inputDaemon !== null) {
+                    clearTimeout(this.inputDaemon)
+                }
+
+                this.inputDaemon = setTimeout(() => {
+                    this.computeQuantity()
+                }, 300)
+            },
+            computeQuantity() {
+                if (this.input > this.item.quantity) {
+                    this.onClickIncrement()
+                } else {
+                    this.onClickDecrement()
+                }
+            },
+            onFocus() {
+                this.editing = true
+                this.input = 0
+            },
+            onBlur() {
+                this.editing = false
+                this.input = 0
+            },
+            onInputChange(e) {
+                console.log(e)
+            },
             onChange(item) {
                 this.$emit('onChange', item)
             },
             onClickIncrement() {
-                this.$emit('onClickIncrement', this.item)
+                this.$emit('onClickIncrement', {
+                    id: this.item.id,
+                    quantity: this.editing ? this.input : 1
+                })
             },
             onClickDecrement() {
-                this.$emit('onClickDecrement', this.item)
+                this.$emit('onClickDecrement', {
+                    id: this.item.id,
+                    quantity: this.editing ? this.input : -1
+                })
             },
             onClickMoney() {
                 this.$emit('onClickMoney', this.item)
@@ -64,11 +120,20 @@
                 this.$emit('onClickUndo', this.item)
             },
             onClickDelete() {
-                this.$emit('onClickDelete', this.item)
+                this.$emit('onClickDelete', {
+                    id: this.item.id
+                })
             },
             isValid() {
                 return this.item.price > 0
             }
+        },
+        data() {
+            return {
+                editing: false,
+                input: 0,
+                inputDaemon: null
+            }
         }
     }
 </script>
@@ -97,12 +162,15 @@
             font-size: 8pt
             display: inline-block
         .item-quantity
-            width: 50px
+            width: 60px
             height: 28px
             margin-top: 6px
             text-align: right
             float: left
             display: inline-block
+            user-select: none
+            cursor: pointer
+            border-radius: 0
         .item-x
             width: 20px
             height: 20px

src/store/modules/cart.js

@@ -46,7 +46,15 @@ const mutations = {
         let productFound = state.cartItems.find(item => item.id === payload.id)
 
         if(productFound) {
-            productFound.quantity = productFound.quantity + 1
+            if (payload.quantity > 1) {
+                if (productFound.quantity === payload.quantity) {
+                    productFound.quantity = productFound.quantity + 1    
+                } else {
+                    productFound.quantity = payload.quantity
+                }
+            } else {
+                productFound.quantity = productFound.quantity + 1
+            }
             return
         }
 
@@ -65,7 +73,11 @@ const mutations = {
         }
 
         if (payload.mode === 'partial') {
-            state.cartItems[foundIndex].quantity = state.cartItems[foundIndex].quantity - 1
+            if (payload.item.quantity !== -1) {
+                state.cartItems[foundIndex].quantity = payload.item.quantity
+            } else {
+                state.cartItems[foundIndex].quantity = state.cartItems[foundIndex].quantity - 1
+            }
         } else {
             state.cartItems.splice(foundIndex, 1)
         }