[ADD] Selecion de cuotas

src/Payments.vue

@@ -1,7 +1,7 @@
 <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)")
-		form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" @on-complete="completePayment()")
+		form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" @on-complete="completePayment()" @on-change="(prev, next) => removeMovePaymentsAll(prev > next && prev >= 2)")
+			//- form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" @on-complete="completePayment()")
 			tab-content(title="Quien es el cliente?")
 				Customers
 			tab-content(title="Cual es la factura?")
@@ -15,7 +15,7 @@
 <script>
 
 	import { mapActions } from 'vuex'
-
+	import { REMOVE_MOVE_PAYMENTS_ALL } from '@/constants/actionTypes'
 	import {FormWizard, TabContent } from 'vue-form-wizard'
 	import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
@@ -33,7 +33,8 @@
 		},
 
 		methods: mapActions([
-			'initPayments'
+			'initPayments',
+			REMOVE_MOVE_PAYMENTS_ALL
 			// 'notify',
 			// 'completePayment',
 			// 'removeLineAll',

src/components/moveLine/MovePaymentsCard.vue

@@ -0,0 +1,98 @@
+<template lang="pug">
+    li.move-lines-item
+        h3.move-lines-item-maturity Venc. {{ item.dateMaturity }}
+        span.move-lines-item-subtotal {{ item.amountResidual }}
+        .move-lines-item-options-wrapper(class="fa fa-trash" @click='onClickDelete')
+        //- .move-lines-item-options-wrapper(class="fa fa-trash" @click="onClick" :class="{'fa-trash-disable': lineDisable()}")
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    export default {
+        props: {
+            // dateMaturity: {
+            //     type: String,
+            //     default: ''
+            // },
+            // amount: {
+            //     type: Number,
+            //     default: 0
+            // },
+            isDelect: {
+                type: Boolean,
+                default: true
+            },
+            index: {
+                type: Number,
+                default: -1,
+                required: true
+            },
+            item: {
+                type: Object,
+                default: null
+            }
+        },
+        methods: {
+            onClick() {
+                this.$emit('onClick')
+            },
+            onClickDelete() {
+                this.$emit('onClickDelete', this.item)
+            }
+        }
+    }
+</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: 140px
+            height: 30px
+            margin: 12px 0 5px 0
+            float: left
+            padding-left: 5px
+            font:
+                size: 9pt
+        .move-lines-item-subtotal
+            width: 100px
+            height: 30px
+            margin-top: 12px
+            padding-right: 5px
+            text-align: right
+            float: left
+            font:
+                size: 9pt
+                weight: bold
+        .move-lines-item-options-wrapper
+            width: 27px
+            height: 30px
+            margin-top: 12px
+            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/moveLine/SelectedMovesGrid.vue

@@ -1,34 +1,37 @@
 <template lang="pug">
     .move-Lines-wrapper
-        .move-line-card
-            h3 Aquí va las cuota seleccionadas
-        //- card-grid
-            card(v-for='item in items' :key='item.id' :dateInvoice ='item.dateInvoice' :number='item.number' :amountTotal='item.amountTotal' :residual='item.residual' :isSelected='item.id === selectedId' @onClick='onClickCard(item)')
+        .move-line-Card-items
+            card(v-for='(item, index) in items' :key='index' :index='index' :item='item'  @onClickDelete="onDeleteIntem")
+            //- 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>
 
 <script>
 
-    // import card from '@@/invoices/InvoiceCard'
-
+    import card from '@@/moveLine/MovePaymentsCard'
     export default {
         props: {
             items: {
                 type: Array,
-                default: []
-            },
+                default: [],
+                required: true
+            }
+        },
+        components: {
+            card
+        },
+        methods: {
+        //     getDescription(item) {
+        //         return (!!this.description && item[this.description]) || ''
+        //     },
+        //     onClickCard(item) {
+        //         this.selectedId = item.id
+        //         this.$emit('onSelect', item)
+        //     }
+            onDeleteIntem(item) {
+                this.$emit('onDeleteIntem', item)
+            }
         },
-        // components: {
-            // card
-        // },
-        // methods: {
-            // getDescription(item) {
-            //     return (!!this.description && item[this.description]) || ''
-            // },
-            // onClickCard(item) {
-            //     this.selectedId = item.id
-            //     this.$emit('onSelect', item)
-            // }
-        // },
         // data() {
         //     return {
         //         selectedId: -1
@@ -42,11 +45,16 @@
         width: 300px
         height: calc(100% - 100px)
         margin-top: 15px
-        overflow-y: auto
         vertical-align: top
         display: inline-block
         border-left: 1px solid #e3e3e3
         padding-left: 10px
-        .move-line-Card
+        .move-line-Card-items
             width: 100%
+            height: 305px
+            border: 1px solid #d3d3d3
+            overflow-y: auto
+            overflow-x: hidden
+            // .move-lines-items-wrapper
+
 </style>

src/components/steps/MoveLine.vue

@@ -2,14 +2,14 @@
     .payments-step
         .move-step
             grid(:items='moves' @onSelect='selectMove')
-            select-moves
+            select-moves(:items='movesPayments' @onDeleteIntem='removeMovePayments')
 </template>
 <script>
     import Grid from '@@/moveLine/MovesGrid'
     import SelectMoves from '@@/moveLine/SelectedMovesGrid'
 
     import {mapGetters, mapActions } from 'vuex'
-    import { SELECT_MOVE } from '@/constants/actionTypes'
+    import { SELECT_MOVE, REMOVE_MOVE_PAYMENTS } from '@/constants/actionTypes'
 
     export default {
         components: {
@@ -17,10 +17,12 @@
             SelectMoves
         },
         computed: mapGetters([
-            'moves'
+            'moves',
+            'movesPayments'
         ]),
         methods: mapActions([
-            SELECT_MOVE
+            SELECT_MOVE,
+            REMOVE_MOVE_PAYMENTS
         ])
     }
 </script>

src/constants/actionTypes.js

@@ -19,9 +19,13 @@ const SELECT_PAYMENTS_CUSTOMER = 'selectPaymentsCustomer'
 /* invoice */
 const SELECT_CUSTOMER_INVOICES = 'selectCustomerInvoices'
 const SELECT_INVOICE = 'selectInvoice'
+const ADD_MOVE_IN_INVOICE = 'addMoveInInvoice'
 /* Move Line */
 const SELECT_MOVE_INVOICE = 'selectMoveInvoice'
 const SELECT_MOVE = 'selectMove'
+const REMOVE_MOVE_PAYMENTS = 'removeMovePayments'
+const REMOVE_MOVE_PAYMENTS_ALL = 'removeMovePaymentsAll'
+
 /**
  * [JOURNALS]
  */
@@ -37,8 +41,8 @@ export {
     INIT_PAYMENTS_DATE, //date
     INIT_PAYMENTS_USER, INIT_PAYMENTS_COMPANY, //user
     INIT_PAYMENTS_CUSTOMERS, SELECT_PAYMENTS_CUSTOMER, //customer
-    SELECT_CUSTOMER_INVOICES, SELECT_INVOICE, //Customer -invoice
-    SELECT_MOVE_INVOICE, SELECT_MOVE, //Customer -Move
+    SELECT_CUSTOMER_INVOICES, SELECT_INVOICE, ADD_MOVE_IN_INVOICE, //Customer -invoice
+    SELECT_MOVE_INVOICE, SELECT_MOVE,REMOVE_MOVE_PAYMENTS, REMOVE_MOVE_PAYMENTS_ALL, //Customer -Move
     INIT_PAYMENTS_JOURNALS, //Journal
     INIT_PAYMENTS_CURRENCIES //currency
 }

src/constants/mutationTypes.js

@@ -23,10 +23,13 @@ const SET_SELECTED_CUSTOMER = 'setSelectCustomer'
 const SET_INVOICES = 'setInvoices'
 const SET_SELECTED_INVOICE = 'setSelectedInvoice'
 const SET_SELECTED_CURRENCY_INVOICE = 'setSelectedCurrencyInvoice'
+const SET_MOVE_IN_INVOICE = 'setMoveInInvoice'
 /* Moves Lines */
 const SET_MOVES = 'setMoves'
 const SET_SELECTED_MOVE_LINE = 'setSelectedMoveLine'
 const SET_SELECTED_MOVE_PAYMENTS = 'setSelectedMovePayments'
+const REMOVE_MOVE_LINE = 'removeMoveLine'
+const REMOVE_PAYMENTS_MOVE = 'removePaymentsMove'
 /**
  * [JOURNALS]
  * @type {String}
@@ -44,8 +47,8 @@ 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_INVOICES, SET_SELECTED_INVOICE, SET_SELECTED_CURRENCY_INVOICE, //customer - invoice
-    SET_MOVES, SET_SELECTED_MOVE_LINE, SET_SELECTED_MOVE_PAYMENTS, //customer -Move
+    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_JOURNALS, SET_LOADING_JOURNALS, //Journal
     SET_CURRENCIES, SET_LOADING_CURRENCIES //Currency
 }

src/store/modules/invoices.js

@@ -1,5 +1,5 @@
-import { SELECT_CUSTOMER_INVOICES, SELECT_INVOICE, SELECT_MOVE_INVOICE } from '@/constants/actionTypes'
-import { SET_INVOICES, SET_SELECTED_INVOICE, SET_SELECTED_CURRENCY_INVOICE } from '@/constants/mutationTypes'
+import { SELECT_CUSTOMER_INVOICES, SELECT_INVOICE, SELECT_MOVE_INVOICE, ADD_MOVE_IN_INVOICE } from '@/constants/actionTypes'
+import { SET_INVOICES, SET_SELECTED_INVOICE, SET_SELECTED_CURRENCY_INVOICE, SET_MOVE_IN_INVOICE } from '@/constants/mutationTypes'
 
 const initialState = {
     invoices: null,
@@ -67,6 +67,28 @@ const mutations = {
      */
     [SET_SELECTED_CURRENCY_INVOICE] (state, payload) {
         state.currencyInvoice = payload
+    },
+    /**
+     * [moveLines description]
+     * @type {Array}
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [SET_MOVE_IN_INVOICE] (state, payload) {
+        if (payload.mode === 'full'){
+            payload.moveLine.forEach(moves => {
+                let movesFound = state.selectedInvoice.moveLines.find(item => item.id === moves.id)
+
+                if (movesFound) return
+
+                state.selectedInvoice.moveLines = [moves, ...state.selectedInvoice.moveLines]
+            })
+        } else {
+
+            let movesFound = state.selectedInvoice.moveLines.find(item => item.id === payload.moveLines.id)
+            if (movesFound) return
+            state.selectedInvoice.moveLines = [payload.moveLine, ...state.selectedInvoice.moveLines]
+        }
     }
 }
 
@@ -88,6 +110,12 @@ const actions = {
         commit(SET_SELECTED_INVOICE, payload)
         commit(SET_SELECTED_CURRENCY_INVOICE, payload.currency)
         dispatch(SELECT_MOVE_INVOICE, payload.moveLines)
+    },
+    /**
+     *
+     */
+    [ADD_MOVE_IN_INVOICE] ({ commit }, payload) {
+        commit(SET_MOVE_IN_INVOICE, payload)
     }
 }
 

src/store/modules/moveLines.js

@@ -1,5 +1,5 @@
-import { SELECT_MOVE_INVOICE, SELECT_MOVE } from '@/constants/actionTypes'
-import { SET_MOVES, SET_SELECTED_MOVE_LINE, SET_SELECTED_MOVE_PAYMENTS } from '@/constants/mutationTypes'
+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'
 
 const initialState = {
     moves : null,
@@ -67,6 +67,42 @@ const mutations = {
      */
     [SET_SELECTED_MOVE_PAYMENTS] (state, payload) {
         state.movesPayments = [payload, ...state.movesPayments]
+    },
+    /**
+     * [actions description]
+     * @type {Object}
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [REMOVE_MOVE_LINE] (state, payload) {
+        let moveFoundIndex = state.moves.findIndex(item => item.id === payload.id)
+        state.moves.splice(moveFoundIndex, 1)
+    },
+    /**
+     * [actions description]
+     * @type {Object}
+     * @param  {[type]} state [description]
+     * @param  {[type]} payload [description]
+     */
+    [REMOVE_PAYMENTS_MOVE]( state, payload) {
+        if (payload.mode ==='full') {
+            payload.moveLine.forEach(moves => {
+                let movesFoundIndex = state.moves.find(item => item.id === moves.id)
+                if (movesFoundIndex) return
+                /*ADD MOVE LINE*/
+                state.moves = [moves, ...state.moves]
+                /* REMOVE MOVE CARD*/
+                let movesPaymentsFoundIndex = state.movesPayments.findIndex(item => item.id === moves.id)
+                state.movesPayments.splice(movesPaymentsFoundIndex, 1)
+            })
+        } else {
+            let movesFound = state.moves.find(item => item.id === payload.moveLine.id)
+            if (movesFound) return
+            state.moves = [payload.moveLine, ...state.moves]
+
+            let movesFoundIndex = state.movesPayments.findIndex(item => item.id === payload.moveLine.id)
+            state.movesPayments.splice(movesFoundIndex, 1)
+        }
     }
 }
 
@@ -87,6 +123,44 @@ const actions = {
     [SELECT_MOVE] ({ commit }, payload) {
         commit(SET_SELECTED_MOVE_PAYMENTS, payload)
         commit(SET_SELECTED_MOVE_LINE, payload)
+        /* Remover Move Line */
+        commit(REMOVE_MOVE_LINE, payload)
+    },
+    /**
+     *
+     */
+    [REMOVE_MOVE_PAYMENTS] ({ commit, dispatch }, payload) {
+        commit(REMOVE_PAYMENTS_MOVE, {
+            moveLine: payload,
+            mode: 'partial'
+        })
+        dispatch(ADD_MOVE_IN_INVOICE, {
+            moveLine: payload,
+            mode: 'partial'
+        })
+    },
+    /**
+     * [length description]
+     * @type {[type]}
+     */
+    [REMOVE_MOVE_PAYMENTS_ALL] ({commit, dispatch, state}, payload) {
+        if (!payload) return
+
+        if (state.movesPayments.length === 0 ) return
+
+        dispatch(ADD_MOVE_IN_INVOICE,{
+            moveLine: state.movesPayments.map(item => {
+                return item
+            }),
+            mode: 'full'
+        })
+
+        commit(REMOVE_PAYMENTS_MOVE, {
+            moveLine: state.movesPayments.map(item => {
+                return item
+            }),
+            mode: 'full'
+        })
     }
 }