[ADD] dislay modal on select product template

src/App.vue

@@ -12,7 +12,7 @@
             customer-searcher
             customers-grid
         tab-content(title="Vea un resumen de su operación")
-            summary
+            summary-display
 </template>
 
 <script>
@@ -26,7 +26,7 @@
     import CartItem from '@/components/CartItem'
     import CustomerSearcher from '@/components/CustomerSearcher'
     import CustomersGrid from '@/components/CustomersGrid'
-    import Summary from '@/components/Summary'
+    import SummaryDisplay from '@/components/SummaryDisplay'
 
     import { mapActions } from 'vuex'
     import Vuex from 'vuex'
@@ -42,7 +42,7 @@
             'cart-item': CartItem,
             'customer-searcher': CustomerSearcher,
             'customers-grid': CustomersGrid,
-            'summary': Summary
+            'summary-display': SummaryDisplay
         },
         methods: mapActions([
             'fetchCompany',

src/components/ProductCard.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
-    //- .product-card(@click="selectProduct({ data })")
-    .product-card(@click="selectVariant()")
+    .product-card(@click="selectProduct({ data })")
         h2.product-title {{ data.name }}
         img.product-image(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'")
         .product-price

src/components/ProductSelector.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+    .product-selector
+        modal(name="product-selector")
+            .product-variant(v-for="variant in variants")
+
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        computed: mapGetters({
+            variants: 'getVariants'
+        }),
+        mounted() {
+            this.$store.watch(state => {
+                return state.products.selectedProduct
+            }, value => {
+                this.$modal.show("product-selector")
+            })
+        }
+    }
+</script>
+
+<style lang="sass">
+    .product-selector
+</style>

src/components/ProductsGrid.vue

@@ -2,21 +2,25 @@
     .products-grid
         template(v-for="product in products")
             product-card(:data="product")
-        modal(name="variant-selector" transition="nice-modal-fade")
+        //- modal(name="variant-selector" transition="nice-modal-fade" v-if="has")
+        product-selector
+
 </template>
 
 <script>
     import ProductCard from '@/components/ProductCard'
-    import VModal from 'vue-js-modal'
+    import ProductSelector from '@/components/ProductSelector'
+
     import { mapGetters, mapActions } from 'vuex'
 
     export default {
         components: {
             'product-card': ProductCard,
-            'product-modal': VModal
+            'product-selector': ProductSelector
         },
         computed: mapGetters({
-            products: 'getProducts'
+            products: 'getProducts',
+            hasSelectedProduct: 'hasSelectedProduct'
         }),
         methods: mapActions([
             'selectProduct'

src/components/Summary.vue → src/components/SummaryDisplay.vue

@@ -10,5 +10,7 @@
 </script>
 
 <style lang="sass">
-
+    .summary
+        width: 100%
+        height: 100%
 </style>

src/store/modules/products.js

@@ -1,16 +1,26 @@
 const state = {
-    products: []
+    products: [],
+    selectedProduct: null
 }
 
 const getters = {
     getProducts (state) {
         return state.products
+    },
+    getSelectedProduct(state) {
+        return state.selectedProduct
+    },
+    getVariants(state) {
+        return !!state.selectedProduct ? state.selectedProduct.variants : []
     }
 }
 
 const mutations = {
     pushProducts(state, payload) {
         state.products = [...payload.products]
+    },
+    setSelectedProduct(state, payload) {
+        state.selectedProduct = payload.product
     }
 }
 
@@ -25,11 +35,10 @@ const actions = {
             console.log(error)
         })
     },
-    // selectProduct({ dispatch }, payload) {
-    //     // dispatch('addToCart', payload)
-    // }
-    selectProduct(args) {
-        console.log(args)
+    selectProduct({ commit }, payload) {
+        commit('setSelectedProduct', {
+            product: payload.data
+        })
     }
 }