[ADD] product selector step

src/App.vue

@@ -2,7 +2,7 @@
     .pos
         form-wizard(title='' subtitle='' finishButtonText='Finalizar' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createSale')
             tab-content(title="Qué productos necesita?")
-                .step 1
+                product-step
             tab-content(title="Quién es el cliente?")
                 .step 2
             tab-content(title="Cómo quieres pagar?")
@@ -15,10 +15,13 @@
     import { FormWizard, TabContent } from 'vue-form-wizard'
     import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
+    import ProductStep from '@/components/steps/product/Main'
+
     export default {
         components: {
             FormWizard,
-            TabContent
+            TabContent,
+            ProductStep
         },
         methods: mapActions([
             'initSale',

src/components/steps/product/Main.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+    .pos-step
+        .products-selector
+            searcher(:items='products' :keys="['name', 'displayName']")
+            card-grid(:items='products' :loading='loadingProducts')
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    import Searcher from '@/components/common/Searcher'
+    import CardGrid from '@/components/common/CardGrid'
+
+    export default {
+        components: {
+            Searcher,
+            CardGrid
+        },
+        computed: mapGetters([
+            'products',
+            'loadingProducts'
+        ])
+    }
+</script>
+
+<style lang="sass">
+    .pos-step
+        .products-selector
+            width: calc(100% - 300px)
+            height: 100%
+            padding-right: 5px
+            display: inline-block
+</style>

src/store/modules/customer.js

@@ -1,5 +1,5 @@
-import { SET_CUSTOMERS, SET_LOADING_CUSTOMERS } from  '../../constants/mutationTypes'
-import { INIT_CUSTOMERS } from  '../../constants/actionTypes'
+import { SET_CUSTOMERS, SET_LOADING_CUSTOMERS } from '@/constants/mutationTypes'
+import { INIT_CUSTOMERS } from '@/constants/actionTypes'
 
 const initialState = {
     customers: [],