[ADD] product selection by variants

src/components/ProductSelector.vue

@@ -1,14 +1,19 @@
 <template lang="pug">
     .product-selector
-        modal(name="product-selector")
-            .product-variant(v-for="variant in variants")
-
+        modal(name="product-selector" transition="nice-modal-fade" height="500")
+            input.variant-searcher(type="search" placeholder="Buscar una variante de producto")
+            .product-variants
+                product-variant(v-for="variant in variants" :key="variant.id" :data="variant")
 </template>
 
 <script>
     import { mapGetters } from 'vuex'
+    import ProductVariant from '@/components/ProductVariant'
 
     export default {
+        components: {
+            'product-variant': ProductVariant
+        },
         computed: mapGetters({
             variants: 'getVariants'
         }),
@@ -16,7 +21,11 @@
             this.$store.watch(state => {
                 return state.products.selectedProduct
             }, value => {
-                this.$modal.show("product-selector")
+                if (value) {                    
+                    this.$modal.show("product-selector")
+                } else {
+                    this.$modal.hide("product-selector")                                
+                }
             })
         }
     }
@@ -24,4 +33,19 @@
 
 <style lang="sass">
     .product-selector
+        .variant-searcher
+            width: calc(100% - 30px)
+            height: 35px
+            text-align: center
+            margin: 10px 15px
+            border-radius: 0
+            font: 
+                size: 10pt
+                style: normal
+                weight: bold
+
+        .product-variants
+            width: 100%;
+            height: calc(100% - 70px);
+            overflow-y: auto;
 </style>

src/components/ProductVariant.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+    .product-variant(@click="selectVariant({ data })")
+        img.variant-image(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'")
+        .variant-details
+            h2.variant-name {{ data.display_name }}
+</template>
+
+<script>
+    import { mapActions } from 'vuex'
+
+    export default {
+        props: {
+            data: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            }
+        },
+        methods: mapActions([
+            'selectVariant'
+        ])
+    }
+</script>
+
+
+<style lang="sass">
+    .product-variant
+        width: calc(100% - 20px)
+        height: 84px
+        margin: 5px 10px
+        
+        display: flex
+
+        &:hover
+            cursor: pointer
+            .variant-details
+                transition-duration: 0.5s
+                border-bottom: 2px solid #7c7bad
+
+        .variant-image
+            width: 80px
+            height: 80px
+            margin: 0
+            border: none
+        
+        .variant-details
+            flex-grow: 1
+            border-bottom: 1px solid #d3d3d3
+
+            .variant-name
+                font-size: 10pt
+</style>

src/components/ProductsGrid.vue

@@ -2,7 +2,6 @@
     .products-grid
         template(v-for="product in products")
             product-card(:data="product")
-        //- modal(name="variant-selector" transition="nice-modal-fade" v-if="has")
         product-selector
 
 </template>

src/store/modules/cart.js

@@ -17,12 +17,12 @@ const getters = {
 
 const mutations = {
     addToCart(state, payload) {
-        let finded = state.cart.find(item => item.id == payload.data.id)
+        let finded = state.cart.find(item => item.id == payload.product.id)
 
         if (finded) {
-            payload.data.qty = payload.data.qty + 1
+            payload.product.qty = payload.product.qty + 1
         } else {
-            state.cart = [payload.data, ...state.cart]
+            state.cart = [payload.product, ...state.cart]
         }
     },
     calculateTotal(state) {
@@ -32,8 +32,6 @@ const mutations = {
             sum = sum + (item.list_price * (item.qty || 1))
         })
 
-        console.log(sum)
-
         state.total = sum
     }
 }

src/store/modules/products.js

@@ -17,6 +17,7 @@ const getters = {
 
 const mutations = {
     pushProducts(state, payload) {
+        // console.log(payload)
         state.products = [...payload.products]
     },
     setSelectedProduct(state, payload) {
@@ -39,6 +40,15 @@ const actions = {
         commit('setSelectedProduct', {
             product: payload.data
         })
+    },
+    selectVariant({ commit, dispatch }, payload) {
+        commit('setSelectedProduct', {
+            product: null
+        })
+
+        dispatch('addToCart', {
+            product: payload.data
+        })
     }
 }