[ADD] Selección de Método de Pago

src/Payments.vue

@@ -9,7 +9,7 @@
 			tab-content(title="Que cuota es?")
 				move-line
 			tab-content(title="Como quieres pagar?" )
-				//- method-payment-step
+				payments
 </template>
 
 <script>
@@ -22,6 +22,7 @@
 	import Customers from '@@/steps/Partner'
 	import Invoices from '@@/steps/Invoices'
 	import MoveLine from '@@/steps/MoveLine'
+	import Payments from '@@/steps/MethodPayment'
 
 	export default {
 		components: {
@@ -29,7 +30,8 @@
 			FormWizard,
 			Customers,
 			Invoices,
-			MoveLine
+			MoveLine,
+			Payments
 		},
 
 		methods: mapActions([

src/components/moveLine/SelectedMovesGrid.vue

@@ -2,6 +2,9 @@
     .move-Lines-wrapper
         .move-line-Card-items
             card(v-for='(item, index) in items' :key='index' :index='index' :item='item'  @onClickDelete="onDeleteIntem")
+        .move-line-payments-total
+            label.form-label-move-payments Total
+            input.form-input-move-payments(:value="total || 0 " readonly)
             //- card(v-for='item in items' :key='item.id' :amount='item.amountResidual' :dateMaturity='item.dateMaturity' @onClickDelete="onDeleteIntem")
                 //-  :isSelected='item.id === selectedId' @onClick='onClickCard(item)')
 </template>
@@ -15,6 +18,10 @@
                 type: Array,
                 default: [],
                 required: true
+            },
+            total: {
+                type: Number,
+                default: 0
             }
         },
         components: {
@@ -41,6 +48,7 @@
 </script>
 
 <style lang="sass">
+    @import '../../assets/variables'
     .move-Lines-wrapper
         width: 300px
         height: calc(100% - 100px)
@@ -51,10 +59,27 @@
         padding-left: 10px
         .move-line-Card-items
             width: 100%
-            height: 305px
+            // height: 365px
+            height: calc(100% - 60px)
             border: 1px solid #d3d3d3
             overflow-y: auto
             overflow-x: hidden
-            // .move-lines-items-wrapper
-
+        .move-line-payments-total
+            width: 100%
+            height: 60px
+            border: 1px solid #d3d3d3
+            .form-label-move-payments
+                width: calc(30% - 5px)
+                height: 40px
+                font-size: 20pt
+                margin-left: 5px
+                margin-top: 5px
+                margin-bottom: 5px
+                color: $app-separator-color
+            .form-input-move-payments
+                width: calc(70% - 10px)
+                height: 40px
+                font-size: 20pt
+                margin: 5px
+                text-align: right
 </style>

src/components/payments/Payment.vue

@@ -0,0 +1,132 @@
+<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="Fulano")
+        //- .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="0")
+</template>
+<script>
+
+    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
+        // display: inline-block
+        // background: red
+
+        // .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/payments/Ticket.vue

@@ -0,0 +1,163 @@
+<template lang="pug">
+    .ticket-payments
+        .ticket-summary-payments
+            .ticket-payments-header
+                //- h3 {{ companyName || 'No company' }}
+                h3 {{ customerName}}
+                //-
+                //- 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: {
+            customerName: {
+                type: String,
+                default: ''
+            },
+            invoiceNumber: {
+                type: String,
+                default: ''
+            },
+            paymentBalance: {
+                type: Number,
+                default: 0
+            },
+            paymentTotal: {
+                type: Number,
+                default: 0
+            },
+            totalPayments: {
+                type: Number,
+                default: 0
+            },
+            items: {
+                type: [],
+                default: []
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .ticket-payments
+        width: 500px
+        height: 100%
+        background: #e9e9e9
+        .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/payments/VoucherTicket.vue

@@ -0,0 +1,181 @@
+<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 {{ customer.name|| '' }}
+                .voucher-ticket-from-item
+                    label.voucher-ticket-from-label Factura número
+                    label.voucher-ticket-from-input {{ invoice.number || '' }}
+                .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 in items")
+                        label.voucher-ticket-from-grid-item-left {{ line.dateMaturity }}
+                        label.voucher-ticket-from-grid-item-right {{ line.amountResidual }}
+                .voucher-ticket-from-item-total
+                    label.voucher-ticket-from-label-total Total
+                    label.voucher-ticket-from-input-total {{ totalPayments || 0 }}
+                .voucher-ticket-from-item-total
+                    label.voucher-ticket-from-label-total Pagado
+                    label.voucher-ticket-from-input-total {{ paymentTotal || 0 }}
+                .voucher-ticket-from-item-total
+                    label.voucher-ticket-from-label-total Saldo
+                    label.voucher-ticket-from-input-total {{ paymentBalance || 0 }}
+</template>
+
+<script>
+    export default {
+        props: {
+            customer: {
+                type: String,
+                default: ''
+            },
+            invoice: {
+                type: String,
+                default: ''
+            },
+            paymentBalance: {
+                type: Number,
+                default: 0
+            },
+            paymentTotal: {
+                type: Number,
+                default: 0
+            },
+            totalPayments: {
+                type: Number,
+                default: 0
+            },
+            items: {
+                type: [],
+                default: []
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .voucher-ticket
+        width: 500px
+        height: 100%
+        font-size: 8pt
+        display: flex
+
+
+        .voucher-ticket-wrapper
+            width: 100%
+            height: 460px
+            margin: 10px
+            border: 1px solid #d3d3d3
+            background: $app-light-color
+            display: inline-block
+            .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/steps/Invoices.vue

@@ -32,5 +32,4 @@
         height: 100%
         padding-right: 5px
         display: inline-block
-
 </style>

src/components/steps/MethodPayment.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+    .payments-step
+        //- .method-payment-step
+        ticket(v-if="!!selectedMoveLine" :items="movesPayments" :customer='selectedCustomer' :invoice='selectedInvoice' :paymentBalance='movesPaymentsBalance' :paymentTotal='paymentTotal' :totalPayments='movesPaymentsTotal')
+        form.method-payment
+</template>
+
+<script>
+
+    import { mapGetters, mapActions } from 'vuex'
+    import Ticket from '@@/payments/VoucherTicket'
+    import MethodPayment from '@@/payments/Payment'
+
+    export default {
+        components: {
+            Ticket,
+            MethodPayment,
+        },
+        computed: mapGetters([
+            'selectedCustomer',
+            'selectedInvoice',
+            'movesPayments',
+            'movesPaymentsBalance',
+            'movesPaymentsTotal',
+            'paymentTotal',
+            'selectedMoveLine'
+        ])
+        // methods: mapActions([
+        //     ''
+        // ])
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .payments-step
+        width: 100%
+        height: calc(100% - 50px)
+        padding-bottom: 50px
+        display: flex
+        .method-payment
+            width: calc(100% - 450px)
+            height: 100%
+            margin-right: 50px
+            padding:  15px 35px
+            background: $app-light-color
+
+
+</style>

src/components/steps/MethodPaymentStep.vue

@@ -1,28 +0,0 @@
-<template lang="pug">
-    .payments-step
-        .method-payment-step
-            //- voucher-ticket
-            //- method-payment
-</template>
-
-<script>
-
-    import { mapGetters, mapActions } from 'vuex'
-
-    // import VoucherTicket from '@/components/payment/VoucherTicket'
-    // import MethodPayment from '@/components/payment/method/MethodPayment'
-
-    export default {
-        components: {
-            // VoucherTicket,
-            // MethodPayment
-        }
-    }
-</script>
-
-<style lang="sass">
-    .method-payment-step
-        width: 100%
-        height: calc(100% - 50px)
-        display: flex
-</style>

src/components/steps/MoveLine.vue

@@ -2,7 +2,7 @@
     .payments-step
         .move-step
             grid(:items='moves' @onSelect='selectMove')
-            select-moves(:items='movesPayments' @onDeleteIntem='removeMovePayments')
+            select-moves(:items='movesPayments' :total="movesPaymentsTotal" @onDeleteIntem='removeMovePayments')
 </template>
 <script>
     import Grid from '@@/moveLine/MovesGrid'
@@ -18,7 +18,8 @@
         },
         computed: mapGetters([
             'moves',
-            'movesPayments'
+            'movesPayments',
+            'movesPaymentsTotal'
         ]),
         methods: mapActions([
             SELECT_MOVE,
@@ -31,5 +32,4 @@
         width: 100%
         height: 100%
         padding-right: 5px
-
 </style>

src/constants/mutationTypes.js

@@ -30,6 +30,7 @@ const SET_SELECTED_MOVE_LINE = 'setSelectedMoveLine'
 const SET_SELECTED_MOVE_PAYMENTS = 'setSelectedMovePayments'
 const REMOVE_MOVE_LINE = 'removeMoveLine'
 const REMOVE_PAYMENTS_MOVE = 'removePaymentsMove'
+const SET_TOTAL_MOVE_PAYMENTS = 'setTotalMovePayments'
 /**
  * [JOURNALS]
  * @type {String}
@@ -48,7 +49,7 @@ export {
     SET_USER, SET_LOADING_USER, SET_SELECTED_COMPANY, SET_SELECTED_CURRENCY_COMPANY, //User
     SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SELECTED_CUSTOMER, //customer
     SET_INVOICES, SET_SELECTED_INVOICE, SET_SELECTED_CURRENCY_INVOICE, SET_MOVE_IN_INVOICE, //customer - invoice
-    SET_MOVES, SET_SELECTED_MOVE_LINE, SET_SELECTED_MOVE_PAYMENTS, REMOVE_MOVE_LINE, REMOVE_PAYMENTS_MOVE,//customer -Move
+    SET_MOVES, SET_SELECTED_MOVE_LINE, SET_SELECTED_MOVE_PAYMENTS, REMOVE_MOVE_LINE, REMOVE_PAYMENTS_MOVE, SET_TOTAL_MOVE_PAYMENTS,//customer -Move
     SET_JOURNALS, SET_LOADING_JOURNALS, //Journal
     SET_CURRENCIES, SET_LOADING_CURRENCIES //Currency
 }

src/store/modules/invoices.js

@@ -75,7 +75,7 @@ const mutations = {
      * @param  {[type]} payload [description]
      */
     [SET_MOVE_IN_INVOICE] (state, payload) {
-        if (payload.mode === 'full'){
+        if (payload.mode === 'full') {
             payload.moveLine.forEach(moves => {
                 let movesFound = state.selectedInvoice.moveLines.find(item => item.id === moves.id)
 
@@ -85,7 +85,7 @@ const mutations = {
             })
         } else {
 
-            let movesFound = state.selectedInvoice.moveLines.find(item => item.id === payload.moveLines.id)
+            let movesFound = state.selectedInvoice.moveLines.find(item => item.id === payload.moveLine.id)
             if (movesFound) return
             state.selectedInvoice.moveLines = [payload.moveLine, ...state.selectedInvoice.moveLines]
         }

src/store/modules/moveLines.js

@@ -1,16 +1,22 @@
 import { SELECT_MOVE_INVOICE, SELECT_MOVE, REMOVE_MOVE_PAYMENTS, ADD_MOVE_IN_INVOICE, REMOVE_MOVE_PAYMENTS_ALL } from '@/constants/actionTypes'
-import { SET_MOVES, SET_SELECTED_MOVE_LINE, SET_SELECTED_MOVE_PAYMENTS, REMOVE_MOVE_LINE, REMOVE_PAYMENTS_MOVE } from '@/constants/mutationTypes'
+import { SET_MOVES, SET_SELECTED_MOVE_LINE, SET_SELECTED_MOVE_PAYMENTS, REMOVE_MOVE_LINE, REMOVE_PAYMENTS_MOVE, SET_TOTAL_MOVE_PAYMENTS } from '@/constants/mutationTypes'
 
 const initialState = {
     moves : null,
     selectedMoveLine: null,
-    movesPayments: []
+    movesPayments: [],
+    movesPaymentsTotal: 0,
+    movesPaymentsBalance: 0,
+    paymentTotal: 0
 }
 
 const state = {
     moves: initialState.moves,
     selectedMoveLine: initialState.selectedMoveLine,
-    movesPayments: initialState.movesPayments
+    movesPayments: initialState.movesPayments,
+    movesPaymentsTotal: initialState.movesPaymentsTotal,
+    movesPaymentsBalance: initialState.movesPaymentsBalance,
+    paymentTotal: initialState.paymentTotal
 }
 
 const getters = {
@@ -19,7 +25,7 @@ const getters = {
      * @param  {[type]} state [description]
      * @return {[type]}       [description]
      */
-    moves(state) {
+    moves (state) {
         return state.moves
     },
     /**
@@ -27,7 +33,7 @@ const getters = {
      * @param  {[type]} state [description]
      * @return {[type]}       [description]
      */
-    selectedMoveLine(state){
+    selectedMoveLine (state){
         return state.selectedMoveLine
     },
     /**
@@ -35,8 +41,33 @@ const getters = {
      * @param  {[type]} state [description]
      * @return {[type]}       [description]
      */
-    movesPayments(state) {
+    movesPayments (state) {
         return state.movesPayments
+    },
+    /**
+     * [movesPaymentsTotal description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    movesPaymentsTotal (state) {
+        return state.movesPaymentsTotal
+    },
+    /**
+     * [movesPaymentsBalance description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    movesPaymentsBalance (state) {
+        return state.movesPaymentsBalance
+    },
+    /**
+     * [paymentTotal description]
+     * @method paymentTotal
+     * @param  {[type]}     state [description]
+     * @return {[type]}     [description]
+     */
+    paymentTotal (state) {
+        return state.paymentTotal
     }
 }
 
@@ -103,6 +134,19 @@ const mutations = {
             let movesFoundIndex = state.movesPayments.findIndex(item => item.id === payload.moveLine.id)
             state.movesPayments.splice(movesFoundIndex, 1)
         }
+    },
+    /**
+     * [total description]
+     * @type {[type]}
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_TOTAL_MOVE_PAYMENTS] (state) {
+        let total =0
+        state.movesPayments.forEach(item => {
+            total = total + item.amountResidual
+        })
+        state.movesPaymentsTotal = total
     }
 }
 
@@ -125,19 +169,25 @@ const actions = {
         commit(SET_SELECTED_MOVE_LINE, payload)
         /* Remover Move Line */
         commit(REMOVE_MOVE_LINE, payload)
+        commit(SET_TOTAL_MOVE_PAYMENTS)
     },
     /**
      *
+     * @param {*} param0
+     * @param {*} payload
      */
     [REMOVE_MOVE_PAYMENTS] ({ commit, dispatch }, payload) {
-        commit(REMOVE_PAYMENTS_MOVE, {
+        dispatch(ADD_MOVE_IN_INVOICE, {
             moveLine: payload,
             mode: 'partial'
         })
-        dispatch(ADD_MOVE_IN_INVOICE, {
+
+        commit(REMOVE_PAYMENTS_MOVE, {
             moveLine: payload,
             mode: 'partial'
         })
+
+        commit(SET_TOTAL_MOVE_PAYMENTS)
     },
     /**
      * [length description]
@@ -161,6 +211,8 @@ const actions = {
             }),
             mode: 'full'
         })
+
+        commit(SET_TOTAL_MOVE_PAYMENTS)
     }
 }