[IMP] refactorize modules and store code

src/App.vue

@@ -1,19 +1,12 @@
 <template lang="pug">
     .pos
-        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" nextButtonText="Continuar" backButtonText="Volver" @on-complete="completeSale()")
+        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" nextButtonText="Continuar" backButtonText="Volver" transition="fade" @on-complete="completeSale()")
             tab-content(title="Agregue productos al carrito" :before-change="checkCart")
-                .products
-                    .products-container
-                        products-searcher
-                        products-grid(:symbol="currency.symbol")
-                    .cart-container
-                        cart-total(:total="total" :symbol="currency.symbol")
-                        cart-items(:symbol="currency.symbol")
+                cart-step
             tab-content(title="Seleccione un cliente" :before-change="checkCustomer")
-                customer-searcher
-                customers-grid
+                customer-step
             tab-content(title="Vea un resumen de su operación")
-                payment
+                payment-step
         loader
 </template>
 
@@ -21,39 +14,27 @@
     import { FormWizard, TabContent } from 'vue-form-wizard'
     import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
+    import CartStep from '@/components/cart/CartStep'
+    import CustomerStep from '@/components/customer/CustomerStep'
+    import PaymentStep from '@/components/payment/PaymentStep'
     import Loader from '@/components/Loader'
-    import ProductsSearcher from '@/components/ProductsSearcher'
-    import ProductsGrid from '@/components/ProductsGrid'
-    import CartTotal from '@/components/CartTotal'
-    import CartItems from '@/components/CartItems'
-    import CartItem from '@/components/CartItem'
-    import CustomerSearcher from '@/components/CustomerSearcher'
-    import CustomersGrid from '@/components/CustomersGrid'
-    import Payment from '@/components/Payment'
 
     import { mapActions, mapGetters } from 'vuex'
     import Vuex from 'vuex'
 
     export default {
         components: {
-            'form-wizard': FormWizard,
-            'tab-content': TabContent,
-            'loader': Loader,
-            'products-searcher': ProductsSearcher,
-            'products-grid': ProductsGrid,
-            'cart-total': CartTotal,
-            'cart-items': CartItems,
-            'cart-item': CartItem,
-            'customer-searcher': CustomerSearcher,
-            'customers-grid': CustomersGrid,
-            'payment': Payment
+            TabContent,
+            FormWizard,
+            CartStep,
+            CustomerStep,
+            PaymentStep,
+            Loader,
         },
-        computed: mapGetters({
-            total: 'getTotal',
-            currency: 'getCurrency',
-            cartIsEmpty: 'cartIsEmpty',
-            hasSelectedCustomer: 'hasSelectedCustomer'
-        }),
+        computed: mapGetters([
+            'cartIsEmpty',
+            'hasSelectedCustomer'
+        ]),
         methods: {
             checkCart() {
                 if (!this.cartIsEmpty) {
@@ -117,25 +98,11 @@
                         height: calc(100% - 20px)
                         margin: 10px
 
-                        .products
+                        .pos-step
                             width: 100%
                             height: 100%
-                            display: block
                             background: #fff
 
-                            .products-container
-                                width: calc(100% - 300px)
-                                height: 100%
-                                padding-right: 5px
-                                display: inline-block
-
-                            .cart-container
-                                width: 300px
-                                height: 100%
-                                border-left: 1px solid #d3d3d3
-                                padding-left: 10px
-                                display: inline-block
-                                vertical-align: top
             .wizard-card-footer
                 width: 100%
                 height: 50px

src/components/CartTotal.vue

@@ -1,54 +0,0 @@
-<template lang="pug">
-    .cart-total
-        h2
-            small.cart-total-currency {{ getSymbol() }}
-            |
-            | {{ getTotal() }}
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-
-    export default {
-        props: {
-            total: {
-                type: Number,
-                required: true
-            },
-            symbol: {
-                type: String,
-                required: true,
-                default: '$'
-            },
-            separator: {
-                type: String,
-                default: '.'
-            },
-            decimals: {
-                type: Number,
-                default: 0
-            }
-        },
-        methods: {
-            getTotal() {
-                return accounting.format(this.total, this.decimals, this.separator, ',')
-            },
-            getSymbol() {
-                return this.symbol
-            }
-        }
-    }
-
-</script>
-
-<style lang="sass">
-    .cart-total
-        width: 100%
-        height: 50px
-
-        h2
-            width: 100%
-            height: inherit
-            margin: 0
-            font-size: 30pt
-</style>

src/components/cart/CartContainer.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+    .cart-container
+        cart-total
+        cart-items
+        
+</template>
+
+<script>
+    import CartTotal from '@/components/cart/CartTotal'
+    import CartItems from '@/components/cart/CartItems'
+
+    export default {
+        components: {
+            CartTotal,
+            CartItems
+        }
+    }
+</script>
+
+<style lang="sass">
+    .cart-container
+        width: 300px
+        height: 100%
+        border-left: 1px solid #d3d3d3
+        padding-left: 10px
+        display: inline-block
+        vertical-align: top
+</style>

src/components/CartItem.vue → src/components/cart/CartItem.vue

@@ -3,9 +3,9 @@
             h3.item-name {{ item.display_name }}
             input.item-quantity(:value="item.qty" number)
             span.item-x x
-            span.item-price {{ getPrice() }}
+            span.item-price {{ formatPrice() }}
             span.item-equals =
-            span.item-subtotal {{ getSubtotal() }}
+            span.item-subtotal {{ formatPrice() }}
 
             .cart-item-options-wrapper
                 .cart-item-options
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-    import { mapActions } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
 
     export default {
         props: {
@@ -26,21 +26,11 @@
                 default: () => {
                     return {}
                 }
-            },
-            symbol: {
-                type: String,
-                default: '$',
-                required: true
-            },
-            separator: {
-                type: String,
-                default: '.'
-            },
-            decimals: {
-                type: Number,
-                default: 0
             }
         },
+        computed: mapGetters([
+            'currencySymbol'
+        ]),
         methods: {
             add(item) {
                 this.addToCart(item)
@@ -51,14 +41,11 @@
             remove(item) {
                 this.removeFromCart(item)
             },
-            getSymbol() {
-                return this.symbol
-            },
-            getPrice() {
-                return accounting.formatMoney(this.item.list_price, this.symbol, 0, this.separator, ',')
+            formatPrice() {
+                return accounting.formatMoney(this.item.list_price, this.currencySymbol, 0, '.', ',')
             },
-            getSubtotal() {
-                return accounting.formatMoney(this.item.list_price * this.item.qty, this.symbol, 0, this.separator, ',')
+            formatSubtotal() {
+                return accounting.formatMoney(this.item.list_price * this.item.qty, this.currencySymbol, 0, '.', ',')
             },
             ...mapActions([
                 'addToCart',

src/components/CartItems.vue → src/components/cart/CartItems.vue

@@ -1,26 +1,20 @@
 <template lang="pug">
     .cart-items-wrapper
         transition-group(name="list" tag="ul" class="cart-items")
-            cart-item(v-for="item in items" :key="item" :item="item" :symbol="symbol")
+            cart-item(v-for="item in cartItems" :key="item" :item="item")
 </template>
 
 <script>
-    import CartItem from '@/components/CartItem'
+    import CartItem from '@/components/cart/CartItem'
     import { mapGetters, mapActions } from 'vuex'
 
     export default {
-        props: {
-            symbol: {
-                type: String,
-                default: '$'
-            }
-        },
         components: {
-            'cart-item': CartItem
+            CartItem
         },
-        computed: mapGetters({
-            items: 'getCartItems'
-        }),
+        computed: mapGetters([
+            'cartItems'
+        ]),
         methods: mapActions([
             'addToCart',
             'removeFromCart'

src/components/cart/CartStep.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+    .pos-step
+        products-container
+        cart-container
+</template>
+
+<script>
+    import ProductsContainer from '@/components/cart/ProductsContainer'
+    import CartContainer from '@/components/cart/CartContainer'
+    
+    export default {
+        components: {
+            ProductsContainer,
+            CartContainer
+        }
+    }
+</script>
+
+<style lang="sass">
+
+</style>

src/components/cart/CartTotal.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+    .cart-total
+        h2
+            small.cart-total-currency {{ currencySymbol }}
+            |
+            | {{ formatTotal() }}
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'total',
+            'currencySymbol'
+        ]),
+        methods: {
+            formatTotal() {
+                return accounting.format(this.total, 0, '.', ',')
+            }
+        }
+    }
+
+</script>
+
+<style lang="sass">
+    .cart-total
+        width: 100%
+        height: 50px
+
+        h2
+            width: 100%
+            height: inherit
+            margin: 0
+            font-size: 30pt
+</style>

src/components/ProductCard.vue → src/components/cart/ProductCard.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-    import { mapActions } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
 
     export default {
         props: {
@@ -17,32 +17,14 @@
                 default: () => {
                     return {}
                 }
-            },
-            symbol: {
-                type: String,
-                default: '$',
-                required: true
-            },
-            separator: {
-                type: String,
-                default: '.'
-            },
-            decimals: {
-                type: Number,
-                default: 0
-            }
-        },
-        computed: {
-            // FIXME
-            productImage() {
-                let img = new Image()
-                img.src = this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/web/static/src/img/placeholder.png'
-                return img.src
             }
         },
+        computed: mapGetters([
+            'currencySymbol'
+        ]),
         methods: {
             getPrice() {
-                return accounting.formatMoney(this.item.list_price, this.symbol, this.decimals, this.separator, ',')
+                return accounting.formatMoney(this.item.list_price, this.currencySymbol, 0, '.', ',')
             },
             ...mapActions([
                 'selectProduct'

src/components/ProductsSearcher.vue → src/components/cart/ProductSearcher.vue

@@ -8,9 +8,9 @@
     import Fuse from 'fuse.js'
 
     export default {
-        computed: mapGetters({
-            products: 'getProducts'
-        }),
+        computed: mapGetters([
+            'products'
+        ]),
         methods: {
             initFuse() {
                 if (this.fuse) {

src/components/ProductSelector.vue → src/components/cart/ProductSelector.vue

@@ -9,15 +9,15 @@
 <script>
     import { mapGetters, mapActions } from 'vuex'
     import Fuse from 'fuse.js'
-    import ProductVariant from '@/components/ProductVariant'
+    import ProductVariant from '@/components/cart/ProductVariant'
 
     export default {
         components: {
-            'product-variant': ProductVariant
+            ProductVariant
         },
-        computed: mapGetters({
-            variants: 'getVariants'
-        }),
+        computed: mapGetters([
+            'variants'
+        ]),
         methods: {
             initFuse() {
                 if (this.fuse) {

src/components/cart/ProductsContainer.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+    .products-container
+        product-searcher
+        products-grid
+</template>
+
+<script>
+    import ProductSearcher from '@/components/cart/ProductSearcher'
+    import ProductsGrid from '@/components/cart/ProductsGrid'
+
+    export default {
+        components: {
+            ProductSearcher,
+            ProductsGrid
+        }
+    }
+</script>
+
+<style lang="sass">
+    .products-container
+        width: calc(100% - 300px)
+        height: 100%
+        padding-right: 5px
+        display: inline-block
+
+</style>
+

src/components/ProductsGrid.vue → src/components/cart/ProductsGrid.vue

@@ -1,32 +1,24 @@
 <template lang="pug">
     .products-grid-wrapper
         .products-grid
-            product-card(v-for="product in products" :key="product" :item="product" :symbol="symbol")
+            product-card(v-for="product in products" :key="product" :item="product")
             product-selector
 </template>
 
 <script>
-    import ProductCard from '@/components/ProductCard'
-    import ProductSelector from '@/components/ProductSelector'
+    import ProductCard from '@/components/cart/ProductCard'
+    import ProductSelector from '@/components/cart/ProductSelector'
 
     import { mapGetters, mapActions } from 'vuex'
 
     export default {
-        props: {
-            symbol: {
-                type: String,
-                default: '$',
-                required: true
-            }
-        },
         components: {
-            'product-card': ProductCard,
-            'product-selector': ProductSelector
+            ProductCard,
+            ProductSelector
         },
-        computed: mapGetters({
-            products: 'getProducts',
-            hasSelectedProduct: 'hasSelectedProduct'
-        }),
+        computed: mapGetters([
+            'products',
+        ]),
         methods: mapActions([
             'selectProduct'
         ])

src/components/CustomerCard.vue → src/components/customer/CustomerCard.vue

@@ -16,10 +16,10 @@
                 }
             }
         },
-        computed: mapGetters({
-            selectedCustomer: 'getSelectedCustomer',
-            hasSelectedCustomer: 'hasSelectedCustomer' 
-        }),
+        computed: mapGetters([
+            'selectedCustomer',
+            'hasSelectedCustomer'
+        ]),
         methods: {
             isSelectedCustomer() {
                 return this.hasSelectedCustomer ? this.item.id === this.selectedCustomer.id : false

src/components/customer/CustomerDetails.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+    .customer-details Customer Display
+</template>
+
+<script>
+    export default {
+    
+    }
+</script>
+
+<style lang="sass">
+    .customer-details
+        width: 350px
+        height: 100%
+        border-left: 1px solid #d3d3d3
+</style>

src/components/CustomerSearcher.vue → src/components/customer/CustomerSearcher.vue

@@ -8,9 +8,9 @@
     import { mapGetters, mapActions } from 'vuex'
 
     export default {
-        computed: mapGetters({
-            customers: 'getCustomers'
-        }),
+        computed: mapGetters([
+            'customers'
+        ]),
         methods: {
             initFuse() {
                 if (this.fuse) {

src/components/customer/CustomerStep.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+    .pos-step
+        customer-searcher
+        customers-grid
+</template>
+
+<script>
+    import CustomerSearcher from '@/components/customer/CustomerSearcher'
+    import CustomersGrid from '@/components/customer/CustomersGrid'
+
+    export default {
+        components: {
+            CustomerSearcher,
+            CustomersGrid
+        }
+    }
+</script>
+
+<style lang="sass">
+</style>
+
+

src/components/CustomersGrid.vue → src/components/customer/CustomersGrid.vue

@@ -6,15 +6,15 @@
 
 <script>
     import { mapGetters } from 'vuex'
-    import CustomerCard from '@/components/CustomerCard'
+    import CustomerCard from '@/components/customer/CustomerCard'
 
     export default {
         components: {
-            'customer-card': CustomerCard
+            CustomerCard
         },
-        computed: mapGetters({
-            customers: 'getCustomers'
-        })
+        computed: mapGetters([
+            'customers'
+        ])
     }
 </script>
 

src/components/PaymentDetails.vue → src/components/payment/PaymentDetails.vue

@@ -16,19 +16,19 @@
         .form-item
             label.form-label Forma de pago
             .form-item-option
-                input.form-input(type="radio" value="cash" v-model="payment") 
-                span Contado
+                input.form-input(type="radio" id="cash" value="cash" v-model="payment") 
+                label(for="cash") Contado
             .form-item-option
-                input.form-input(type="radio" value="credit" v-model="payment")
-                span Crédito
+                input.form-input(type="radio" id="credit" value="credit" v-model="payment")
+                label(for="credit") Crédito
         transition(name="fade")
             .form-item(v-if="payment === 'credit'")
                 select.form-input.input-only
-                    option(v-for="term in paymentTerms" v-if="term.lines.length > 0 && term.lines[0].days !== 0") {{ term.display_name }}
-        .form-item
-            label.form-label Método de Pago
-            select.form-input
-                option(v-for="journal in journals") {{ journal.display_name }}
+                    option(v-for="term in paymentTerms" v-bind:value="term.id" v-if="term.lines.length > 0 && term.lines[0].days !== 0") {{ term.display_name }}
+            .form-item(v-else)
+                label.form-label Método de Pago
+                select.form-input
+                    option(v-for="journal in journals" v-bind:value="journal.id") {{ journal.display_name }}
 </template>
 
 <script>
@@ -37,16 +37,18 @@
     export default {
         computed: mapGetters([
             'hasSelectedCustomer',
-            'getSelectedCustomer',
+            'selectedCustomer',
             'paymentTerms',
-            'journals'
+            'journals',
+            'selectedJournal',
+            'selectedPaymentTerm'
         ]),
         methods: {
             getCustomerName() {
-                return this.hasSelectedCustomer ? this.getSelectedCustomer.display_name : ''
+                return this.hasSelectedCustomer ? this.selectedCustomer.display_name : ''
             },
             getCustomerCredit() {
-                return this.hasSelectedCustomer && this.getSelectedCustomer.credit_limit >= this.getSelectedCustomer.credit ? this.getSelectedCustomer.credit_limit - this.getSelectedCustomer.credit : 0
+                return this.hasSelectedCustomer && this.selectedCustomer.credit_limit >= this.selectedCustomer.credit ? this.selectedCustomer.credit_limit - this.selectedCustomer.credit : 0
             }
         },
         data() {
@@ -92,7 +94,7 @@
                     width: 20px
                     height: 20px
 
-                span
+                label
                     font-size: 12pt
                     margin: 0 45px 15px 5px
 </style>

src/components/Payment.vue → src/components/payment/PaymentStep.vue

@@ -1,13 +1,14 @@
 <template lang="pug">
-    .payment
+    .pos-step
         ticket
         payment-details
 </template>
 
 <script>
     import { mapActions, mapGetters } from 'vuex'
-    import Ticket from '@/components/Ticket'
-    import PaymentDetails from '@/components/PaymentDetails'
+    
+    import Ticket from '@/components/payment/Ticket'
+    import PaymentDetails from '@/components/payment/PaymentDetails'
 
     export default {
         components: {
@@ -23,10 +24,11 @@
     }
 </script>
 
-<style lang="sass">
-    .payment
-        width: 100%;
-        height: calc(100% - 50px);
+<style lang="sass" scoped>
+    .pos-step
+        width: 100%
+        height: calc(100% - 50px)
+        padding-bottom: 50px
         display: flex
 
 </style>

src/components/Ticket.vue → src/components/payment/Ticket.vue

@@ -15,7 +15,7 @@
             .ticket-items-wrapper
                 table
                     tbody
-                        tr(v-for="item in cart" :key="item")
+                        tr(v-for="item in cartItems" :key="item")
                             td {{ item.name }}
                             td {{ item.list_price }}
                             td {{ item.qty }}
@@ -25,7 +25,7 @@
                     tbody
                         tr
                             td Total:
-                            td {{ getTotal() }}
+                            td {{ formatTotal() }}
                         tr
                             td Cliente:
                             td {{ getCustomerName() }}
@@ -35,22 +35,22 @@
     import { mapGetters } from 'vuex'
 
     export default {
-        computed: mapGetters({
-            company: 'getCompany',
-            cart: 'getCartItems',
-            total: 'getTotal',
-            customer: 'getSelectedCustomer',
-            hasSelectedCustomer: 'hasSelectedCustomer'
-        }),
+        computed: mapGetters([
+            'company',
+            'selectedCustomer',
+            'hasSelectedCustomer',
+            'cartItems',
+            'total',
+        ]),
         methods: {
             getCompanyName() {
                 return !!this.company ? this.company.name : ''
             },
-            getTotal() {
+            formatTotal() {
                 return accounting.formatMoney(this.total, '₲', 0, '.', ',')
             },
             getCustomerName() {
-                return this.hasSelectedCustomer ? this.customer.name : ''
+                return this.hasSelectedCustomer ? this.selectedCustomer.name : ''
             }
         }
     

src/store/actions.js

@@ -22,42 +22,7 @@ const actions = {
         })
     },
     completeSale({ getters }) {
-        let SaleOrder = new openerp.web.Model('sale.order')
 
-        SaleOrder.call('process_pos_order', [
-            getters.getCartItems,
-            getters.getSelectedCustomer.id
-        ], {
-            context: new openerp.web.CompoundContext()
-        }).then(response => {
-            let invoice = response
-
-            let promise = getters.getPosInstance.do_action({
-                name: 'Factura ' + invoice.reference,
-                type: 'ir.actions.act_window',
-                res_model: 'account.voucher',
-                views: [[invoice.view_id, 'form']],
-                target: 'new',
-                nodestroy: true,
-                context: {
-                    payment_expected_currency: invoice.currency_id,
-                    default_partner_id: invoice.partner_account_id,
-                    default_amount: invoice.amount,
-                    default_reference: invoice.name,
-                    close_after_process: true,
-                    invoice_type: invoice.invoice_type,
-                    invoice_id: invoice.id,
-                    default_type: invoice.default_type,
-                    type: invoice.type
-                }
-            })
-
-            promise.pipe(() =>  {
-                console.log(' ok')
-            })
-        }).fail(error => {
-            console.log(error)
-        })
     }
 }
 

src/store/modules/account.js

@@ -1,7 +1,9 @@
 const state = {
     journals: [],
     periods: [],
-    paymentTerms: []
+    paymentTerms: [],
+    selectedJournal: null,
+    selectedPaymentTerm: null
 }
 
 const getters = {
@@ -13,6 +15,12 @@ const getters = {
     },
     paymentTerms(state) {
         return state.paymentTerms
+    },
+    selectedJournal(state) {
+        return state.selectedJournal
+    },
+    selectedPaymentTerm(state) {
+        return state.selectedPaymentTerm
     }
 }
 
@@ -25,6 +33,12 @@ const mutations = {
     },
     setPaymentTerms(state, payload) {
         state.paymentTerms = payload
+    },
+    setSelectedJournal(state, payload) {
+        state.selectedJournal = payload
+    },
+    setSelectedPaymentTerm(state, payload) {
+        state.selectedPaymentTerm = payload
     }
 }
 

src/store/modules/cart.js

@@ -4,10 +4,10 @@ const state = {
 }
 
 const getters = {
-    getCartItems(state) {
+    cartItems(state) {
         return state.cart
     },
-    getTotal(state) {
+    total(state) {
         return state.total
     },
     cartIsEmpty(state) {

src/store/modules/company.js

@@ -3,13 +3,13 @@ const state = {
 }
 
 const getters = {
-    getCompany(state) {
+    company(state) {
         return state.company
     },
-    getCurrency(state) {
+    currency(state) {
         return state.company ? state.company.currency : ''
     },
-    getCurrencySymbol(state) {
+    currencySymbol(state) {
         return state.company ? state.company.currency.symbol : '$'
     }
 }

src/store/modules/currencies.js

@@ -3,7 +3,7 @@ const state = {
 }
 
 const getters = {
-    getCurrencies(state) {
+    currencies(state) {
         return state.currencies
     }
 }

src/store/modules/customers.js

@@ -5,13 +5,13 @@ const state = {
 }
 
 const getters = {
-    getCustomers(state) {
+    customers(state) {
         return state.filtered.length === 0 ? state.customers : state.filtered
     },
     hasSelectedCustomer(state) {
         return !!state.selectedCustomer
     },
-    getSelectedCustomer(state) {
+    selectedCustomer(state) {
         return state.selectedCustomer
     }
 }

src/store/modules/loader.js

@@ -17,7 +17,7 @@ const state = {
 }
 
 const getters = {
-    getMessages(state) {
+    messages(state) {
         return state.messages
     },
     isLoaded(state) {

src/store/modules/products.js

@@ -6,13 +6,13 @@ const state = {
 }
 
 const getters = {
-    getProducts(state) {
+    products(state) {
         return state.filteredProducts.length === 0 ? state.products : state.filteredProducts
     },
-    getSelectedProduct(state) {
+    selectedProduct(state) {
         return state.selectedProduct
     },
-    getVariants(state) {
+    variants(state) {
         if (!!state.selectedProduct) {
             return state.filteredVariants.length === 0 ? state.selectedProduct.variants : state.filteredVariants
         }