[ADD] Selecion de Cuotas

src/components/move/MoveCard.vue

@@ -1,134 +0,0 @@
-<template lang="pug">
-    .move-card-wrapper(@click="selectMoveline(item)")
-        .move-card
-            h2.move-maturity Vencimiento {{ getDate() }}
-            .move-debit-wrapper
-                h2.move-debit-label Total
-                h2.move-debit  {{ getDebit() }}
-            .move-residual-wrapper
-                h2.move-residual-label Saldo
-                h2.move-residual {{ getResidual() }}
-        .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'
-        ]),
-        methods: {
-            ...mapActions([
-                'selectMoveline'
-            ]),
-            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
-            },
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-card-wrapper
-        width: calc(100% - 60px)
-        height: 100px
-        margin: 5px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-        background: rgba(119, 234, 224, 0.2)
-
-        .move-card
-            width: 100%
-            height: 100%
-            position: absolute
-
-            .move-maturity
-                width: 100%
-                height: 25px
-                font-size: 12pt
-                text-align: center
-                margin: 10px 0px 0px 0px
-                position: absolute
-
-            .move-debit-wrapper
-                width: 45%
-                height: calc(100% - 50px)
-                border: 1px solid #d3d3d3
-                margin: 45px 0px 0px 2%
-                position: absolute
-
-                .move-debit
-                    width: 100%
-                    height: 30px
-                    font-size: 12pt
-                    text-align: center
-                    position: absolute
-                    margin-top: 15px
-
-                .move-debit-label
-                    width: 100%
-                    height: 30px
-                    font-size: 15pt
-                    position: absolute
-                    color: #868282
-                    margin-left: 13px
-                    margin-top: 10px
-
-            .move-residual-wrapper
-                width: 45%
-                height: calc(100% - 50px)
-                border: 1px solid #d3d3d3
-                margin: 45px 0px 0px 53%
-                position: absolute
-
-                .move-residual
-                    width: 100%
-                    height: 30px
-                    font-size: 12pt
-                    text-align: center
-                    position: absolute
-                    margin-top: 15px
-
-                .move-residual-label
-                    width: 100%
-                    height: 30px
-                    font-size: 15pt
-                    position: absolute
-                    color: #868282
-                    margin-left: 13px
-                    margin-top: 10px
-        .move-tag
-            // width: 80px
-            // height: 50px
-            position: absolute
-
-            .move-tag-label
-                width: 100%
-                height: 22px
-                text-align: center
-                margin-top: 15px
-                color: rgba(236, 0, 34, 0.4)
-                transform: rotate(-22deg)
-                font-size: 23pt
-                font-weight: bold
-</style>

src/components/move/MoveContainer/MoveCard.vue

@@ -0,0 +1,155 @@
+<template lang="pug">
+    .move-card-wrapper(@click="selectMoveline(item)" v-bind:class="{ 'selected-Line': isSelectedLine() }")
+        .move-card
+            h2.move-maturity Vencimiento {{ getDate() }}
+            .move-debit-wrapper
+                h2.move-debit-label Total
+                h2.move-debit  {{ getDebit() }}
+            .move-residual-wrapper
+                h2.move-residual-label Saldo
+                h2.move-residual {{ getResidual() }}
+        .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'
+        ]),
+        methods: {
+            ...mapActions([
+                'selectMoveline'
+            ]),
+            isSelectedLine() {
+                return this.haSelectedMoveline ? this.item.id === this.selectedMoveline.id : 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
+            },
+        }
+    }
+</script>
+
+<style lang="sass">
+    .move-card-wrapper
+        width: 260px
+        height: 140px
+        margin: 10px 8px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+
+        &.selected-Line
+
+
+        .move-card
+            width: 100%
+            height: 100%
+            position: absolute
+
+            .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: 140px
+                    height: 35px
+                    margin-top: 4px
+                    padding:
+                        top: 5px
+                        right: 10px
+                    float: right
+                    text-align: right
+                    font:
+                        size: 16pt
+
+                .move-debit-label
+                    width: 90px
+                    height: 35px
+                    font-size: 16pt
+                    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: 140px
+                    height: 35px
+                    margin-top: 4px
+                    padding:
+                        top: 5px
+                        right: 10px
+                    float: right
+                    text-align: right
+                    font:
+                        size: 16pt
+
+                .move-residual-label
+                    width: 90px
+                    height: 35px
+                    font-size: 16pt
+                    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.vue → src/components/move/MoveContainer/MoveContainer.vue

@@ -5,7 +5,7 @@
 
 <script>
 
-    import MoveGrid from '@/components/move/MoveGrid'
+    import MoveGrid from '@/components/move/MoveContainer/MoveGrid'
 
     export default {
         components: {

src/components/move/MoveGrid.vue → src/components/move/MoveContainer/MoveGrid.vue

@@ -6,7 +6,7 @@
 
 <script>
     import { mapGetters, mapActions } from 'vuex'
-    import MoveCard from '@/components/move/MoveCard'
+    import MoveCard from '@/components/move/MoveContainer/MoveCard'
 
     export default {
         components: {
@@ -22,7 +22,7 @@
 <style lang="sass">
     .move-grid-wrapper
         width: 100%
-        height: calc(100% - 100px)
+        height: 470px
         margin-top: 15px
         overflow-y: auto
 

src/components/move/MoveLinesContainer.vue → src/components/move/MoveLinesContainer/MoveLinesContainer.vue

@@ -7,8 +7,8 @@
 
 <script>
 
-    import MoveLinesTotal from '@/components/move/MoveLinesTotal'
-    import MoveLinesItems from '@/components/move/MoveLinesItems'
+    import MoveLinesTotal from '@/components/move/MoveLinesContainer/MoveLinesTotal'
+    import MoveLinesItems from '@/components/move/MoveLinesContainer/MoveLinesItems'
 
     export default {
         components: {

src/components/move/MoveLinesItem.vue → src/components/move/MoveLinesContainer/MoveLinesItem.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
     li.move-lines-item
-        h3.move-lines-item-maturity Vencimiento {{ item.date_maturity}}
+        h3.move-lines-item-maturity Vencimiento {{ item.date_maturity}} {{ item.id }}
         span.move-lines-item-subtotal {{ item.amount_residual}}
         .move-lines-item-options-wrapper(class="fa fa-trash" @click="remove(item)")
 </template>

src/components/move/MoveLinesItems.vue → src/components/move/MoveLinesContainer/MoveLinesItems.vue

@@ -5,7 +5,7 @@
 
 <script>
     import { mapGetters, mapActions } from 'vuex'
-    import MoveLinesItem from '@/components/move/MoveLinesItem'
+    import MoveLinesItem from '@/components/move/MoveLinesContainer/MoveLinesItem'
 
     export default {
         components: {

src/components/move/MoveLinesTotal.vue → src/components/move/MoveLinesContainer/MoveLinesTotal.vue

@@ -6,7 +6,7 @@
 
 <script>
 
-    import MoveLinesTotalItem from '@/components/move/MoveLinesTotalItem'
+    import MoveLinesTotalItem from '@/components/move/MoveLinesContainer/MoveLinesTotalItem'
 
     export default {
         components: {

src/components/move/MoveStep.vue

@@ -7,8 +7,8 @@
 
 <script>
 
-    import MoveContainer from '@/components/move/MoveContainer'
-    import MoveLinesContainer from '@/components/move/MoveLinesContainer'
+    import MoveContainer from '@/components/move/MoveContainer/MoveContainer'
+    import MoveLinesContainer from '@/components/move/MoveLinesContainer/MoveLinesContainer'
 
     export default {
         components: {

src/store/modules/moveLines.js

@@ -32,16 +32,19 @@ const mutations = {
 
         state.moveLines = move
     },
+
     selectMoveline(state, payload) {
         state.selectedMoveline = payload.moveline
     },
+
     addMoveline(state, payload) {
-        let finded =state.movelineSelect.find(item => item.id ==payload.moveselect.id)
+        let finded = state.movelineSelect.find(item => item.id == payload.moveselect.id)
 
         if (finded) return
 
         state.movelineSelect =[payload.moveselect, ...state.movelineSelect]
     },
+
     calculateTotal(state) {
         let  sum = 0
 
@@ -51,10 +54,30 @@ const mutations = {
 
         state.total = sum
     },
+
+
     removeLine(state, payload) {
-        let findedMove = state.movelineSelect.find(item => item.id == payload.movedelet.id)
+        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) {
+        // console.log(payload.moveLine);
+        // console.log(state.moveLines);
+        let finded = state.moveLines.find(item => item.id == payload.moveLine.id)
+        console.log(finded);
+        if (finded) return
+
+        state.moveLines = [payload.moveLine, ...state.moveLines]
+
     }
+
 }
 
 const actions = {
@@ -70,6 +93,10 @@ const actions = {
             moveselect: payload
         })
 
+        commit('removeMoveCard',{
+            moveCardDelet: payload
+        })
+
         commit('calculateTotal')
     },
     removeLine({ commit, dispatch}, payload) {
@@ -77,6 +104,10 @@ const actions = {
             movedelet: payload
         })
 
+        commit('addMovelineCard',{
+            moveLine: payload
+        })
+
         commit('calculateTotal')
     }
 }