[ADD] Detalles de Clientes

src/Payments.vue

@@ -1,10 +1,14 @@
 <template lang="pug">
 	.payments
 		form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" nextButtonText="Continuar" backButtonText="Volver" transition="fade" @on-complete="completeSale()")
-			tab-content(title="Selecionar Cliente" :before-change="checkPartner")
+			tab-content(title="Quien es el cliente?" :before-change="checkPartner")
 				partner-step
-			tab-content(title="Seleccionar Factura")
+			tab-content(title="Cual es la factura?")
 				invoice-step
+			tab-content(title="Que cuota es?")
+				h6 Move Line
+			tab-content(title="Como quieres pagar?")
+				h6 Metodo de pagos
 		loader
 </template>
 

src/components/invoice/InvoiceStep.vue

@@ -1,17 +1,15 @@
 <template lang="pug">
     .payments-step
         invoice-container
-        move-container
 </template>
 
 <script>
+
     import InvoiceContainer from '@/components/invoice/invoiceContainer/InvoiceContainer'
-    import MoveContainer from '@/components/invoice/moveContainer/MoveContainer'
 
     export default {
         components: {
-            InvoiceContainer,
-            MoveContainer
+            InvoiceContainer
         }
     }
 </script>

src/components/invoice/invoiceContainer/InvoiceCard.vue

@@ -36,8 +36,8 @@
 
 <style lang="sass">
     .invoice-card
-        width: 200px
-        height: 110px
+        width: 258px
+        height: 125px
         margin: 5px
         border: 1px solid #d3d3d3
         display: inline-block

src/components/invoice/invoiceContainer/InvoiceContainer.vue

@@ -18,7 +18,7 @@
 
 <style lang="sass">
     .invoice-step
-        width: calc(100% - 500px)
+        width: 100%
         height: 100%
         padding-right: 5px
         display: inline-block

src/components/invoice/moveContainer/MoveContainer.vue

@@ -1,23 +0,0 @@
-<template lang="pug">
-    .move-container
-            h3 Aqui va las lineas de la Factura
-</template>
-
-<script>
-    // import InvoiceSearcher from '@/components/invoice/InvoiceSearcher'
-    export default {
-        components: {
-        }
-    }
-</script>
-
-<style lang="sass">
-    .move-container
-        width: 300px
-        height: 100px
-        border-left: 1px solid #d3d3d3
-        padding-left: 10px
-        display: inline-block
-        vertical-align: top
-
-</style>

src/components/partner/PartnerDetails.vue

@@ -1,117 +1,102 @@
 <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) }}
+    .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',
-            'partnerInvoices',
-            'partnerMoveLine'
+            'selectedPartner'
         ]),
-        methods:{
-            formatNumber(valor){
-                return accounting.format(valor, 0,'.', ',')
+        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 : ''
             },
-            formatDate(Fecha){
-                return moment(Fecha).format('DD-MM-YYYY');
+            getEmail(){
+                return this.hasSelectedPartner && !!this.selectedPartner.email ? this.selectedPartner.email :''
             },
-            verifyDate(){
-                return ".tr-Expired"
+            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">
-    .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
+    .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%
-                margin: 6px 0px
-                font-size: 12px
-                color: #727575
-
-                tbody
-                    tr
-                        td
-                            &:nth-child(1)
-                                width: 110px
-                                text-align: left
+                height: 40px
+                margin-bottom: 5px
 
-                            &:nth-child(2)
-                                width: 100px
-                                text-align: right
+                .partner-form-label, .form-label-finazas
+                    width: 80px
+                    height: 35px
 
-                            &:nth-child(3)
-                                width: 100px
-                                text-align: right
+                .partner-form-imput, .form-imput-finazas
+                    width: 220px
+                    height: 35px
+                    border-radius: 0
+                
 
-                        .tr-unexpired
-                            color: #727575
+                .form-label-finazas
+                    width: 150px
 
-                        .tr-Expired
-                            color: red
+                .form-imput-finazas
+                    width: 150px
+                    text-align: center
 
 </style>

src/components/partner/PartnerDetailsInvoices.vue

@@ -0,0 +1,117 @@
+<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/PartnerStep.vue

@@ -6,7 +6,7 @@
                 partner-grid
             transition(name="slide-fade")
                 .partner-right(v-if="hasSelectedPartner")
-                    partner-grid-details
+                    partner-details
 </template>
 
 <script>
@@ -14,13 +14,13 @@
     import { mapGetters } from 'vuex'
     import PartnerSearcher from '@/components/partner/PartnerSearcher'
     import PartnerGrid from '@/components/partner/PartnerGrid'
-    import PartnerGridDetails from '@/components/partner/PartnerGridDetails'
+    import PartnerDetails from '@/components/partner/PartnerDetails'
 
     export default {
         components: {
             PartnerSearcher,
             PartnerGrid,
-            PartnerGridDetails
+            PartnerDetails
         },
         computed: mapGetters([
             'hasSelectedPartner'
@@ -41,7 +41,7 @@
                 width: 100%
 
             .partner-right
-                width: 360px
+                width: 400px
                 margin: 0 15px
 
             .slide-fade-enter-active