[ADD] Paso 3 Selecionar la Cuota

models/res_partner.py

@@ -40,7 +40,7 @@ class ResPartner(models.Model):
                         'date_invoice': invoice.date_invoice,
                         'amount_total': invoice.amount_total,
                         'residual': invoice.residual,
-                        'movelines': movelines
+                        'moveLines': movelines
                     })
 
             partners.append({
@@ -57,5 +57,5 @@ class ResPartner(models.Model):
                 'categories': categories,
                 'invoices': invoices
             })
-            
+
         return partners

src/Payments.vue

@@ -6,7 +6,7 @@
 			tab-content(title="Cual es la factura?" :before-change="checkInvoice")
 				invoice-step
 			tab-content(title="Que cuota es?")
-				h6 Move Line
+				move-step
 			tab-content(title="Como quieres pagar?")
 				h6 Metodo de pagos
 		loader
@@ -18,6 +18,7 @@
 
 	import PartnerStep from '@/components/partner/PartnerStep'
 	import InvoiceStep from '@/components/invoice/InvoiceStep'
+	import MoveStep from '@/components/move/MoveStep'
 	import Loader from '@/components/Loader'
 
 	import {mapActions, mapGetters } from 'vuex'
@@ -29,6 +30,7 @@
 			FormWizard,
 			PartnerStep,
 			InvoiceStep,
+			MoveStep,
 			Loader
 		},
 		computed: mapGetters([

src/components/invoice/invoiceContainer/InvoiceCard.vue → src/components/invoice/InvoiceCard.vue

@@ -36,7 +36,7 @@
 
 <style lang="sass">
     .invoice-card
-        width: 258px
+        width: 250px
         height: 125px
         margin: 5px
         border: 1px solid #d3d3d3
@@ -45,7 +45,7 @@
 
         &.selected-invoice
             transition-duration: 0.3s
-            border-bottom: 3px solid #7c7bad
+            border-top: 3px solid #7c7bad
 
         &:hover
             cursor: pointer

src/components/invoice/invoiceContainer/InvoiceGrid.vue → src/components/invoice/InvoiceGrid.vue

@@ -6,7 +6,7 @@
 
 <script>
     import { mapGetters } from 'vuex'
-    import InvoiceCard from '@/components/invoice/invoiceContainer/InvoiceCard'
+    import InvoiceCard from '@/components/invoice/InvoiceCard'
 
     export default {
 
@@ -22,7 +22,7 @@
 <style lang="sass">
     .invoice-container
         width: 100%
-        height: cal(100% -50px)
+        height: calc(100% - 100px)
         margin-top: 15px
         overflow-y: auto
 

src/components/invoice/InvoiceSearcher.vue

@@ -0,0 +1,75 @@
+<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/invoice/InvoiceStep.vue

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

src/components/invoice/invoiceContainer/InvoiceContainer.vue

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

src/components/invoice/invoiceContainer/InvoiceSearcher.vue

@@ -1,25 +0,0 @@
-<template lang="pug">
-    .invoice-searcher
-        input(type="text" placeholder="Buscar una Factura" v-model="search")
-</template>
-
-<script>
-    export default {
-    }
-</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/MoveCard.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+    .move-card
+        h3 Hola 
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="sass">
+    .move-card
+        width: calc(100% - 60px)
+        height: 100px
+        margin: 5px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+
+        .move-tag
+            width: 50px
+            height: 50px
+            position: absolute
+            top: 0
+            right: 0
+            border-radius: 0 0 0 90%
+            transition-duration: 0.3s
+            background: #4caf50
+
+            .move-tag-label,
+                width: 100%
+                height: 22px
+                padding-top: 5px
+                margin: 0px
+                text-align: center
+                font-size: 10pt
+                font-weight: bold
+                color: #fff
+                position: relative
+
+
+
+
+</style>

src/components/move/MoveContainer.vue

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

src/components/move/MoveGrid.vue

@@ -0,0 +1,31 @@
+<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/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%
+</style>

src/components/move/MoveStep.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+    .move-step
+        move-Container
+        payments-container
+</template>
+
+<script>
+
+    import MoveContainer from '@/components/move/MoveContainer'
+    import PaymentsContainer from '@/components/move/PaymentsContainer'
+
+    export default {
+        components: {
+            MoveContainer,
+            PaymentsContainer
+        }
+    }
+</script>
+
+<style lang="sass">
+    .move-step
+        width: 100%
+        height: 100%
+        padding-right: 5px
+        display: inline-block
+</style>

src/components/move/PaymentsContainer.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+    .payments-container
+        Aqui va estar loque voy a pagar
+</template>
+
+<script>
+
+    export default {
+    }
+</script>
+
+<style lang="sass">
+    .payments-container
+        width: 100%
+        height: 500px
+        display: inline-block
+</style>

src/store/index.js

@@ -8,6 +8,7 @@ import mutations from '@/store/mutations'
 // Modules
 import partners from '@/store/modules/partners'
 import invoices from '@/store/modules/invoices'
+import moveLines from '@/store/modules/moveLines'
 import loader from '@/store/modules/loader'
 
 Vue.use(Vuex)
@@ -20,6 +21,7 @@ const Store = new Vuex.Store({
     modules:{
         partners,
         invoices,
+        moveLines,
         loader
     }
 })

src/store/modules/invoices.js

@@ -22,6 +22,9 @@ const mutations = {
     },
     selectInvoice (state, payload){
         state.selectedInvoices = payload.invoice
+    },
+    applyInvoicesFilter( state, payload){
+        state.filteredInvoices = payload
     }
 }
 
@@ -35,6 +38,11 @@ const actions = {
         commit('selectInvoice',{
             invoice: payload
         })
+
+        dispatch('pushMovelines', payload)
+    },
+    filterInvoices ({ commit }, payload){
+        commit('applyInvoicesFilter', payload)
     }
 
 }

src/store/modules/moveLines.js

@@ -0,0 +1,28 @@
+const state = {
+    moveLines: []
+}
+
+const getters = {
+    moveLines (state) {
+        return state.moveLines
+    }
+}
+
+const mutations = {
+    pushMovelines (state, payload) {
+        state.moveLines = payload.moveLines
+    }
+}
+
+const actions = {
+    pushMovelines({ commit, dispatch }, payload ) {
+        commit('pushMovelines', payload)
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}