[ADD] product form [IMP] searcher

controllers/main.py

@@ -202,6 +202,22 @@ class Purchases(http.Controller):
             'paymentTerms': self.get_payment_terms()
         })
 
+    '''
+        Create supplier and return data
+    '''
+    @http.route('/eiru_purchases/create_supplier', auth='user', methods=['POST'], cors='*')
+    def create_supplier(self, **kw):
+        self.make_info_log('creating supplier')
+        print(kw)
+
+    '''
+        Create product and return data
+    '''
+    @http.route('/eiru_purchases/create_product', auth='user', methods=['POST'], cors='*')
+    def create_product(self, **kw):
+        self.make_info_log('creating product')
+        print(kw)
+
     '''
         Create purchase resource route
     ''' 

src/components/product/ProductForm.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+    modal(name='product-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'product-modal']")
+        h2 Nuevo producto
+        hr
+        form.product-form
+            .form-item
+                label.form-label Nombre
+                input.form-input
+            .form-item
+                label.form-label Precio de Costo
+                input.form-input
+            .form-item
+                label.form-label Código de Barras
+                input.form-input
+            .form-actions
+                button.form-button(@click='submitProduct(product)') Aceptar
+                button.form-button(@click='submitProduct()') Cancelar
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'showProductForm'
+        ]),
+        watch: {
+            showProductForm(value) {
+                if(!value) {
+                    this.$modal.hide('product-modal')
+                    return
+                }
+
+                this.product.name = ''
+                this.product.price = ''
+                this.product.ean13 = ''
+
+                this.$modal.show('product-modal')
+            }
+        },
+        methods: {
+            beforeClose(e) {
+                if (this.showProductForm) {
+                    e.stop()
+                }
+            },
+            ...mapActions([
+                'submitProduct'
+            ])
+        },
+        data() {
+            return {
+                product: {
+                    name: '',
+                    price: '',
+                    ean13: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+     @import '../../assets/variables'
+     .product-modal
+        h2
+            font-size: 10pt
+            color: $app-title-color
+            margin-left: 15px
+        hr
+            margin: 0 15px
+        .product-form
+            width: 100%
+            height: 250px
+            padding: 15px
+            .form-item
+                width: 100%
+                height: 40px
+                margin-bottom: 15px
+                .form-label
+                    width: 30%
+                    height: 40px
+                    font-size: 14pt
+                .form-input
+                    width: 70%
+                    height: 40px
+                    font-size: 18pt
+                    border-radius: 0
+            .form-actions
+                float: right
+                margin-top: 15px
+                .form-button
+                    width: 160px
+                    height: 40px
+                    border: none
+                    box-shadow: none
+                    border-radius: 0
+                    margin-right: 5px
+                    background: $app-main-color
+                    color: $app-bg-color
+</style>

src/components/product/ProductsStep.vue

@@ -1,14 +1,16 @@
 <template lang="pug">
     .purchase-step
         .products-selector
-            searcher(:items='products' :keys="['name', 'displayName']")
-            card-grid(:items='visibleProducts' canAdd @onSelect='selectProduct')
+            searcher(:items='products' :keys="['name', 'displayName']" @onSearch='filterProducts')
+            card-grid(:items='visibleProducts' canAdd @onAdd='showProductForm' @onSelect='selectProduct')
+            product-form
         cart
 </template>
 
 <script>
     import Searcher from '@/components/common/Searcher'
     import CardGrid from '@/components/common/CardGrid'
+    import ProductForm from '@/components/product/ProductForm'
     import Cart from '@/components/product/Cart'
 
     import { mapGetters, mapActions } from 'vuex'
@@ -17,6 +19,7 @@
         components: {
             Searcher,
             CardGrid,
+            ProductForm,
             Cart
         },
         computed: mapGetters([
@@ -24,6 +27,8 @@
             'visibleProducts'
         ]),
         methods: mapActions([
+            'filterProducts',
+            'showProductForm',
             'selectProduct'
         ])
     }

src/store/modules/product.js

@@ -7,9 +7,17 @@ const state = {
         default: [],
         values: []
     },
+    filteredProducts: {
+        default: [],
+        values: []
+    },
     productWithVariant: {
         default: null,
         value: null
+    },
+    showProductForm: {
+        default: false,
+        value: false
     }
 }
 
@@ -26,7 +34,7 @@ const getters = {
      * @param {*} state 
      */
     visibleProducts(state) {
-        return state.products.values
+        return state.filteredProducts.values.length === 0 ? state.products.values : state.filteredProducts.values
     },
     /**
      * 
@@ -34,6 +42,13 @@ const getters = {
      */
     productWithVariant(state) {
         return state.productWithVariant.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    showProductForm(state) {
+        return state.showProductForm.value
     }
 }
 
@@ -53,18 +68,26 @@ const mutations = {
      */
     setProductWithVariant(state, payload) {
         state.productWithVariant.value = value
-    }
-}
-
-const actions = {
+    },
     /**
      * 
-     * @param {*} param0 
+     * @param {*} state 
      * @param {*} payload 
      */
-    setProducts({ commit }, payload) {
-        commit('setProducts', payload)
+    setFilteredProducts(state, payload) {
+        state.filteredProducts.values = [...payload]
     },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setShowProductForm(state, payload) {
+        state.showProductForm.value = !!payload
+    }
+}
+
+const actions = {
     /**
      * 
      * @param {*} param0 
@@ -78,6 +101,14 @@ const actions = {
 
         dispatch('addToCart', payload.variants[0])
     },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    filterProducts({ commit }, payload) {
+        commit('setFilteredProducts', payload)
+    },
     /**
      * 
      * @param {*} param0 
@@ -89,6 +120,37 @@ const actions = {
         if (!payload) return
 
         dispatch('addToCart', payload)
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    showProductForm({ commit }) {
+        commit('setShowProductForm', true)
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    hideProductForm({ commit }) {
+        commit('setShowProductForm', false)
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    submitProduct({ commit, dispatch }, payload) {
+        if (payload) {
+            if (!payload.name || !payload.price) {
+                dispatch('notify', 'Complete los campos para guardar')
+                return
+            }
+        }
+
+        dispatch('hideProductForm')
     }
 }
 

src/store/modules/supplier.js

@@ -132,7 +132,7 @@ const actions = {
             // TODO: Send data to server
         }
 
-        commit('setShowSupplierForm', false)
+        dispatch('hideSupplierForm')
     }
 }