[ADD] Selección de Cliente

__init__.py

@@ -1,6 +1,7 @@
+
 # -*- coding: utf-8 -*-
-from models import payment_journal
-from models import res_partner
-from models import account_voucher
-from models import res_company
+# from models import payment_journal
+# from models import res_partner
+# from models import account_voucher
+# from models import res_company
 import controllers

controllers/main.py

@@ -38,7 +38,11 @@ class PaymentsSales(http.Controller):
                     'id': user.company_id.currency_id.id,
                     'name': user.company_id.currency_id.name,
                     'displayName': user.company_id.currency_id.display_name,
-                    'symbol': user.company_id.currency_id.symbol
+                    'symbol': user.company_id.currency_id.symbol,
+                    'rateSilent': user.company_id.currency_id.rate_silent,
+                    'thousandsSeparator': user.company_id.currency_id.thousands_separator,
+                    'decimalSeparator': user.company_id.currency_id.decimal_separator,
+                    'decimalPlaces': user.company_id.currency_id.decimal_places
             }
         }
 
@@ -230,7 +234,7 @@ class PaymentsSales(http.Controller):
         return self.make_gzip_response({
             'date': self.get_server_date(),
             'user': self.get_user(),
-            'customers': self.get_customers(),
-            'journals': self.get_journals(),
-            'currencies': self.get_currency()
+            'customers': self.get_customers()
+            # 'journals': self.get_journals(),
+            # 'currencies': self.get_currency()
         })

src/Payments.vue

@@ -1,110 +1,84 @@
 <template lang="pug">
 	.payments
 		form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" @on-complete="completePayment()" @on-change="(prev, next) => removeLineAll(prev > next && prev >= 2)")
-			tab-content(title="Quien es el cliente?" :before-change="checkPartner")
+			tab-content(title="Quien es el cliente?")
 				partner-step
-			tab-content(title="Cual es la factura?" :before-change="checkInvoice")
-				invoice-step
-			tab-content(title="Que cuota es?" :before-change="checkMoveLine")
-				move-step
-			tab-content(title="Como quieres pagar?" :before-change="chekPaymentAmount")
-				method-payment-step
-		loader
+			tab-content(title="Cual es la factura?")
+				//- invoice-step
+			tab-content(title="Que cuota es?")
+				//- move-step
+			tab-content(title="Como quieres pagar?" )
+				//- method-payment-step
 </template>
 
 <script>
 
-	import {FormWizard, TabContent }	from 'vue-form-wizard'
-	import 'vue-form-wizard/dist/vue-form-wizard.min.css'
-
-	import PartnerStep from '@/components/partner/PartnerStep'
-	import InvoiceStep from '@/components/invoice/InvoiceStep'
-	import MoveStep from '@/components/move/MoveStep'
-	import MethodPaymentStep from '@/components/payment/MethodPaymentStep'
+	import { mapActions } from 'vuex'
 
-	import Loader from '@/components/Loader'
+	import {FormWizard, TabContent } from 'vue-form-wizard'
+	import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
-	import {mapActions, mapGetters } from 'vuex'
-	import Vuex from 'vuex'
+	import PartnerStep from '@@/steps/PartnerStep'
 
 	export default {
 		components: {
 			TabContent,
 			FormWizard,
 			PartnerStep,
-			InvoiceStep,
-			MoveStep,
-			MethodPaymentStep,
-			Loader
 		},
-		computed: mapGetters([
-				'hasSelectedPartner',
-				'haSelectedInvoices',
-				'moveLinesIsEmpty',
-				'addMove'
-		]),
 		methods: mapActions([
-			'initPayment',
-			'notify',
-			'completePayment',
-			'removeLineAll',
-			'checkMoveLine',
-			'chekPaymentAmount',
-			'checkPartner',
-			'checkInvoice'
+			'initPayments'
+			// 'notify',
+			// 'completePayment',
+			// 'removeLineAll',
+			// 'checkMoveLine',
+			// 'chekPaymentAmount',
+			// 'checkPartner',
+			// 'checkInvoice'
 		]),
-		mounted(){
-			this.initPayment(this.$root.payments_instance)
+		mounted() {
+			this.initPayments()
 		}
 	}
 </script>
 <style lang="sass">
+	@import './assets/variables'
 	.payments
 		width: 100%
 		height: 100%
 		position: absolute
-
 		.vue-form-wizard
 			width: 100%
 			height: 100%
 			padding-bottom: 0
-
 			.wizard-header
 				display: none
-
 			.wizard-navigation
 				width: 100%
 				height: 100%
-
 				.wizard-progress-with-circle
 					top: 35px
-
 				.wizard-icon-circle
 					width: 60px
 					height: 60px
-
 				.wizard-tab-content
 					width: 100%
 					height: calc(100% - 82px)
 					padding: 0
 					overflow: hidden
-
 					.wizard-tab-container
 						width: calc(100% - 20px)
 						height: calc(100% - 20px)
 						margin: 10px
-
 						.payments-step
 							width: 100%
 							height: 100%
 							background: #fff
-
 			.wizard-card-footer
 				width: 100%
 				height: 50px
 				position: absolute
 				bottom: 0
-
 				.wizard-btn
 					width: 160px
 					height: 40px
@@ -112,5 +86,5 @@
 					box-shadow: none
 					border: none
 					&:hover, &:focus
-						background: #7c7bad
+						background: $app-main-color
 </style>

src/assets/_variables.sass

@@ -0,0 +1,7 @@
+$app-main-color: #7c7bad
+$app-dark-color: #666
+$app-light-color: #f5f5f5
+$app-bg-color: #fff
+$app-border-color: #d3d3d3
+$app-title-color: #d3d3d3
+$app-separator-color: #9e9e9e

src/components/Loader.vue

@@ -1,49 +0,0 @@
-<template lang="pug">
-    modal(name="payment-loader" transition="nice-modal-fade" @before-close="beforeClose" :classes="['v--modal', 'payment-loader']")
-        simple-spinner(size="large" message="Cargando, espere...")
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-    import Spinner from 'vue-simple-spinner'
-
-    export default {
-        components: {
-            'simple-spinner': Spinner
-        },
-        computed: mapGetters({
-            loaded: 'isLoaded'
-        }),
-        watch: {
-            loaded(completed) {
-                if (completed) {
-                    this.$modal.hide("payment-loader")
-                } else {
-                    this.$modal.show("payment-loader")
-                }
-            }
-        },
-        methods: {
-            beforeClose(e) {
-                if (!this.loaded) {
-                    e.stop()
-                }
-            },
-            ...mapActions([
-                'clear'
-            ])
-        },
-        mounted() {
-            this.clear()
-            this.$modal.show("payment-loader")
-        }
-    }
-</script>
-
-<style lang="sass">
-    .payment-loader
-        display: flex
-        align-items: center
-        justify-content: center
-
-</style>

src/components/common/AddCard.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+    .add-card(@click='onClick')
+        i.fa.fa-plus(aria-hidden='true')
+</template>
+
+<script>
+    export default {
+        methods: {
+            onClick(e) {
+                this.$emit('onClickAdd')
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+
+    .add-card
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid $app-border-color
+        display: inline-block
+        position: relative
+        &:hover
+            cursor: pointer
+        i
+            font-size: 36pt
+            margin: 0
+            border: none
+            position: absolute;
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
+            color: $app-main-color
+</style>

src/components/common/Card.vue

@@ -0,0 +1,89 @@
+<template lang="pug">
+    .card(@click='onClick' :class="{ 'selected-card': isSelected }")
+        h2.card-title {{ title }}
+        img.card-image(:src="'data:image/png;base64,' + (image || 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg==')")
+        .card-description(v-if='!!description')
+            span {{ description }}
+</template>
+
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: 'Sin título'
+            },
+            image: {
+                type: String,
+                default: 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg=='
+            },
+            description: {
+                type: String,
+                default: ''
+            },
+            isSelected: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods: {
+            onClick() {
+                this.$emit('onClick')
+            }
+        } 
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+
+    .card
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid $app-border-color
+        display: inline-block
+        position: relative
+        &.selected-card
+            transition-duration: 300ms
+            border-bottom: 3px solid $app-main-color
+        &:hover
+            cursor: pointer
+        .card-title
+            width: 100%
+            height: 30px
+            font-size: 9pt
+            text-align: center
+            margin-top: 10px
+            position: absolute
+            top: 0
+        .card-image
+            width: 80px
+            height: 80px;
+            margin: 0
+            border: none
+            position: absolute
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
+        .card-description
+            width: 100%
+            height: 30px
+            padding-top: 5px
+            text-align: center
+            font-size: 10pt
+            font-weight: bold
+            background: $app-main-color
+            color: $app-bg-color
+            position: absolute
+            bottom: 0
+
+        @keyframes card-bubble
+            30%
+                transform: scaleX(0.75) scaleY(1.25)
+            40%
+                transform: scaleX(1.25) scaleY(0.75)
+            60%
+                transform: scaleX(0.85) scaleY(1.15)
+</style>

src/components/common/CardGrid.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+    .card-grid-wrapper
+        .card-grid-loading(v-if='loading')
+            spinner(type='wave')
+        .card-grid(v-else)
+            add-card(v-if='canAdd' @onClickAdd='onClickAdd')
+            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' :description='getDescription(item)' @onClick='onClickCard(item)')
+</template>
+
+<script>
+    import AddCard from '@@/common/AddCard'
+    import Card from '@@/common/Card'
+    import Spinner from '@@/common/Spinner'
+
+    export default {
+        props: {
+            items: {
+                type: Array,
+                default: []
+            },
+            canAdd: {
+                type: Boolean,
+                default: false
+            },
+            description: {
+                type: String,
+                default: ''
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            }
+        },
+        components: {
+            AddCard,
+            Card,
+            Spinner
+        },
+        methods: {
+            getDescription(item) {
+                return (!!this.description && item[this.description]) || ''
+            },
+            onClickAdd() {
+                this.$emit('onAdd')
+            },
+            onClickCard(item) {
+                this.selectedId = item.id
+                this.$emit('onSelect', item)
+            }
+        },
+        data() {
+            return {
+                selectedId: -1
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .card-grid-wrapper
+        width: 100%
+        height: calc(100% - 100px)
+        margin-top: 15px
+        overflow-y: auto
+        .card-grid-loading
+            width: 100%
+            height: 100%
+            display: flex
+            align-items: center
+            justify-content: center
+        .card-grid
+            width: 100%
+</style>

src/components/common/Cart.vue

@@ -0,0 +1,126 @@
+<template lang="pug">
+    .cart(:style='{ width, height }')
+        .cart-total
+            h2.currency-cart-total {{ totalInCurrencyFormat() }}
+        .cart-items-wrapper
+            transition-group(name='list' tag='ul' class='cart-items')
+                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickDelete='onDeleteItem')
+</template>
+
+<script>
+    import CartItem from './CartItem'
+
+    export default {
+        components: {
+            CartItem
+        },
+        props: {
+            items: {
+                type: Array,
+                default: [],
+                required: true
+            },
+            width: {
+                type: String,
+                default: '300px'
+            },
+            height: {
+                type: String,
+                default: '100%'
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            thousandsSeparator: {
+                type: String,
+                default: '.'
+            },
+            decimalPlaces: {
+                type: Number,
+                default: 0
+            },
+            decimalSeparator: {
+                type: String,
+                default: ','
+            },
+            currencySymbol: {
+                type: String,
+                default: '$'
+            },
+            symbolPosition: {
+                type: String,
+                default: 'before'
+            }
+        },
+        methods: {
+            totalInCurrencyFormat() {
+                return this.total.toFixed(this.decimalPlaces).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.')
+            },
+            computeTotal() {
+                let sum = 0
+
+                for (let item of this.items) {
+                    sum = sum + ((item.price || 1) * (item.quantity || 1))
+                }
+
+                this.total = sum
+
+                this.$emit('onTotalComputed', this.total)
+            },
+            onItemChanged(item) {
+                this.computeTotal();
+            },
+            onIncrementQty(item) {
+                this.$emit('onIncrementQty', item)
+            },
+            onDecrementQty(item) {
+                this.$emit('onDecrementQty', item)
+            },
+            onDeleteItem(item) {
+                this.$emit('onDeleteItem', item)
+            }
+        },
+        watch: {
+            items(value) {
+                this.computeTotal()
+            }
+        },
+        data() {
+            return {
+                total: 0
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .cart
+        border-left: 1px solid $app-border-color
+        padding-left: 10px
+        display: inline-block
+        vertical-align: top
+        .cart-total
+            width: 100%
+            height: 50px
+            .currency-cart-total
+                width: 100%
+                height: 50px
+                margin: 0
+                font-size: 30pt
+        .cart-items-wrapper
+            width: 100%
+            height: calc(100% - 100px)
+            overflow-y: auto
+            overflow-x: hidden
+            .cart-items
+                width: 100%
+                padding: 0
+                margin: 0
+            .list-enter-active, .list-leave-active
+                transition: all 0.3s
+            .list-enter, .list-leave-to
+                opacity: 0
+                transform: translateX(300px)
+</style>

src/components/common/CartItem.vue

@@ -0,0 +1,141 @@
+<template lang="pug">
+    li.cart-item
+        h3.item-name {{ item.name || 'Sin Nombre' }}
+        input.item-quantity(type='number' min='1' :value='item.quantity')
+        span.item-x x
+        span.item-price {{ item.price || 1 }}
+        span.item-equals =
+        span.item-subtotal {{ (item.price || 1) * (item.quantity || 1) }}
+        .cart-item-options-wrapper
+            .cart-item-options
+                .cart-item-option(class='fa fa-plus' @click='onClickIncrement')
+                .cart-item-option(class='fa fa-minus' @click='onClickDecrement')
+                .cart-item-option(class='fa fa-trash' @click='onClickDelete')
+</template>
+
+<script>
+    export default {
+        props: {
+            index: {
+                type: Number,
+                default: -1,
+                required: true
+            },
+            item: {
+                type: Object,
+                default: null
+            }
+        },
+        watch: {
+            item: {
+                handler(value) {
+                    this.onChange(value)
+                },
+                deep: true,
+                immediate: true
+            }
+        },
+        methods: {
+            onChange(item) {
+                this.$emit('onChange', item)
+            },
+            onClickIncrement() {
+                this.$emit('onClickIncrement', this.item)
+            },
+            onClickDecrement() {
+                this.$emit('onClickDecrement', this.item)
+            },
+            onClickDelete() {
+                this.$emit('onClickDelete', this.item)
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .cart-item
+        width: 100%
+        height: 90px
+        list-style: none outside none
+        border-bottom: 1px solid $app-border-color
+        box-sizing: border-box
+        position: relative
+        &:nth-child(1)
+            border-top: 1px solid $app-border-color
+        &:hover
+            transition-duration: 1000ms
+            border-bottom: 2px solid $app-main-color
+        .item-name
+            width: 100%
+            height: 20px
+            margin: 10px 0 5px 0
+            float: left
+            font-size: 8pt
+            display: inline-block
+        .item-quantity
+            width: 50px
+            height: 28px
+            margin-top: 6px
+            text-align: right
+            float: left
+            display: inline-block
+        .item-x
+            width: 20px
+            height: 20px
+            margin-top: 12px
+            text-align: right
+            float: left
+            display: inline-block
+        .item-price
+            width: 80px
+            height: 20px
+            margin-top: 12px
+            text-align: right
+            float: left
+            display: inline-block
+        .item-equals
+            width: 20px
+            height: 20px
+            margin-top: 12px
+            text-align: center
+            float: left
+            display: inline-block
+        .item-subtotal
+            width: 100px
+            height: 20px
+            margin-top: 12px
+            text-align: right
+            font-weight: bold
+            display: inline-block
+        .cart-item-options-wrapper
+            width: 100%
+            height: 20px
+            position: absolute
+            bottom: 0
+            display: flex
+            justify-content: center
+            .cart-item-options
+                width: 90px
+                height: 20px
+                border: 1px solid #d3d3d3
+                border-bottom: none
+                display: flex
+                justify-content: center
+                .cart-item-option
+                    width: 18px
+                    height: 18px
+                    margin: 0 5px
+                    color: #666
+                    &:hover
+                        cursor: pointer
+                    &.fa
+                        padding-left: 2px
+                        line-height: 20px
+                        &.fa-plus:hover
+                            color: #2196f3
+                        &.fa-minus:hover
+                            color: #ffc107
+                        &.fa-trash:hover
+                            color: #f44336
+</style>

src/components/common/Searcher.vue

@@ -0,0 +1,105 @@
+<template lang="pug">
+    input.searcher(type='search' :placeholder='placeholder' :style='{ width, height }' v-model='search')
+</template>
+
+<script>
+    import Fuse from 'fuse.js'
+
+    export default {
+        props: {
+            items: {
+                type: Array,
+                default: [],
+                required: true
+            },
+            placeholder: {
+                type: String,
+                default: 'Buscar...'
+            },
+            width: {
+                type: String,
+                default: '100%'
+            },
+            height: {
+                type: String,
+                default: '35px'
+            },
+            shouldSort: {
+                type: Boolean,
+                default: true
+            },
+            threshold: {
+                type: Number,
+                default: 0.4,
+            },
+            location: {
+                type: Number,
+                default: 0
+            },
+            distance: {
+                type: Number,
+                default: 100
+            },
+            maxPatternLength: {
+                type: Number,
+                default: 32
+            },
+            minMatchCharLength: {
+                type: Number,
+                default: 1
+            },
+            keys: {
+                type: Array,
+                default: [],
+                required: true
+            }
+        },
+        watch: {
+            items(values) {
+                this.fuse.setCollection(values)
+            },
+            search(value) {
+                this.performSearch(value.trim())
+            },
+            results(values) {
+                this.$emit('onSearch', values)
+            }
+        },
+        methods: {
+            initFuse() {
+                this.fuse = new Fuse(this.items, {
+                    shouldSort: this.shouldSort,
+                    threshold: this.threshold,
+                    location: this.location,
+                    distance: this.distance,
+                    maxPatternLength: this.maxPatternLength,
+                    minMatchCharLength: this.minMatchCharLength,
+                    keys: this.keys
+                })
+            },
+            performSearch(value) {
+                this.results = this.fuse.search(value)
+            }
+        },
+        data() {
+            return {
+                fuse: null,
+                search: '',
+                results: []
+            }
+        },
+        mounted() {
+            this.initFuse()
+        }
+    }
+</script>
+
+<style lang="sass">
+    .searcher
+        text-align: center
+        border-radius: 0 !important
+        font:
+            size: 11pt
+            style: normal
+            weight: bold
+</style>

src/components/common/Spinner.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+    .spinner(v-if="type === 'wave'")
+        .spinner-rect.spinner-rect-1
+        .spinner-rect.spinner-rect-2
+        .spinner-rect.spinner-rect-3
+        .spinner-rect.spinner-rect-4
+        .spinner-rect.spinner-rect-5
+</template>
+
+<script>
+    export default {
+        props: {
+            type: String,
+            default: 'wave'
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .spinner 
+        $rect-count: 5
+        $animation-duration: 1000ms
+        $delay-range: 400ms
+
+        width: 50px
+        height: 40px
+        text-align: center
+        font-size: 10px
+        margin: 40px auto
+
+        .spinner-rect
+            width: 5px
+            height: 100%
+            background: $app-main-color
+            margin: 0 3px 0 0
+            display: inline-block
+            animation: spinner-wave $animation-duration infinite ease-in-out
+
+        @for $i from 1 through $rect-count
+            .spinner-rect-#{$i}
+                animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
+
+        @keyframes spinner-wave
+            0%, 40%, 100%
+                transform: scaleY(0.4)
+            20%
+                transform: scaleY(1.0)
+</style>

src/components/common/Ticket.vue

@@ -0,0 +1,152 @@
+<template lang="pug">
+    .ticket
+        .ticket-summary
+            .ticket-summary-header
+                h3 {{ companyName || 'No company' }}
+                table
+                    tbody
+                        tr
+                            td Producto
+                            td Precio
+                            td Cant
+                            td Subtotal
+            .ticket-items-wrapper
+                table
+                    tbody
+                        tr(v-for='item in items' :key='item.id')
+                            td {{ item.name || 'no data' }}
+                            td {{ item.price || 'no data' }}
+                            td {{ item.quantity || 'no data' }}
+                            td {{ ((item.price || 0) * (item.quantity || 0)) || 'no data'  }}
+            .ticket-summary-footer
+                table
+                    tbody
+                        tr
+                            td Total:
+                            td {{ total || 'no data' }}
+                        tr
+                            td Cliente:
+                            td {{ customerName || 'no data' }}
+</template>
+
+<script>
+    export default {
+        props: {
+            companyName: {
+                type: String,
+                default: ''
+            },
+            customerName: {
+                type: String,
+                default: ''
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            items: {
+                type: [],
+                default: []
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .ticket
+        width: 500px
+        height: 100%
+        .ticket-summary
+            width: 350px
+            height: 450px
+            border: 1px solid $app-border-color
+            margin: auto
+            box-shadow: -2px 2px 5pc $app-border-color, 2px 2px 5px $app-border-color
+            position: relative
+            .ticket-summary-header, .ticket-summary-footer
+                width: 100%
+                position: absolute
+            .ticket-summary-header
+                height: 65px
+                top: 0
+                h3
+                    text-align: center
+                    font-size: 14pt
+                    margin: 0 15px
+                    padding: 30px 0 15px 0
+                    color: $app-dark-color
+                table
+                    width: 308px
+                    height: 30px
+                    margin: 0 20px
+                    font-size: 7.5pt
+                    font-weight: bold
+                    tbody
+                        tr
+                            line-height: 30px
+                            border-top: 1px solid $app-border-color
+                            border-bottom: 1px solid $app-border-color
+                            td
+                                &:nth-child(1)
+                                    width: 180px
+                                    text-align: left
+                    
+                                &:nth-child(2)
+                                    width: 50px
+                                    text-align: right
+                    
+                                &:nth-child(3)
+                                    width: 30px
+                                    text-align: right
+
+                                &:nth-child(4)
+                                    width: 50px
+                                    text-align: right
+            .ticket-items-wrapper
+                width: 310px
+                height: 280px
+                margin: 95px 20px 75px 20px
+                padding-top: 5px
+                overflow-y: auto
+                table
+                    width: 100%
+                    font-size: 7.5pt
+                    tbody
+                        tr
+                            height: 28px
+                            line-height: 30px
+
+                            td
+                                &:nth-child(1)
+                                    width: 180px
+                    
+                                &:nth-child(2)
+                                    width: 50px
+                                    text-align: right
+                    
+                                &:nth-child(3)
+                                    width: 30px
+                                    text-align: right
+
+                                &:nth-child(4)
+                                    width: 50px
+                                    text-align: right
+            .ticket-summary-footer
+                width: 348px
+                height: 75px
+                bottom: 0
+                padding: 15px 25px
+                background: $app-bg-color
+                table
+                    width: 100%
+                    tbody
+                        tr
+                            height: 25px
+                            line-height: 20px
+                            td
+                                &:nth-child(1)
+                                    font-weight: bold
+                                &:nth-child(2)
+                                    text-align: right
+</style>

src/components/common/index.js

@@ -0,0 +1,9 @@
+import CardGrid from './CardGrid'
+import Cart from './Cart'
+import Searcher from './Searcher'
+
+export {
+    CardGrid,
+    Cart,
+    Searcher
+}

src/components/froms/CustomerDetails.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+    .customer-details
+        form.form-customer-display
+            .form-separatoe
+                h3 Detalles Generales
+                hr
+            .form-item-payments
+                label.form-label Nombre
+                input.form-input(:value="customer.name || ''" readonly)
+            .form-item-payments
+                label.form-label R.U.C/C.I.Nº
+                input.form-input(:value="customer.ruc || ''" readonly)
+            .form-item-payments
+                label.form-label Celular
+                input.form-input(:value="customer.phone || ''" readonly)
+            .form-item-payments
+                label.form-label Teléfono
+                input.form-input(:value="customer.mobile || ''" readonly)
+            .form-item-payments
+                label.form-label Email
+                input.form-input(:value="customer.email || ''" readonly)
+            .form-separatoe
+                h3 Finanzas
+                hr
+            .form-item-payments
+                label.form-label Débito
+                input.form-input(:value="getCurrencyFormat(customer.credit) || '0'" readonly)
+            .form-item-payments
+                label.form-label Crédito
+                input.form-input(:value="getCurrencyFormat(customer.creditLimit) || '0'" readonly)
+</template>
+
+<script>
+
+    export default {
+        props: {
+            customer: {
+                type: Object,
+                default: {
+                    name: '',
+                    ruc: '',
+                    phone: '',
+                    mobile: '',
+                    email: '',
+                    credit: 0,
+                    creditLimit: 0
+                }
+            },
+            currency: {
+                type: Object,
+                default: {
+                    name: '',
+                    symbol: '',
+                    rateSilent: 0,
+                    thousandsSeparator: '.',
+                    decimalSeparator: ',',
+                    decimalPlaces: 0
+                }
+            }
+        },
+        methods: {
+            getCurrencyFormat(item) {
+                // return  item.toFixed(0).replace(".", ",").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1'+'.')
+                return this.currency.symbol+" "+item.toFixed(this.currency.decimalPlaces).replace(".", ",").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1'+this.currency.thousandsSeparator)
+            },
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .customer-details
+        width: 320px
+        height: 100%
+        .form-customer-display
+            width: 320px
+            height: 100%
+            padding: 15px
+            .form-separatoe
+                h3
+                    color: $app-separator-color
+                    font-size: 8pt
+                hr
+            .form-item-payments
+                width: 100%
+                height: 35px
+                margin-bottom: 10px
+                .form-label
+                    width: 30%
+                    height: 35px
+                    font-size: 10pt
+                .form-input
+                    width: 70%
+                    height: 35px
+                    font-size: 10pt
+
+</style>

src/components/invoice/InvoiceCard.vue

@@ -1,100 +0,0 @@
-<template lang="pug">
-    .invoice-card(@click="selectInvoice(item)" v-bind:class="{ 'selected-invoice': isSelectedInvoice() }")
-        h2.invoice-date {{ getDate() }}
-        h2.invoice-title {{ item.number }}
-        h2.invoice-total Total  {{ getTotal() }} {{ item.currency_symbol }}
-        h2.invoice-saldo  Saldo {{ getResidual() }} {{ item.currency_symbol }}
-</template>
-
-<script>
-
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        props:  {
-            item: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
-            }
-        },
-        computed: mapGetters([
-            'selectedInvoices',
-            'haSelectedInvoices'
-        ]),
-        methods: {
-            isSelectedInvoice() {
-                return this.haSelectedInvoices ? this.item.id === this.selectedInvoices.id : false
-            },
-            ...mapActions([
-                'selectInvoice'
-            ]),
-            getDate() {
-                return !!this.item.date_invoice ? moment(this.item.date_invoice).format("DD-MM-YYYY") : ''
-            },
-            getTotal() {
-                return !!this.item.amount_total ? accounting.format(this.item.amount_total, 0,'.', ',') : '0'
-            },
-            getResidual() {
-                return !!this.item.residual ? accounting.format(this.item.residual, 0,'.', ',') : '0'
-            },
-
-        }
-    }
-</script>
-
-<style lang="sass">
-    .invoice-card
-        width: 250px
-        height: 125px
-        margin: 5px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-
-        &.selected-invoice
-            transition-duration: 0.3s
-            border-top: 3px solid #7c7bad
-
-        &:hover
-            cursor: pointer
-
-        .invoice-title
-            width: 100%
-            height: 30px
-            font-size: 12pt
-            text-align: center
-            margin-top: 25px
-            position: absolute
-            top: 0
-
-        .invoice-date
-            width: 100%
-            height: 30px
-            font-size: 9pt
-            text-align: right
-            padding-right: 10px
-            margin-top: 5px
-            position: absolute
-            top: 0
-
-        .invoice-total, .invoice-saldo
-            width: 100%
-            height: 22px
-            padding-top: 5px
-            margin: 0px
-            text-align: center
-            font-size: 10pt
-            font-weight: bold
-            color: #fff
-            position: absolute
-
-        .invoice-total
-            background: #4caf50
-            bottom: 23px
-
-        .invoice-saldo
-            background: #d32f2f
-            bottom: 0
-</style>

src/components/invoice/InvoiceGrid.vue

@@ -1,31 +0,0 @@
-<template lang="pug">
-    .invoice-container
-        .invoice-grid
-            invoice-card(v-for="invoice in invoices" :key="invoice" :item="invoice")
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-    import InvoiceCard from '@/components/invoice/InvoiceCard'
-
-    export default {
-
-        components: {
-            InvoiceCard
-        },
-        computed: mapGetters([
-            'invoices'
-        ])
-    }
-</script>
-
-<style lang="sass">
-    .invoice-container
-        width: 100%
-        height: calc(100% - 100px)
-        margin-top: 15px
-        overflow-y: auto
-
-        .invoice-grid
-            width: 100%
-</style>

src/components/invoice/InvoiceSearcher.vue

@@ -1,75 +0,0 @@
-<template lang="pug">
-    .invoice-searcher
-        input(type="text" placeholder="Buscar una Factura" v-model="search")
-</template>
-
-<script>
-    import Fuse from 'fuse.js'
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        computed: mapGetters([
-            'invoices'
-        ]),
-        methods: {
-            initFuse() {
-                if (this.fuse) {
-                    this.fuse.setCollection(this.invoices)
-                    return
-                }
-
-                this.fuse = new Fuse(this.invoices, {
-                    theshold: 0.4,
-                    location: 0,
-                    distance: 100,
-                    maxPatternLength: 32,
-                    minMatchCharLength: 1,
-                    keys: [
-                        'number',
-                        'date_invoice'
-                    ]
-                })
-            },
-            fuzzySearch() {
-                this.results = this.fuse.search(this.search)
-            },
-            ...mapActions([
-                'filterInvoices'
-            ])
-        },
-        watch: {
-            invoices() {
-                this.initFuse()
-            },
-            search() {
-                this.fuzzySearch()
-            },
-            results() {
-                this.filterInvoices(this.results)
-            }
-        },
-        data() {
-            return {
-                search: '',
-                fuse: null,
-                results: []
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .invoice-searcher
-        width: 100%
-        height: 35px
-
-        input
-            width: 100%
-            height: inherit
-            text-align: center
-            border-radius: 0
-            font:
-                size: 11pt
-                style: normal
-                weight: bold
-</style>

src/components/move/MoveContainer/MoveCard.vue

@@ -1,162 +0,0 @@
-<template lang="pug">
-    .move-card-wrapper(@click="selectMoveline(item)" )
-        .move-card(v-bind:class="{'move-card-disable': moveDisable() }")
-            h2.move-maturity Vencimiento {{ getDate() }}
-            .move-debit-wrapper
-                h2.move-debit-label Total
-                h2.move-debit  {{ getDebit() }} {{ getSymbol() }}
-            .move-residual-wrapper
-                h2.move-residual-label Saldo
-                h2.move-residual {{ getResidual() }} {{ getSymbol() }}
-        .move-tag(v-if="isMaturity()")
-            h2.move-tag-label Vencida
-</template>
-
-<script>
-    import  {mapGetters, mapActions } from 'vuex'
-
-    export default {
-        props: {
-            item: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
-            }
-        },
-        computed: mapGetters ([
-            'selectedPartner',
-            'selectedMoveline',
-            'haSelectedMoveline',
-            'selectedInvoices',
-            'moveLines'
-        ]),
-        methods: {
-            ...mapActions([
-                'selectMoveline'
-            ]),
-            moveDisable() {
-                let date_maturity = moment(this.item.date_maturity).valueOf()
-                let dates = this.moveLines.map(item => { return moment(item.date_maturity).valueOf()})
-                return dates.findIndex(item => item >= date_maturity) !== 0 ? true : false
-            },
-            getDate() {
-                return !!this.item.date_maturity ? moment(this.item.date_maturity).format("DD-MM-YYYY") : ''
-            },
-            getResidual() {
-                return !!this.item.amount_residual ? accounting.format(this.item.amount_residual, 0,'.', ',') : '0'
-            },
-            getDebit() {
-                return !!this.item.debit ? accounting.format(this.item.debit, 0,'.', ',') : '0'
-            },
-            isMaturity() {
-                return this.selectedPartner.date_server > this.item.date_maturity ? this.item.date_maturity : false
-            },
-            getSymbol() {
-                return this.selectedInvoices.currency_symbol
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-card-wrapper
-        width: 260px
-        height: 140px
-        margin: 10px 8px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-
-        .move-card
-            width: 100%
-            height: 100%
-            position: absolute
-
-            &.move-card-disable
-                background: #e6e6e6
-
-            .move-maturity
-                width: 240px
-                height: 30px
-                margin: 10px 9px 0px 9px
-                float: left
-                padding-left: 5px
-                text-align: center
-                font:
-                    size: 20px
-                    weight: bold
-
-            .move-debit-wrapper
-                width: 240px
-                height: 40px
-                border-bottom: 1px solid #d3d3d3
-                margin: 50px 8px 0px 8px
-                position: absolute
-
-                .move-debit
-                    width: 150px
-                    height: 35px
-                    margin-top: 4px
-                    padding:
-                        top: 5px
-                        right: 10px
-                    float: right
-                    text-align: right
-                    font:
-                        size: 12pt
-
-                .move-debit-label
-                    width: 90px
-                    height: 35px
-                    font-size: 12pt
-                    float: left
-                    margin-top: 4px
-                    padding-top: 5px
-                    color: #6d6973
-
-            .move-residual-wrapper
-                width: 240px
-                height: 40px
-                border-bottom: 1px solid #d3d3d3
-                margin: 90px 8px 0px 8px
-                position: absolute
-
-                .move-residual
-                    width: 150px
-                    height: 35px
-                    margin-top: 4px
-                    padding:
-                        top: 5px
-                        right: 10px
-                    float: right
-                    text-align: right
-                    font:
-                        size: 12pt
-
-                .move-residual-label
-                    width: 90px
-                    height: 35px
-                    font-size: 12pt
-                    float: left
-                    margin-top: 4px
-                    padding-top: 5px
-                    color: #6d6973
-
-        .move-tag
-            width: 240px
-            height: 120px
-            margin: 10px
-            position: absolute
-
-            .move-tag-label
-                width: 238px
-                height: 46px
-                text-align: center
-                margin-top: 30px
-                color: rgba(236, 0, 34, 0.15)
-                transform: rotate(-18deg)
-                font:
-                    size: 46pt
-
-</style>

src/components/move/MoveContainer/MoveContainer.vue

@@ -1,23 +0,0 @@
-<template lang="pug">
-    .move-container
-        move-grid
-</template>
-
-<script>
-
-    import MoveGrid from '@/components/move/MoveContainer/MoveGrid'
-
-    export default {
-        components: {
-            MoveGrid
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-container
-        width: calc(100% - 500px)
-        height: 100%
-        padding-right: 5px
-        display: inline-block
-</style>

src/components/move/MoveContainer/MoveGrid.vue

@@ -1,32 +0,0 @@
-<template lang="pug">
-    .move-grid-wrapper
-        .move-grid
-            move-card(v-for="line in moveLines" :key="line" :item="line")
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-    import MoveCard from '@/components/move/MoveContainer/MoveCard'
-
-    export default {
-        components: {
-            MoveCard
-        },
-        computed: mapGetters([
-            'moveLines'
-        ])
-
-    }
-</script>
-
-<style lang="sass">
-    .move-grid-wrapper
-        width: 100%
-        height: calc(100% - 100px)
-        margin-top: 15px
-        overflow-y: auto
-
-        .move-grid
-            width: 100%
-            height: 470px
-</style>

src/components/move/MoveLinesContainer/MoveLinesContainer.vue

@@ -1,38 +0,0 @@
-<template lang="pug">
-    .payments-container
-        move-lines-items
-        h3.payments-container-title Total
-        move-lines-total
-</template>
-
-<script>
-
-    import MoveLinesTotal from '@/components/move/MoveLinesContainer/MoveLinesTotal'
-    import MoveLinesItems from '@/components/move/MoveLinesContainer/MoveLinesItems'
-
-    export default {
-        components: {
-            MoveLinesItems,
-            MoveLinesTotal
-        }
-    }
-</script>
-
-<style lang="sass">
-    .payments-container
-        width: 500px
-        height: calc(100% - 50px)
-        border-left: 1px solid #d3d3d3
-        padding-left: 10px
-        display: inline-block
-        vertical-align: top
-
-        .payments-container-title
-            float: left
-            padding-left: 15px
-            margin-bottom: 0
-            color: #d3d3d3
-            font:
-                size: 14pt
-
-</style>

src/components/move/MoveLinesContainer/MoveLinesItem.vue

@@ -1,111 +0,0 @@
-<template lang="pug">
-    li.move-lines-item
-        h3.move-lines-item-maturity Vencimiento {{ getDateMaturity()  }}
-        span.move-lines-item-subtotal {{ formatTotal() }} {{ getSymbol() }}
-        .move-lines-item-options-wrapper(class="fa fa-trash" @click="remove(item)" v-bind:class="{'fa-trash-disable': lineDisable()}")
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        props: {
-            item: {
-                type: Object,
-                required: true,
-                default: () => {
-                    return {}
-                }
-            }
-        },
-        computed: mapGetters([
-            'selectedInvoices',
-            'addMove'
-        ]),
-        methods: {
-            remove(item) {
-                this.removeLine(item)
-            },
-            getDateMaturity() {
-                return moment(this.item.date_maturity).format("DD-MM-YYYY")
-            },
-            lineDisable(){
-                let dateMax = moment(moment.max(this.addMove.map(item => { return moment(item.date_maturity)}))).valueOf()
-                return dateMax > moment(this.item.date_maturity).valueOf() ? true : false
-            },
-            formatTotal() {
-                return accounting.format(this.item.amount_residual,0,'.',',')
-            },
-            getSymbol() {
-                return this.selectedInvoices.currency_symbol
-            },
-            ...mapActions([
-                'removeLine'
-            ])
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-lines-item
-        width: 100%
-        height: 50px
-        list-style: none outside none
-        border-bottom: 1px solid #d3d3d3
-        box-sizing: border-box
-        position: relative
-
-        &:nth-child(1)
-            border-top: 1px solid #d3d3d3
-
-        &:hover
-            transition-duration: 1s
-            border-bottom: 2px solid #7c7bad
-
-        .move-lines-item-maturity
-            width: 220px
-            height: 30px
-            margin: 12px 0 5px 0
-            float: left
-            padding-left: 15px
-            font:
-                size: 10pt
-
-        .move-lines-item-subtotal
-            width: 165px
-            height: 30px
-            margin-top: 12px
-            padding-right: 15px
-            text-align: right
-            float: left
-            font:
-                size: 10pt
-                weight: bold
-
-        .move-lines-item-options-wrapper
-            width: 50px
-            height: 30px
-            margin-top: 12px
-            padding-right: 15px
-            float: right
-            display: flex
-            justify-content: center
-
-            &:hover
-                cursor: pointer
-
-            &.fa
-                padding-left: 2px
-                line-height: 20px
-                font-size: 17px
-
-            &.fa-trash:hover
-                color: #f44336
-
-            &.fa-trash-disable
-                color: #e6e6e6
-
-                &:hover
-                    color: #e6e6e6
-
-</style>

src/components/move/MoveLinesContainer/MoveLinesItems.vue

@@ -1,27 +0,0 @@
-<template lang="pug">
-    .move-lines-items-wrapper
-        move-lines-item(v-for="item in addMove" :key="item" :item="item")
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-    import MoveLinesItem from '@/components/move/MoveLinesContainer/MoveLinesItem'
-
-    export default {
-        components: {
-            MoveLinesItem
-        },
-        computed: mapGetters([
-            'addMove'
-        ])
-    }
-</script>
-
-<style lang="sass">
-    .move-lines-items-wrapper
-        width: 100%
-        height: 230px
-        border: 1px solid #d3d3d3
-        overflow-y: auto
-        overflow-x: hidden
-</style>

src/components/move/MoveLinesContainer/MoveLinesTotal.vue

@@ -1,32 +0,0 @@
-<template lang="pug">
-    .move-line-total-wrapper
-        .move-line-total
-            move-lines-total-item
-</template>
-
-<script>
-
-    import MoveLinesTotalItem from '@/components/move/MoveLinesContainer/MoveLinesTotalItem'
-
-    export default {
-        components: {
-            MoveLinesTotalItem
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-line-total-wrapper
-        width: 100%
-        height: 100%
-        margin-top: 10px
-        border: 1px solid #d3d3d3
-        overflow-y: auto
-        overflow-x: hidden
-
-        .move-line-total
-            width: 100%
-            height: 200px
-
-
-</style>

src/components/move/MoveLinesContainer/MoveLinesTotalItem.vue

@@ -1,42 +0,0 @@
-<template lang="pug">
-    .move-line-total-item
-        h2
-            small {{ getSymbol() }}
-            |
-            | {{ formatTotal() }}
-</template>
-
-<script>
-
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        computed: mapGetters([
-            'total',
-            'selectedInvoices'
-        ]),
-        methods: {
-            formatTotal() {
-                return accounting.format(this.total,0,'.',',')
-            },
-            getSymbol() {
-                return !!this.selectedInvoices ? this.selectedInvoices.currency_symbol : ''
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-line-total-item
-        width: 100%
-        height: 50px
-        border-bottom: 1px solid #dedede
-
-        h2
-            width: 100%
-            height: 40px
-            margin: 0
-            font-size: 25pt
-            padding-left: 15px
-
-</style>

src/components/move/MoveStep.vue

@@ -1,22 +0,0 @@
-<template lang="pug">
-    .payments-step
-        .move-step
-            move-Container
-            move-lines-container
-</template>
-
-<script>
-
-    import MoveContainer from '@/components/move/MoveContainer/MoveContainer'
-    import MoveLinesContainer from '@/components/move/MoveLinesContainer/MoveLinesContainer'
-
-    export default {
-        components: {
-            MoveContainer,
-            MoveLinesContainer
-        },
-    }
-</script>
-
-<style lang="sass">
-</style>

src/components/partner/PartnerCard.vue

@@ -1,84 +0,0 @@
-<template lang="pug">
-    .partner-card(@click="selectPartner(item)" v-bind:class="{ 'selected-partner': isSelectedPartner() }")
-        h2.partner-name {{ item.name }}
-        img.partner-photo(:src="this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/base/static/src/img/avatar.png'")
-        h2.partner-ruc C.I. {{ getRuc() }}
-</template>
-
-<script>
-    import { mapActions, mapGetters } from 'vuex'
-
-    export default {
-        props: {
-            item: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
-            }
-        },
-        computed: mapGetters([
-            'selectedPartner',
-            'hasSelectedPartner'
-        ]),
-        methods: {
-            isSelectedPartner() {
-                return this.hasSelectedPartner ? this.item.id === this.selectedPartner.id : false
-            },
-            getRuc() {
-                    return this.item.ruc ? this.item.ruc : ''
-            },
-            ...mapActions([
-                'selectPartner',
-            ])
-        }
-    }
-</script>
-
-<style lang="sass">
-    .partner-card
-        width: 130px
-        height: 160px
-        margin: 5px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-
-        &.selected-partner
-            transition-duration: 0.3s
-            border-bottom: 3px solid #7c7bad
-
-        &:hover
-            cursor: pointer
-
-        .partner-name
-            width: 100%
-            height: 30px
-            font-size: 9pt
-            text-align: center
-            margin-top: 10px
-            position: absolute
-            top: 0
-
-        .partner-photo
-            width: 80px
-            height: 80px
-            margin: 0
-            border: none
-            position: absolute
-            top: 50%
-            left: 50%
-            margin-right: -50%
-            transform: translate(-50%, -50%)
-
-        .partner-ruc
-            width: 100%
-            height: 30px
-            font-size: 9pt
-            text-align: center
-            margin: 0px
-            padding-top: 5px
-            position: absolute
-            bottom: 0
-
-</style>

src/components/partner/PartnerDetails.vue

@@ -1,102 +0,0 @@
-<template lang="pug">
-    .partner-details
-        form.partner-form
-            .form-separator
-                h3 Detalles Generales
-                hr
-            .partner-form-item
-                label.partner-form-label Nombre
-                input.partner-form-imput(readonly :value="selectedPartner.name")
-            .partner-form-item
-                label.partner-form-label R.U.C./C.I.
-                input.partner-form-imput(readonly :value="getRuc()")
-            .partner-form-item
-                label.partner-form-label Teléfono
-                input.partner-form-imput(readonly :value="getPhone()")
-            .partner-form-item
-                label.partner-form-label Celular
-                input.partner-form-imput(readonly :value="getMobile()")
-            .partner-form-item
-                label.partner-form-label Email
-                input.partner-form-imput(readonly :value="getEmail()")
-            .form-separator
-                h3 Finanzas
-                hr
-            .partner-form-item
-                label.form-label-finazas Total por cobrar
-                input.form-imput-finazas(readonly :value="getCredit()")
-            .partner-form-item
-                label.form-label-finazas Crédito concedido
-                input.form-imput-finazas(readonly :value="getCreditLimit()")
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-    export default {
-
-        computed: mapGetters([
-            'hasSelectedPartner',
-            'selectedPartner'
-        ]),
-        methods: {
-            getRuc(){
-                return this.hasSelectedPartner && !!this.selectedPartner.ruc ? this.selectedPartner.ruc : ''
-            },
-            getPhone(){
-                return this.hasSelectedPartner && !!this.selectedPartner.phone ? this.selectedPartner.phone : ''
-            },
-            getMobile(){
-                return this.hasSelectedPartner && !!this.selectedPartner.mobile ? this.selectedPartner.mobile : ''
-            },
-            getEmail(){
-                return this.hasSelectedPartner && !!this.selectedPartner.email ? this.selectedPartner.email :''
-            },
-            getCredit(){
-                return this.hasSelectedPartner && !!this.selectedPartner.credit ? accounting.format(this.selectedPartner.credit, 0,'.', ',') : '0'
-            },
-            getCreditLimit(){
-                return this.hasSelectedPartner && !!this.selectedPartner.credit_limit ? accounting.format(this.selectedPartner.credit_limit, 0,'.', ',') : '0'
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .partner-details
-        width: 100%
-        height: 100%
-
-        .partner-form
-            width: 100%
-            height: 100%
-
-            .form-separator
-                h3
-                    color: #9e9e9e
-                    font-size: 8pt
-                hr
-                    margin-top: 5px
-
-            .partner-form-item
-                width: 100%
-                height: 40px
-                margin-bottom: 5px
-
-                .partner-form-label, .form-label-finazas
-                    width: 80px
-                    height: 20px
-
-                .partner-form-imput, .form-imput-finazas
-                    width: 220px
-                    height: 20px
-                    border-radius: 0
-
-
-                .form-label-finazas
-                    width: 150px
-
-                .form-imput-finazas
-                    width: 150px
-                    text-align: center
-
-</style>

src/components/partner/PartnerDetailsInvoices.vue

@@ -1,117 +0,0 @@
-<template lang="pug">
-    .customer-form-item
-        label(v-for="(invoice, index) in partnerInvoices" :key="invoice")
-            span.form-label Factura
-            label.form-label-number {{ invoice.number }}
-            .table-header
-                table
-                    tbody
-                        tr
-                            td Vencimiento
-                            td Total
-                            td Saldo
-            .table-body
-                table
-                    tbody
-                        tr(v-for="moveline in partnerMoveLine[index]" :key="moveline")
-                            td {{ formatDate(moveline.date_maturity) }}
-                            td {{ formatNumber(moveline.debit) }}
-                            td {{ formatNumber(moveline.amount_residual) }}
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        computed: mapGetters([
-            'hasSelectedPartner',
-            'selectedPartner',
-            'partnerInvoices',
-            'partnerMoveLine'
-        ]),
-        methods:{
-            formatNumber(valor){
-                return accounting.format(valor, 0,'.', ',')
-            },
-            formatDate(Fecha){
-                return moment(Fecha).format('DD-MM-YYYY');
-            },
-            verifyDate(){
-                return ".tr-Expired"
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .customer-form-item
-
-        .form-label
-            width: 65px
-            height: 35px
-            font-size: 14px
-            font-weight: bold
-
-        .form-label-number
-            margin: 0px 0px 5px 9px
-            font-size: 14px
-            color: #0288d1
-
-        .table-header
-            table
-                width: 308px
-                height: 30px
-                margin: 0px
-                font-size: 10pt
-                font-weight: bold
-
-                tbody
-                    tr
-                        line-height: 30px
-                        border-top: 1px solid #d3d3d3
-                        border-bottom: 1px solid #d3d3d3
-
-                        td
-                            &:nth-child(1)
-                                width: 110px
-                                text-align: left
-
-                            &:nth-child(2)
-                                width: 100px
-                                text-align: center
-
-                            &:nth-child(3)
-                                width: 100px
-                                text-align: center
-
-        .table-body
-            width: 310px
-
-            table
-                width: 100%
-                margin: 6px 0px
-                font-size: 12px
-                color: #727575
-
-                tbody
-                    tr
-                        td
-                            &:nth-child(1)
-                                width: 110px
-                                text-align: left
-
-                            &:nth-child(2)
-                                width: 100px
-                                text-align: right
-
-                            &:nth-child(3)
-                                width: 100px
-                                text-align: right
-
-                        .tr-unexpired
-                            color: #727575
-
-                        .tr-Expired
-                            color: red
-
-</style>

src/components/partner/PartnerGrid.vue

@@ -1,40 +0,0 @@
-<template lang="pug">
-    .partner-grid-wrapper
-        .partner-grid
-            partner-card(v-for="partner in partners" :key="partner" :item="partner")
-        partner-no-found(v-if="isLoaded")
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-    import PartnerCard from '@/components/partner/PartnerCard'
-    import PartnerNoFound from '@/components/partner/PartnerNoFound'
-
-    export default {
-        components: {
-            PartnerCard,
-            PartnerNoFound
-        },
-        computed: mapGetters([
-            'partners',
-            'isLoaded'
-        ]),
-        methods: {
-            noFoundCustomers() {
-                return this.partners.length === 0 ? true : false
-            }
-        }
-    }
-</script>
-
-<style lang="sass">
-    .partner-grid-wrapper
-        width: 100%
-        height: calc(100% - 100px)
-        margin-top: 15px
-        overflow-y: auto
-
-        .partner-grid
-            width: 100%
-
-</style>

src/components/partner/PartnerGridDetails.vue

@@ -1,44 +0,0 @@
-<template lang="pug">
-    .partner-details-invoice
-        from.partner-form
-            .form-separator
-                h3 Detalles de Cuenta
-                hr
-            .partner-form-item
-                partner-details
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-    import PartnerDetails from '@/components/partner/PartnerDetails'
-
-    export default {
-        components: {
-            PartnerDetails
-        },
-    }
-</script>
-
-<style lang="sass">
-    .partner-details-invoice
-        width: 100%
-        height: 100%
-        margin: 0px 4px 0px 0px
-
-        .partner-form
-            width: 100%
-            height: 100%
-
-            .form-separator
-                h3
-                    color: #9e9e9e
-                    font-size: 16px
-                hr
-                    margin-top: 3px
-
-            .partner-form-item
-                width: 100%
-                height: 410px
-                overflow-y: auto
-                margin: 0px
-</style>

src/components/partner/PartnerNoFound.vue

@@ -1,58 +0,0 @@
-<template lang="pug">
-    .customers-no-found(v-bind:class="{'customers-found': noFoundCustomers() }")
-        .customers-no-found-wrapper
-            i.customers-no-found-icon.fa.fa-frown-o.fa-5x
-            .customers-no-found-label
-                h3 Ops, no tienes nada que cobrar
-</template>
-
-<script>
-
-    import { mapGetters } from 'vuex'
-
-    export default {
-        computed: mapGetters([
-            'partners'
-        ]),
-        methods: {
-            noFoundCustomers() {
-                return this.partners.length === 0 ? true : false
-            }
-        }
-    }
-</script>
-<style lang="sass">
-    .customers-no-found
-        display: none
-        height: 100%
-        align-items: center
-        justify-content: center
-        // transform: translate3d(0, 5000px, 0)
-        // background: #d3d3d3s
-
-        &.customers-found
-            display: flex
-        //     // transform: translate3d(0, 0px, 0)
-
-        .customers-no-found-wrapper
-            width: 500px
-            height: 100px
-
-            .customers-no-found-label
-                width: 380px
-                height: calc(100% - 20px)
-                margin: 10px
-                float: right
-                text-align: center
-                h3
-                    color: #4c4c4c
-                    font-size: 20pt
-
-            .customers-no-found-icons
-                width: 80px
-                height: calc(100% - 20px)
-                margin: 10px
-                float: left
-                color: #4c4c4c
-
-</style>

src/components/partner/PartnerSearcher.vue

@@ -1,79 +0,0 @@
-<template lang="pug">
-    .partner-searcher
-        input(type="text" placeholder="Buscar un cliente" v-model="search")
-</template>
-
-<script>
-    import Fuse from 'fuse.js'
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        computed: mapGetters([
-            'partners'
-        ]),
-        methods: {
-            initFuse() {
-                if (this.fuse) {
-                    this.fuse.setCollection(this.partners)
-                    return
-                }
-
-                this.fuse = new Fuse(this.partners, {
-                    shouldSort: true,
-                    threshold: 0.4,
-                    location: 0,
-                    distance: 100,
-                    maxPatternLength: 32,
-                    minMatchCharLength: 1,
-                    keys: [
-                        'ruc',
-                        'name',
-                        'phone',
-                        'mobile',
-                        'email',
-                        'categories.name'
-                    ]
-                })
-            },
-            fuzzySearch() {
-                this.results = this.fuse.search(this.search)
-            },
-            ...mapActions([
-                'filterCustomers'
-            ])
-        },
-        watch: {
-            partners() {
-                this.initFuse()
-            },
-            search() {
-                this.fuzzySearch()
-            },
-            results() {
-                this.filterCustomers(this.results)
-            }
-        },
-        data() {
-            return {
-                search: '',
-                fuse: null,
-                results: []
-            }
-        }
-    }
-</script>
-<style lang="sass">
-    .partner-searcher
-        width: 100%
-        height: 35px
-
-        input
-            width: 100%
-            height: inherit
-            text-align: center
-            border-radius: 0
-            font:
-                size: 11pt
-                style: normal
-                weight: bold
-</style>

src/components/partner/PartnerStep.vue

@@ -1,55 +0,0 @@
-<template lang="pug">
-    .payments-step
-        .partner-step
-            .partner-left
-                partner-searcher
-                partner-grid
-            transition(name="slide-fade")
-                .partner-right(v-if="hasSelectedPartner")
-                    partner-details
-</template>
-
-<script>
-
-    import { mapGetters } from 'vuex'
-    import PartnerSearcher from '@/components/partner/PartnerSearcher'
-    import PartnerGrid from '@/components/partner/PartnerGrid'
-    import PartnerDetails from '@/components/partner/PartnerDetails'
-
-    export default {
-        components: {
-            PartnerSearcher,
-            PartnerGrid,
-            PartnerDetails
-        },
-        computed: mapGetters([
-            'hasSelectedPartner'
-        ])
-    }
-</script>
-<style lang="sass">
-    .partner-step
-        width: 100%
-        height: 100%
-        display: flex
-
-        .partner-left, .partner-right
-            height: 100%
-
-        .partner-left
-            width: 100%
-
-        .partner-right
-            width: 400px
-            margin: 0 15px
-
-        .slide-fade-enter-active
-            transition: all .3s ease
-
-        .slide-fade-leave-active
-            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
-
-        .slide-fade-enter, .slide-fade-leave-to
-            transform: translateX(10px)
-            opacity: 0
-</style>

src/components/payment/VoucherTicket.vue

@@ -1,213 +0,0 @@
-<template lang="pug">
-    .voucher-ticket
-        .voucher-ticket-wrapper
-            form.voucher-ticket-from
-                .voucher-ticket-from-separator
-                    h3 Detalles de pagos
-                    hr
-                .voucher-ticket-from-item
-                    label.voucher-ticket-from-label Cliente
-                    label.voucher-ticket-from-input {{ getPartner() }}
-                .voucher-ticket-from-item
-                    label.voucher-ticket-from-label Factura número
-                    label.voucher-ticket-from-input {{ getInvoice() }}
-                .voucher-ticket-from-grid-header
-                    label.voucher-ticket-from-grid-header-left Vencimiento
-                    label.voucher-ticket-from-grid-header-right Monto
-                .voucher-ticket-from-grid
-                    .voucher-ticket-from-grid-item(v-for="(line, index) in addMove")
-                        label.voucher-ticket-from-grid-item-left {{ formatDate(line.date_maturity) }}
-                        label.voucher-ticket-from-grid-item-right {{ formatNumber(line.amount_residual) }} {{ getSymbol() }}
-                .voucher-ticket-from-item-total
-                    label.voucher-ticket-from-label-total Total
-                    label.voucher-ticket-from-input-total {{ getTotal() }}
-                .voucher-ticket-from-item-total
-                    label.voucher-ticket-from-label-total Pagado
-                    label.voucher-ticket-from-input-total {{ getpagado() }}
-                .voucher-ticket-from-item-total
-                    label.voucher-ticket-from-label-total Saldo
-                    label.voucher-ticket-from-input-total {{ formatResidual() }}
-</template>
-
-<script>
-
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        computed: {
-            ...mapGetters([
-                'selectedPartner',
-                'selectedInvoices',
-                'addMove',
-                'total',
-                'paymentAmount',
-                'companySymbol'
-            ])
-        },
-        methods: {
-            getPartner() {
-                return !!this.selectedPartner ? this.selectedPartner.display_name : ''
-            },
-            getInvoice() {
-                return !!this.selectedInvoices ? this.selectedInvoices.number : ''
-            },
-            formatDate(date) {
-                return moment(date).format('DD-MM-YYYY');
-            },
-            formatNumber(amount) {
-                return accounting.format(amount, 0,'.', ',')
-            },
-            getSymbol() {
-                return this.selectedInvoices ? this.selectedInvoices.currency_symbol : ''
-            },
-            getTotal() {
-                return accounting.formatMoney(this.total,this.companySymbol, 0,'.', ',')
-            },
-            getpagado() {
-                let pagado = this.paymentAmount
-                pagado = this.paymentAmount <= this.total ? this.paymentAmount : this.total
-                return accounting.formatMoney(pagado,this.companySymbol, 0,'.', ',')
-            },
-            formatResidual() {
-                let residual = 0
-                residual = this.paymentAmount <= this.total ? this.total - this.paymentAmount : 0
-                return accounting.formatMoney(residual, this.companySymbol, 0,'.',',')
-            },
-        }
-    }
-</script>
-
-<style lang="sass">
-    .voucher-ticket
-        width: 500px
-        height: 100%
-        font-size: 8pt
-        display: flex
-
-        .voucher-ticket-wrapper
-            width: 100%
-            height: 460px
-            margin: 10px
-            border: 1px solid #d3d3d3
-
-            .voucher-ticket-from
-                width: 100%
-                height: 100%
-
-                .voucher-ticket-from-separator
-                    h3
-                        color: #9e9e9e
-                        font:
-                            size: 16pt
-                        margin-left: 10px
-                        margin-right: 10px
-                        text-align: center
-                    hr
-                        margin-top: 3px
-                        margin-left: 10px
-                        margin-right: 10px
-
-                .voucher-ticket-from-item
-                    width: 100%
-                    height: 40px
-                    margin-bottom: 5px
-
-                    .voucher-ticket-from-label
-                        width: 150px
-                        height: 35px
-                        font:
-                            size: 10pt
-                            weight: bold
-                        padding-left: 10px
-
-                    .voucher-ticket-from-input
-                        width: 290px
-                        height: 25px
-                        font:
-                            size: 10pt
-                            weight: bold
-                        border-left: 0px
-                        border-top: 0px
-                        border-right: 0px
-                        border-bottom: 1px solid #dedede
-
-                .voucher-ticket-from-grid-header
-                    width: calc(100% - 20px)
-                    height: 30px
-                    margin: 0px 10px
-                    border: 1px solid #d3d3d3
-                    background: #f5f5f5
-
-                    .voucher-ticket-from-grid-header-left, .voucher-ticket-from-grid-header-right
-                        width: 213px
-                        height: 30px
-                        font:
-                            size: 10pt
-                        padding-left: 10px
-                        margin-top: 5px
-
-                    .voucher-ticket-from-grid-header-left
-                        margin-left: 5px
-                        text-align: left
-
-                    .voucher-ticket-from-grid-header-right
-                        margin-right: 5px
-                        text-align: center
-
-                .voucher-ticket-from-grid
-                    width: calc(100% - 20px)
-                    height: 160px
-                    overflow-y: auto
-                    margin: 0px 10px
-                    border: 1px solid #d3d3d3
-
-                    .voucher-ticket-from-grid-item
-                        width: calc(100% - 10px )
-                        height: 30px
-                        padding-top: 1px
-                        border-bottom: 1px solid #dedede
-                        margin-left: 5px
-                        margin-right: 5px
-
-                        .voucher-ticket-from-grid-item-left, .voucher-ticket-from-grid-item-right
-                            width: 205px
-                            height: 30px
-                            font:
-                                size: 10pt
-                            padding-left: 10px
-                            margin-top: 5px
-
-                        .voucher-ticket-from-grid-item-left
-                            text-align: left
-
-                        .voucher-ticket-from-grid-item-right
-                            text-align: right
-                            padding-right: 15px
-
-
-                .voucher-ticket-from-item-total
-                    width: 100%
-                    height: 25px
-
-                    .voucher-ticket-from-label-total
-                        width: 300px
-                        height: 25px
-                        margin-top: 15px
-                        font:
-                            size: 10pt
-                            weight: bold
-                        text-align: right
-                        padding-right: 15px
-
-                    .voucher-ticket-from-input-total
-                        width: 150px
-                        height: 25px
-                        margin-top: 15px
-                        text-align: right
-                        padding-right: 15px
-                        font:
-                            size: 10pt
-                            weight: bold
-                        border-bottom: 1px solid #dedede
-
-</style>

src/components/payment/method/MethodPayment.vue

@@ -1,132 +0,0 @@
-<template lang="pug">
-    form.method-payment
-        .method-form-separator
-            h3 Detalle de Cliente
-            hr
-        .method-form-item
-            label.method-form-label Cliente
-            input.method-form-input(readonly :value="getPartner()")
-        .method-form-separator
-            h3 Detalle de pago
-            hr
-        .method-form-item
-            label.method-form-label Método de pago
-            select.method-form-input(v-model="journal")
-                option(v-for="journal in paymentsJournals" :value="journal") {{ journal.display_name}}
-        .method-form-item
-            label.method-form-label Total
-            input.method-form-input-number(readonly :value="getTotal()")
-        .method-form-item
-            label.method-form-label Monto a Pagar
-            input.method-form-input-number(:value="paid" v-model="paid" autofocus)
-        .method-form-item
-            label.method-form-label Monto a Devolver
-            input.method-form-input-number(readonly :value="formatResidual()")
-</template>
-<script>
-
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-        computed: {
-            journal: {
-                get() {
-                    return this.selectedPaymentsJournals
-                },
-                set(value) {
-                    this.selectPaymentsJournal(value)
-                }
-            } ,
-            paid:{
-                get() {
-                    return accounting.formatMoney(this.paymentAmount, this.companySymbol,0,'.',',')
-                },
-                set(value) {
-                    value =  accounting.unformat(value,',')
-                    this.changePaymentAmount(value)
-                    this.residualCalculate()
-                }
-            },
-            ...mapGetters([
-                'selectedPartner',
-                'selectedPaymentsJournals',
-                'total',
-                'paymentsJournals',
-                'companySymbol',
-                'paymentAmount'
-            ])
-        },
-        methods: {
-            getPartner() {
-                return !!this.selectedPartner ? this.selectedPartner.display_name : ''
-            },
-            getPartnerRuc() {
-                return !!this.selectedPartner ? this.selectedPartner.ruc : ''
-            },
-            getTotal() {
-                return accounting.formatMoney(this.total,this.companySymbol,0,'.',',')
-            },
-            residualCalculate() {
-                this.residual = this.paymentAmount >= this.total ? this.paymentAmount - this.total : 0
-            },
-            formatResidual() {
-                return accounting.formatMoney(this.residual, this.companySymbol, 0,'.',',')
-            },
-            ...mapActions([
-                'selectPaymentsJournal',
-                'changePaymentAmount'
-            ])
-        },
-        data() {
-            return {
-                residual: 0
-            }
-        },
-        mounted() {
-            this.changePaymentAmount(0)
-        }
-
-    }
-</script>
-
-<style lang="sass">
-    .method-payment
-        width: calc(100% - 500px)
-        height: 100%
-        display: inline-block
-        background: #f5f5f5
-        vertical-align: top
-        padding: 15px 35px
-        margin-right: 50px
-        border-left: 1px solid #d3d3d3
-
-        .method-form-separator
-            h3
-                color: #9e9e9e
-                font:
-                    size: 8pt
-            hr
-                margin-top: 5px
-
-        .method-form-item
-            width: 100%
-            height: 45px
-            margin-bottom: 15px
-
-            .method-form-label
-                width: 250px
-                height: 45px
-                font:
-                    size: 14pt
-
-            .method-form-input, .method-form-input-number
-                width: 350px
-                height: 45px
-                font:
-                    size: 14pt
-                border-radius: 0
-
-            .method-form-input-number
-                text-align: right
-
-</style>

src/components/invoice/InvoiceStep.vue → src/components/steps/InvoiceStep.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
     .payments-step
         .invoice-step
-            invoice-searcher
-            invoice-grid
+            //- invoice-searcher
+            //- invoice-grid
 </template>
 
 <script>
-    import InvoiceSearcher from '@/components/invoice/InvoiceSearcher'
-    import InvoiceGrid from '@/components/invoice/InvoiceGrid'
+    // import InvoiceSearcher from '@/components/invoice/InvoiceSearcher'
+    // import InvoiceGrid from '@/components/invoice/InvoiceGrid'
 
     export default {
         components: {
-            InvoiceSearcher,
-            InvoiceGrid
+            // InvoiceSearcher,
+            // InvoiceGrid
         }
     }
 </script>
@@ -23,5 +23,5 @@
         height: 100%
         padding-right: 5px
         display: inline-block
-        
+
 </style>

src/components/payment/MethodPaymentStep.vue → src/components/steps/MethodPaymentStep.vue

@@ -1,21 +1,21 @@
 <template lang="pug">
     .payments-step
         .method-payment-step
-            voucher-ticket
-            method-payment
+            //- voucher-ticket
+            //- method-payment
 </template>
 
 <script>
 
     import { mapGetters, mapActions } from 'vuex'
 
-    import VoucherTicket from '@/components/payment/VoucherTicket'
-    import MethodPayment from '@/components/payment/method/MethodPayment'
+    // import VoucherTicket from '@/components/payment/VoucherTicket'
+    // import MethodPayment from '@/components/payment/method/MethodPayment'
 
     export default {
         components: {
-            VoucherTicket,
-            MethodPayment
+            // VoucherTicket,
+            // MethodPayment
         }
     }
 </script>

src/components/steps/MoveStep.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+    .payments-step
+        .move-step
+            //- move-Container
+            //- move-lines-container
+</template>
+
+<script>
+
+    // import MoveContainer from '@/components/move/MoveContainer/MoveContainer'
+    // import MoveLinesContainer from '@/components/move/MoveLinesContainer/MoveLinesContainer'
+
+    export default {
+        components: {
+            // MoveContainer,
+            // MoveLinesContainer
+        },
+    }
+</script>
+
+<style lang="sass">
+</style>

src/components/steps/PartnerStep.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+    .payments-step
+        .partner-step
+            //- .partner-left
+            .partner-selector
+                searcher(:items='customers' :keys="['name']")
+                card-grid(:items='customers' :loading='loadingCustomers' @onSelect='selectPaymentsCustomer')
+            transition(name="slide-fade")
+                customer-details(v-if='!!selectedCustomer' :customer='selectedCustomer' :currency='currencyCompany')
+</template>
+
+<script>
+
+    import { mapGetters, mapActions } from 'vuex'
+    import { Searcher, CardGrid } from '@@/common'
+    import CustomerDetails from '@@/froms/CustomerDetails'
+
+    import { SELECT_PAYMENTS_CUSTOMER } from '@/constants/actionTypes'
+
+    export default {
+        components: {
+            Searcher,
+            CardGrid,
+            CustomerDetails
+        },
+        computed: mapGetters([
+            'customers',
+            'loadingCustomers',
+            'selectedCustomer',
+            'currencyCompany'
+        ]),
+        methods: mapActions([
+            SELECT_PAYMENTS_CUSTOMER
+        ])
+    }
+</script>
+
+<style lang="sass">
+    .payments-step
+        .partner-step
+            width: 100%
+            height: 100%
+            display: flex
+            .partner-selector
+                width: 100%
+                height: 100%
+            .slide-fade-enter-active
+                transition: all 300ms ease
+            .slide-fade-enter
+                transform: translateX(300px)
+                opacity: 0
+</style>

src/constants/actionTypes.js

@@ -0,0 +1,36 @@
+const PAYMENTS_NOTIFY = 'paymentsNotify'
+const INIT_PAYMENTS = 'initPayments'
+const EXPLODE_DATA = 'explodeData'
+/**
+ * [DATE]
+ */
+const INIT_PAYMENTS_DATE = 'initPaymentsDate'
+/**
+ * [USER-COMPANY-CURRENCY_COMPANY ]
+ */
+const INIT_PAYMENTS_USER = 'initPaymentsUser'
+const INIT_PAYMENTS_COMPANY = 'initPaymentsCompany'
+// const SELECT_CURRENCY_COMPANY = 'selectCurencyCompany'
+/**
+ * [CUSTOMERS]
+ */
+const INIT_PAYMENTS_CUSTOMERS = 'initPaymentsCustomers'
+const SELECT_PAYMENTS_CUSTOMER = 'selectPaymentsCustomer'
+/**
+ * [JOURNALS]
+ */
+const INIT_PAYMENTS_JOURNALS = 'initPaymentsJournals'
+/**
+ * [CURRENCIES]
+ */
+const INIT_PAYMENTS_CURRENCIES = 'initPaymentsCurrencies'
+
+
+export {
+    PAYMENTS_NOTIFY, INIT_PAYMENTS,EXPLODE_DATA,//initial
+    INIT_PAYMENTS_DATE,//date
+    INIT_PAYMENTS_USER, INIT_PAYMENTS_COMPANY,//user
+    INIT_PAYMENTS_CUSTOMERS, SELECT_PAYMENTS_CUSTOMER, //Customer
+    INIT_PAYMENTS_JOURNALS, //Journal
+    INIT_PAYMENTS_CURRENCIES //currency
+}

src/constants/mutationTypes.js

@@ -0,0 +1,41 @@
+/**
+ * [Date]
+ * @type {String}
+ */
+const SET_DATE = 'setDate'
+const SET_LOADING_DATE = 'setLoadingDate'
+/**
+ * [USER]
+ * @type {String}
+ */
+const SET_USER = 'setUser'
+const SET_LOADING_USER = 'setLoadingUser'
+const SET_SELECTED_COMPANY = 'setSelectedCompany'
+const SET_SELECTED_CURRENCY_COMPANY = 'setSelectedCurrencyCompany'
+/**
+ * [CUSTOMERS ]
+ * @type {String}
+ */
+const SET_CUSTOMERS = 'setCustomers'
+const SET_LOADING_CUSTOMERS = 'setLoadingCustomers'
+const SET_SELECTED_CUSTOMER = 'setSelectCustomer'
+/**
+ * [JOURNALS]
+ * @type {String}
+ */
+const SET_JOURNALS = 'setJournals'
+const SET_LOADING_JOURNALS = 'setLoadingJournals'
+/**
+ * [CURRENCIES]
+ * @type {String}
+ */
+const SET_CURRENCIES = 'setCurrencies'
+const SET_LOADING_CURRENCIES = 'setLoadingCurrencies'
+
+export {
+    SET_DATE, SET_LOADING_DATE, //Date
+    SET_USER, SET_LOADING_USER, SET_SELECTED_COMPANY, SET_SELECTED_CURRENCY_COMPANY,//User
+    SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SELECTED_CUSTOMER, //customer
+    SET_JOURNALS, SET_LOADING_JOURNALS, //Journal
+    SET_CURRENCIES, SET_LOADING_CURRENCIES //Currency
+}

src/constants/resourcePaths.js

@@ -0,0 +1,7 @@
+const BASE_URL = '/eiru_payments'
+
+const INIT_PAYMENTS_URL = `${BASE_URL}/init`
+
+export {
+    INIT_PAYMENTS_URL
+}

src/index.js

@@ -7,21 +7,20 @@ Vue.use(VModal)
 // Vue.config.
 Vue.config.productionTip = false
 Vue.config.silent = true
+// Vue.config.devtools = true
 
 openerp.eiru_payments = (instance, local) => {
 
 	local.PaymentsWidget = instance.Widget.extend({
 		start(){
 			this.sidebarFold()
+
 			this.vm = new Vue({
 				store,
 				el: this.el,
 				template: '<Payments />',
 				components:{
 					Payments
-				},
-				data: {
-					payments_instance: this
 				}
 			});
 		},
@@ -29,13 +28,17 @@ openerp.eiru_payments = (instance, local) => {
 			this.vm.$destroy()
 			$(this.vm.$el).remove()
 			this.vm = null
+
 			this.sidebarUnfold()
+
+			this._super.apply(this, arguments)
 		},
 		sidebarFold() {
             if (!instance.eiru_sidebar_toggler) return
             instance.eiru_sidebar_toggler.sidebar_fold()
         },
         sidebarUnfold() {
+			if (!instance.eiru_sidebar_toggler) return
             instance.eiru_sidebar_toggler.sidebar_unfold()
         }
 	})

src/store/actions.js

@@ -1,93 +1,39 @@
+import axios from 'axios'
+import { INIT_PAYMENTS_URL } from '@/constants/resourcePaths'
+import { PAYMENTS_NOTIFY, INIT_PAYMENTS, EXPLODE_DATA, INIT_PAYMENTS_DATE, INIT_PAYMENTS_USER, INIT_PAYMENTS_CUSTOMERS, INIT_PAYMENTS_JOURNALS, INIT_PAYMENTS_CURRENCIES } from '@/constants/actionTypes'
+// import { INIT_PAYMENTS, NOTIFY, INIT_DATE, INIT_USER, INIT_CUSTOMERS, INIT_JOURNALS, INIT_CURRENCIES, EXPLODE_DATA} from '@/constants/actionTypes'
+
 const actions = {
-    notify({ commit }, payload ){
-            openerp.web.notification.do_warn("Atention", payload)
+    /**
+     * [PAYMENTS_NOTIFY]
+     * @type {[type]}
+     */
+    [PAYMENTS_NOTIFY] ({ commit },payload) {
+        openerp.web.notification.do_warn('Atencion', payload)
+        return false
     },
-    initPayment({ commit , dispatch}, payload){
-
-        commit('setPaymentsInstance', payload)
-
-        let promises =[
-            dispatch('fetchPartners'),
-            dispatch('fetchPaymentsJournal'),
-            dispatch('fetchPaymentsCompany')
-        ]
-
-        Promise.all(promises).then(() => {
-            console.log('loaded')
+    /**
+     * [INIT_PAYMENTS]
+     * @param {*} param0
+     */
+    [INIT_PAYMENTS] ({ dispatch }) {
+        return axios.get(INIT_PAYMENTS_URL).then(response => {
+            dispatch('explodeData', response.data)
         }).catch(error => {
-            console.log(error)
-        })
-    },
-    // Validaciones
-    checkPartner({getters, dispatch}) {
-        return getters.hasSelectedPartner ||dispatch('notify', 'Nesesitas selecionar un cliente para continuar')
-    },
-    checkInvoice({getters, dispatch}){
-        return getters.haSelectedInvoices || dispatch('notify', 'Nesesitas selecionar una factura para continuar')
-    },
-    checkMoveLine({getters, dispatch}) {
-        return getters.moveLinesIsEmpty ||dispatch('notify', 'Necesitas seleccionar la cuota para continuar')
-    },
-    chekPaymentAmount({getters,dispatch}) {
-        return getters.paymentAmount > 0 || dispatch('notify', 'Nesesitas ingresar un monto a pagar ')
-    },
-    // Finalizar operacion
-    completePayment({ dispatch, getters, state}) {
-        let newObjet = []
-
-        return new Promise((resolve, reject) => {
-            let AccountVoucher = new openerp.web.Model('account.voucher')
-
-            AccountVoucher.call('create_from_payments',[
-                {
-                    reference : getters.selectedInvoices.number,
-                    journal_id : getters.selectedPaymentsJournals.id,
-                    company : getters.paymentsCompany.id,
-                    amount : getters.paymentAmount <= getters.total ? getters.paymentAmount : getters.total,
-                    partner_id : getters.selectedPartner.id,
-                    invoice: getters.selectedInvoices.id,
-                    line_cr_ids : getters.addMove.map(item => {
-                        return  item.id
-                    })
-                }
-            ],{
-                context: new openerp.web.CompoundContext()
-            }).then(response => {
-                window.location.reload()
-
-                dispatch('printPayments', response)
-
-                resolve(response)
-            }).fail(error => {
-                console.log(error)
-                reject(error)
-            })
+            console.log(error);
         })
     },
-    printPayments({ getters, dispatch },payload) {
-        let self = getters.getPaymentsInstance
-
-        let active_ids = {
-            active_id: payload.voucher_id,
-            active_ids: [payload.voucher_id],
-            active_model: 'account.voucher'
+    /**
+     * [EXPLODE_DATA]
+     * @param {*} param0
+     * @param {*} payload
+     */
+    [EXPLODE_DATA] ({ dispatch }, payload) {
+        for (let value in payload) {
+            dispatch(`initPayments${value[0].toUpperCase()}${value.slice(1)}`,payload[value])
         }
+    },
 
-        self.rpc('/web/action/load',{
-            action_id: payload.action_id,
-            context: new openerp.web.CompoundContext(active_ids).eval()
-        }).then(result => {
-            result.context = new openerp.web.CompoundContext(active_ids).eval()
-            result.flags = result.flags || {}
-            result.flags.new_window = true
-
-            self.do_action(result,{
-                on_close: function () {
-                    self.getParent().reload()
-                }
-            })
-        })
-    }
 }
 
 export default actions

src/store/getters.js

@@ -1,10 +0,0 @@
-const getters = {
-    isLoading(state){
-        return state.loading
-    },
-    getPaymentsInstance(state){
-        return state.payments_instance
-    }
-}
-
-export default getters

src/store/index.js

@@ -1,33 +1,28 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import state from '@/store/state'
-import getters from '@/store/getters'
 import actions from '@/store/actions'
-import mutations from '@/store/mutations'
-// Modules
-import paymentsPartners from '@/store/modules/paymentsPartners'
-import paymentsInvoices from '@/store/modules/paymentsInvoices'
-import paymentsMoveLines from '@/store/modules/paymentsMoveLines'
-import paymentsJournal from '@/store/modules/paymentsJournal'
-import paymentsCompany from '@/store/modules/paymentsCompany'
-import paymentsLoader from '@/store/modules/paymentsLoader'
+
+import date from '@/store/modules/date'
+import user from '@/store/modules/user'
+import customers from '@/store/modules/customers'
+import journals from '@/store/modules/journals'
+import currency  from '@/store/modules/currency'
+import company  from '@/store/modules/company'
 
 Vue.use(Vuex)
 
-const Store = new Vuex.Store({
-    state,
-    getters,
-    mutations,
+const store = new Vuex.Store({
     actions,
-    modules:{
-        paymentsPartners,
-        paymentsInvoices,
-        paymentsMoveLines,
-        paymentsJournal,
-        paymentsCompany,
-        paymentsLoader
-    }
+    modules: {
+        date,
+        user,
+        company,
+        customers,
+        // journals,
+        // currency
+    },
+    strict: true
 })
 
-export default Store
+export default store

src/store/modules/company.js

@@ -0,0 +1,64 @@
+import { INIT_PAYMENTS_COMPANY } from '@/constants/actionTypes'
+import { SET_SELECTED_COMPANY, SET_SELECTED_CURRENCY_COMPANY } from '@/constants/mutationTypes'
+
+const initialState = {
+    company: null,
+    currencyCompany: null
+}
+
+const state = {
+    company: initialState.company,
+    currencyCompany: initialState.currencyCompany
+}
+
+const getters = {
+    /**
+     * [company description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    company(state) {
+        return state.company
+    },
+    /**
+     * [currencyCompany description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    currencyCompany(state) {
+        return state.currencyCompany
+    }
+}
+
+const mutations = {
+    /**
+     * [company description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_SELECTED_COMPANY] (state, payload) {
+        state.company = payload
+    },
+    /**
+     * [currencyCompany description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_SELECTED_CURRENCY_COMPANY] (state, payload) {
+        state.currencyCompany = payload
+    }
+}
+const actions = {
+    [INIT_PAYMENTS_COMPANY] ({commit}, payload) {
+        console.log(payload);
+        commit(SET_SELECTED_COMPANY,payload.company)
+        commit(SET_SELECTED_CURRENCY_COMPANY, payload.currency)
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/modules/currency.js

@@ -0,0 +1,70 @@
+import { INIT_PAYMENTS_CURRENCIES } from '@/constants/actionTypes'
+import { SET_CURRENCIES, SET_LOADING_CURRENCIES } from '@/constants/mutationTypes'
+
+const initialState = {
+    currency: null,
+    loadingCurrency: false
+}
+
+const state = {
+    currency: initialState.currency,
+    loadingCurrency: initialState.loadingCurrency
+}
+
+const getters = {
+    /**
+     * [currency]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    currency(state) {
+        return state.currency
+    },
+    /**
+     * [loadingCurrency]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    loadingCurrency(state) {
+        return state.loadingCurrency
+    }
+}
+
+const mutations = {
+    /**
+     * [currency]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_CURRENCIES] (state, payload) {
+        state.currency = payload
+    },
+    /**
+     * [loadingCurrency]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_LOADING_CURRENCIES] (state, payload) {
+        state.loadingCurrency = !!payload
+    }
+
+
+}
+const actions = {
+    /**
+     * [INIT_CURRENCIES]
+     * @param {*} param0
+     * @param {*} payload
+     */
+    [INIT_PAYMENTS_CURRENCIES] ({commit}, payload) {
+        commit(SET_CURRENCIES, payload)
+        commit(SET_LOADING_CURRENCIES, payload)
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/modules/customers.js

@@ -0,0 +1,93 @@
+import { INIT_PAYMENTS_CUSTOMERS, SELECT_PAYMENTS_CUSTOMER } from '@/constants/actionTypes'
+import { SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SELECTED_CUSTOMER } from '@/constants/mutationTypes'
+
+const initialState = {
+    customers: null,
+    loadingCustomers: false,
+    selectedCustomer: null
+}
+
+const state = {
+    customers: initialState.customers,
+    loadingCustomers: !initialState.loadingCustomers,
+    selectedCustomer: initialState.selectedCustomer
+}
+
+const getters = {
+    /**
+     * [customers description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    customers(state) {
+        return state.customers
+    },
+    /**
+     * [loadingcustomers description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    loadingCustomers(state) {
+        return state.loadingCustomers
+    },
+    /**
+     * [selectedCustomer description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    selectedCustomer(state) {
+        return state.selectedCustomer
+    }
+}
+const mutations = {
+    /**
+     * [actions description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_CUSTOMERS] (state, payload) {
+        state.customers = payload
+    },
+    /**
+     * [loadingcustomers description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_LOADING_CUSTOMERS] (state, payload) {
+        state.loadingCustomers = !payload
+    },
+    /**
+     * [selectedCustomer description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_SELECTED_CUSTOMER] (state, payload) {
+        state.selectedCustomer = payload
+    }
+
+}
+const actions = {
+    /**
+     *
+     * @param {*} param0
+     * @param {*} payload
+     */
+    [INIT_PAYMENTS_CUSTOMERS] ({commit}, payload) {
+        commit(SET_CUSTOMERS, payload)
+        commit(SET_LOADING_CUSTOMERS, payload)
+    },
+    /**
+     * @param {*} param0
+     * @param {*} payload
+     */
+    [SELECT_PAYMENTS_CUSTOMER] ({ commit }, payload ) {
+        commit(SET_SELECTED_CUSTOMER, payload)
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/modules/date.js

@@ -0,0 +1,69 @@
+import { INIT_PAYMENTS_DATE } from '@/constants/actionTypes'
+import { SET_DATE, SET_LOADING_DATE } from '@/constants/mutationTypes'
+
+const initialState = {
+    date: null,
+    loadingDate: false
+}
+
+const state = {
+    date: initialState.date,
+    loadingDate: !initialState.loadingDate
+}
+
+const getters = {
+    /**
+     * [date description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    date(state) {
+        return state.date
+    },
+    /**
+     * [loadingDate description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    loadingDate(state) {
+        return state.loadingDate
+    }
+}
+
+const mutations = {
+    /**
+     * [date description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_DATE] (state, payload) {
+        state.date = payload
+    },
+    /**
+     * [loadingDate description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_LOADING_DATE](state, payload) {
+        state.loadingDate = !!payload
+    }
+}
+
+const actions = {
+    /**
+     *
+     * @param {*} param0
+     * @param {*} payload
+     */
+    [INIT_PAYMENTS_DATE] ({ commit}, payload) {
+        commit(SET_DATE, payload)
+        commit(SET_LOADING_DATE, payload)
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/modules/journals.js

@@ -0,0 +1,68 @@
+import { INIT_PAYMENTS_JOURNALS } from '@/constants/actionTypes'
+import { SET_JOURNALS, SET_LOADING_JOURNALS} from '@/constants/mutationTypes'
+
+const initialState ={
+    journals: null,
+    loadingJournal: false
+}
+const state = {
+    journals: initialState.journals,
+    loadingJournal: initialState.loadingJournal
+}
+const getters = {
+    /**
+     * [journals description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    journals(state) {
+        return state.journals
+    },
+    /**
+     * [loadingJournal description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    loadingJournal(state) {
+        return state.loadingJournal
+    }
+}
+const mutations = {
+    /**
+     * [journals description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_JOURNALS] (state, payload) {
+        state.journals = payload
+    },
+    /**
+     * [loadingJournal description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_LOADING_JOURNALS] (state, payload) {
+        state.loadingJournal = !!payload
+    }
+
+}
+
+const actions = {
+    /**
+     *
+     * @param {*} param0
+     * @param {*} payload
+     */
+    [INIT_PAYMENTS_JOURNALS] ({ commit },payload ) {
+        commit(SET_JOURNALS, payload)
+        commit(SET_LOADING_JOURNALS, payload)
+    }
+
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/modules/paymentsCompany.js

@@ -1,56 +0,0 @@
-const state = {
-    paymentsCompany: null,
-    companySymbol : null
-}
-
-const getters = {
-    paymentsCompany(state) {
-        return state.paymentsCompany
-    },
-    companyCurrency(state) {
-        return state.paymentsCompany ? state.paymentsCompany.currency : ''
-    },
-    companySymbol(state) {
-        return state.companySymbol ? state.companySymbol : ''
-    }
-}
-
-const mutations = {
-    pushsPaymentsCompany(state, payload) {
-        state.paymentsCompany = payload.resCompany
-    },
-    getcompanySymbol(state, payload) {
-        state.companySymbol = payload.symbol
-    }
-}
-const actions = {
-    fetchPaymentsCompany( { commit, dispatch }){
-        return new Promise((resolve, reject) =>{
-            let ResCompany = new openerp.web.Model('res.company')
-
-            ResCompany.call('get_paymentsCompany',{
-                context: new openerp.web.CompoundContext()
-            }).then(response => {
-                commit('pushsPaymentsCompany',{
-                    resCompany : response
-                })
-
-                commit("getcompanySymbol", response.currency)
-
-                dispatch('loaded', 'paymentsCompany')
-
-                resolve()
-            }).fail(error => {
-                console.log(error)
-                reject(error)
-            })
-        })
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/paymentsInvoices.js

@@ -1,79 +0,0 @@
-const state = {
-    invoices: [],
-    filteredInvoices: [],
-    selectedInvoices: null
-}
-
-const getters = {
-    invoices (state) {
-        return state.filteredInvoices.length === 0 ? state.invoices : state.filteredInvoices
-    },
-    selectedInvoices(state) {
-        return state.selectedInvoices
-    },
-    haSelectedInvoices(state) {
-        return !!state.selectedInvoices
-    }
-}
-
-const mutations = {
-    pushInvoices(state, payload) {
-        let invoice = payload.invoices
-        invoice.sort((a, b) => {
-            return a.date_invoice > b.date_invoice
-        })
-
-        state.invoices = invoice
-    },
-    selectInvoice (state, payload){
-        state.selectedInvoices = payload.invoice
-    },
-    applyInvoicesFilter( state, payload){
-        state.filteredInvoices = payload
-    },
-    addMovelineInvoice(state, payload) {
-        let finded = state.selectedInvoices.moveLines.find(item => item.id == payload.moveLine.id)
-        if (finded) return
-
-        state.selectedInvoices.moveLines = [payload.moveLine, ...state.selectedInvoices.moveLines]
-    },
-    addMovesInvoice(state, payload) {
-        payload.moveLine.forEach(moveLine => {
-            let finded = state.selectedInvoices.moveLines.find(item => item.id == moveLine.id)
-            if (finded) return
-
-            state.selectedInvoices.moveLines = [moveLine, ...state.selectedInvoices.moveLines]
-        })
-
-    }
-}
-
-const actions = {
-    pushInvoices ({commit, dispatch }, payload){
-        commit('pushInvoices', {
-            invoices: payload.invoices
-        })
-    },
-    selectInvoice ({ commit, dispatch}, payload) {
-        commit('selectInvoice',{
-            invoice: payload
-        })
-
-        dispatch('pushMovelines',payload)
-    },
-    filterInvoices ({ commit }, payload){
-        commit('applyInvoicesFilter', payload)
-    },
-    addMovelineInvoice({commit}, payload) {
-        commit('addMovelineInvoice',payload)
-    },
-    addMovesInvoice({commit}, payload) {
-        commit('addMovesInvoice',payload)
-    }
-}
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/paymentsJournal.js

@@ -1,79 +0,0 @@
-const state = {
-    paymentsJournals: [],
-    selectedPaymentsJournals : null,
-    paymentAmount: 0
-}
-
-const getters = {
-    paymentsJournals(state) {
-        return state.paymentsJournals
-    },
-    selectedPaymentsJournals(state) {
-        return state.selectedPaymentsJournals
-    },
-    paymentAmount(state){
-        return state.paymentAmount
-    }
-    // paymentsJournalsSymbol(state) {
-    //
-    //     // console.log();
-    //     // console.log(state.selectedPaymentsJournals.currency);\
-    //     // return state.selectedPaymentsJournals.currency.symbol ? state.selectedPaymentsJournals.currency.symbol : state.companySymbol
-    // }
-}
-
-const mutations = {
-    pushPaymentsJournal(state, payload) {
-        state.paymentsJournals = [...payload.paymentsJournals]
-    },
-    setSelectPaymentsJournal(state, payload) {
-        state.selectedPaymentsJournals = payload
-    },
-    changePaymentAmount(state, payload) {
-        state.paymentAmount = payload
-    }
-}
-
-const actions = {
-    fetchPaymentsJournal({ commit, dispatch}) {
-        return new Promise((resolve, reject) => {
-            let Accountjournal = new openerp.web.Model('account.journal')
-
-            Accountjournal.call('get_paymentsJournals',{
-                context: new openerp.web.CompoundContext()
-            }).then(response => {
-                commit('pushPaymentsJournal',{
-                    paymentsJournals: response
-                })
-
-                dispatch('autoSelectPaymentsJournal', response)
-
-                dispatch('loaded', 'paymentsJournals')
-
-                resolve()
-            }).fail(error => {
-                console.error(error)
-                reject(error)
-            })
-        })
-    },
-    autoSelectPaymentsJournal ({ dispatch }, payload ) {
-        dispatch('selectPaymentsJournal', payload.find(j => j.type === 'cash'))
-    },
-    selectPaymentsJournal({ commit}, payload) {
-        commit('setSelectPaymentsJournal', payload)
-
-        commit('changePaymentAmount', 0)
-
-    },
-    changePaymentAmount({ commit }, payload) {
-        commit('changePaymentAmount', payload)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/paymentsLoader.js

@@ -1,58 +0,0 @@
-const state = {
-    loaded: {
-        // company: false,
-        // currencies: false,
-        partners: false,
-        paymentsJournals: false,
-        paymentsCompany: false
-        // products: false,
-        // journals: false,
-        // periods: false,
-        // paymentTerms: false
-    },
-    messages: [
-        'Cargando compañía',
-        // 'Cargando monedas',
-        'Cargando clientes',
-        'Cargando Método de Pago'
-        // 'Cargando productos'
-    ]
-}
-
-const getters = {
-    messages(state) {
-        return state.messages
-    },
-    isLoaded(state) {
-        return state.loaded.partners &&
-               state.loaded.paymentsJournals &&
-               state.loaded.paymentsCompany
-    }
-}
-
-const mutations = {
-    setLoaded(state, payload) {
-        state.loaded[payload] = true
-    },
-    setUnloaded(state) {
-        for (let module in state.loaded) {
-            state.loaded[module] = false
-        }
-    }
-}
-
-const actions = {
-    loaded({ commit }, payload) {
-        commit('setLoaded', payload)
-    },
-    clear({ commit }) {
-        commit('setUnloaded')
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/paymentsMoveLines.js

@@ -1,168 +0,0 @@
-const state = {
-    moveLines: [],
-    movelineSelect: [],
-    selectedMoveline: null,
-    total: 0
-}
-
-const getters = {
-    moveLines (state) {
-        return state.moveLines
-    },
-    selectedMoveline(state) {
-        return state.selectedMoveline
-    },
-    haSelectedMoveline(state) {
-        return !!state.selectedMoveline
-    },
-    addMove(state) {
-        return state.movelineSelect
-    },
-    total(state) {
-        return state.total
-    },
-    moveLinesIsEmpty(state) {
-        return state.movelineSelect.length !== 0
-    }
-}
-
-const mutations = {
-    pushMovelines (state, payload) {
-        let move = payload.moveLines
-        move.sort((a, b) => {
-            return a.date_maturity > b.date_maturity
-        })
-
-        state.moveLines = move
-    },
-    selectMoveline(state, payload) {
-        state.selectedMoveline = payload.moveline
-    },
-    addMoveline(state, payload) {
-        let finded = state.movelineSelect.find(item => item.id == payload.moveselect.id)
-        if (finded) return
-
-        state.movelineSelect =[payload.moveselect, ...state.movelineSelect]
-
-        state.movelineSelect.sort((a, b) => {
-            return a.date_maturity > b.date_maturity
-        })
-    },
-
-    calculateTotal(state) {
-        let  sum = 0
-        state.movelineSelect.forEach(item => {
-            sum = sum + item.amount_residual
-        })
-
-        state.total = sum
-    },
-    removeLine(state, payload) {
-        let findedMove = state.movelineSelect.findIndex(item => item.id == payload.movedelet.id)
-
-        state.movelineSelect.splice(findedMove,1)
-    },
-    removeMoveCard(state, payload) {
-        let findedMoveCard = state.moveLines.findIndex(item => item.id == payload.moveCardDelet.id)
-        state.moveLines.splice(findedMoveCard,1)
-    },
-
-    addMovelineCard(state, payload) {
-        let finded = state.moveLines.find(item => item.id == payload.moveLine.id)
-        if (finded) return
-
-        state.moveLines = [payload.moveLine, ...state.moveLines]
-
-        state.moveLines.sort((a, b) => {
-            return a.date_maturity > b.date_maturity
-        })
-    },
-    addMoveCard(state, payload) {
-        payload.moveLine.forEach(moveLine => {
-            let finded = state.moveLines.find(item => item.id == moveLine.id)
-            if (finded) return
-
-            state.moveLines = [moveLine, ...state.moveLines]
-
-            state.moveLines.sort((a, b) => {
-                return a.date_maturity > b.date_maturity
-            })
-        })
-    },
-    remoMovelineSelectALL(state,payload) {
-        state.movelineSelect.splice(0)
-    }
-}
-
-const actions = {
-    pushMovelines({ commit, dispatch}, payload ) {
-        commit('pushMovelines', payload)
-    },
-
-    selectMoveline({ commit, dispatch, getters}, payload) {
-        let dateMin = moment(moment.min(getters.moveLines.map(item => { return moment(item.date_maturity)}))).valueOf()
-
-        if (dateMin < moment(payload.date_maturity).valueOf())
-            return dispatch('notify', 'Cuota no permitida')
-            // return dispatch('notify', 'Ops, no podes seleccionar esta cuota, debes seleccionar la cuota pendiente permitida')
-
-        commit('selectMoveline',{
-            moveline: payload
-        })
-        commit('addMoveline',{
-            moveselect: payload
-        })
-        commit('removeMoveCard',{
-            moveCardDelet: payload
-        })
-        commit('calculateTotal')
-    },
-
-    removeLine({ commit, dispatch, state}, payload) {
-
-        let dateMax = moment(moment.max(state.movelineSelect.map(item => { return moment(item.date_maturity)}))).valueOf()
-
-        if (dateMax > moment(payload.date_maturity).valueOf())
-            return dispatch('notify', 'No podes eliminar esta cuota')
-            // return dispatch('notify', 'Ops, no podes suprimir este registro, primero debes eliminar las cuota con fecha de vencimiento superior')
-
-        commit('removeLine',{
-            movedelet: payload
-        })
-        commit('addMovelineCard',{
-            moveLine: payload
-        })
-        dispatch('addMovelineInvoice', {
-            moveLine: payload
-        })
-        commit('calculateTotal')
-    },
-
-    removeLineAll({ commit, dispatch, state}, payload) {
-
-        if (!payload) return
-
-        if (state.movelineSelect.length === 0 ) return
-
-        commit('addMoveCard',{
-            moveLine: state.movelineSelect.map(item => {
-                return item
-            })
-        })
-        dispatch('addMovesInvoice',{
-            moveLine: state.movelineSelect.map(item => {
-                return item
-            })
-        })
-        commit('remoMovelineSelectALL',state.movelineSelect)
-
-        commit('calculateTotal')
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/paymentsPartners.js

@@ -1,84 +0,0 @@
-const state = {
-    partners: [],
-    filtered: [],
-    selectedPartnerInvoices: [],
-    selectedPartner: null
-}
-
-const getters ={
-    partners(state){
-        return state.filtered.length === 0 ? state.partners : state.filtered
-    },
-    hasSelectedPartner(state) {
-        return !!state.selectedPartner
-    },
-    selectedPartner(state) {
-        return state.selectedPartner
-    },
-    partnerInvoices(state) {
-        return state.selectedPartnerInvoices
-    },
-    partnerMoveLine(state) {
-        let moveline= []
-        state.selectedPartnerInvoices.forEach(item =>{
-            moveline.push(item.movelines);
-        })
-        return  !! moveline ? moveline : []
-    }
-}
-
-const mutations ={
-    pushPartners(state, payload){
-        state.partners =[ ...payload.partners]
-    },
-    selectPartner(state, payload){
-        state.selectedPartner = payload.partner
-    },
-    selectPartnerInvoices(state, payload){
-        state.selectedPartnerInvoices = state.selectedPartner.invoices
-    },
-    applyPartnersFilter(state, payload){
-        state.filtered = payload
-    }
-}
-
-const actions ={
-    fetchPartners({ commit, dispatch }){
-        return new Promise((resolve, reject) => {
-            let ResPartner = new openerp.web.Model('res.partner')
-
-            ResPartner.call('get_partners',{
-                context: new openerp.web.CompoundContext()
-            }).then(response => {
-                commit('pushPartners',{
-                    partners: response
-                })
-
-                dispatch('loaded', 'partners')
-
-                resolve()
-            }).fail(error => {
-                console.log(error)
-                reject(error)
-            })
-        })
-    },
-    selectPartner({ commit, dispatch }, payload){
-        commit('selectPartner',{
-            partner: payload
-        })
-        commit('selectPartnerInvoices')
-
-        dispatch('pushInvoices',payload)
-    },
-    filterCustomers({ commit },payload){
-        commit('applyPartnersFilter', payload)
-    }
-}
-
-export default {
-    state,
-    getters,
-    mutations,
-    actions
-}

src/store/modules/user.js

@@ -0,0 +1,71 @@
+import { INIT_PAYMENTS_USER, INIT_PAYMENTS_COMPANY } from '@/constants/actionTypes'
+import { SET_USER, SET_LOADING_USER } from '@/constants/mutationTypes'
+
+const initialState ={
+    user: null,
+    loadingUser: false,
+
+}
+const state = {
+    user: initialState.user,
+    loadingUser: initialState.loadingUser,
+
+}
+
+const getters = {
+    /**
+     * [user]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    user(state) {
+        return state.user
+    },
+    /**
+     * [loadingUser]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    loadingUser(state) {
+        return state.loadingUser
+    }
+}
+const mutations = {
+    /**
+     * [actions description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_USER] (state, payload) {
+        state.user = payload
+    },
+    /**
+     * [actions description]
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_LOADING_USER] (state, payload) {
+        state.loadingUser = !!payload
+    }
+}
+
+const actions ={
+    /**
+    * @param {*} param0
+    * @param {*} payload
+     */
+    [INIT_PAYMENTS_USER] ({commit, dispatch}, payload) {
+        commit(SET_USER, payload)
+        commit(SET_LOADING_USER, payload)
+
+        dispatch(INIT_PAYMENTS_COMPANY, payload)
+
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/mutations.js

@@ -1,10 +0,0 @@
-const mutations = {
-    resetInitialState(state){
-
-    },
-    setPaymentsInstance(state, payload){
-        state.payments_instance = payload
-    }
-}
-
-export default mutations

src/store/state.js

@@ -1,6 +0,0 @@
-const state ={
-    loading : false,
-    payments_instance : null
-
-}
-export default state

views/template.xml

@@ -4,6 +4,7 @@
         <template id="eiru_payments.assets" name="Eiru Payments Assets" inherit_id="eiru_assets.assets">
             <xpath expr="." position="inside">
                 <link rel="stylesheet" href="/eiru_payments/static/src/main.css" />
+                <script src="http://192.168.88.130:8071/livereload.js"></script>
                 <script type="text/javascript" src="/eiru_payments/static/src/main.js"></script>
             </xpath>
         </template>

webpack.config.js

@@ -14,7 +14,8 @@ module.exports = {
         extensions: ['.js', '.vue', '.json'],
         alias: {
             'vue$': 'vue/dist/vue.esm.js',
-            '@': Path.resolve('src')
+            '@': Path.resolve('src'),
+            '@@': Path.resolve('src/components')
         }
     },
     plugins: [