eiru_pos/src/components/steps/PaymentAmount.vue

<template lang="pug">
    .pos-step
        ticket(:customerName='selectedCustomer && selectedCustomer.name' :companyName='user && user.company.name' :total='cartTotal' :items='cartItems' :defaultCurrency='selectedCurrency')
        form.payment-amount
            .form-loading(v-show='processing')
                .form-overlay
                .form-spinner
                    spinner(type='wave')
            .form-separator
                h3 Detalles del Pago
                hr
            .form-item
                label.form-label Monto a Pagar
                input.form-input(:value='cartTotal | currency(...selectedCurrency)' readonly)
            .form-item
                label.form-label Monto Recibido
                input.form-input(v-model='amountReceived' autofocus)
            .form-item(v-show="paymentType === 'cash'")
                hr
                label.form-label Monto a Devolver
                input.form-input(:value='paymentResidual | currency(...selectedCurrency)' readonly)
            .form-item-table(v-show="paymentType === 'credit'")
                table
                    thead
                        tr
                            th Monto a Pagar
                            th Fecha de Pago
                    tbody
                        tr(v-for='line in paymentLines')
                            td {{ line.total | currency(...selectedCurrency) }}
                            td {{ line.date }}
        document-selector(:show='askForPrint' @onPrint='processPrint' @onCancel='processPrint')
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    import Ticket from '@@/common/Ticket'
    import Spinner from '@/components/common/Spinner'
    import DocumentSelector from '@/components/modals/DocumentSelector'

    import { CHANGE_INITIAL_PAYMENT, COMPUTE_PAYMENT_LINES, PROCESS_PRINT } from '@/constants/actionTypes'

    export default {
        components: {
            Ticket,
            Spinner,
            DocumentSelector
        },
        computed: {
            amountReceived: {
                get() {
                    let formatted = this.$options.filters.currency(this.initialPayment, {...this.selectedCurrency})

                    return !!this.initialPayment ? formatted : formatted.replace(/\d/, '')
                },
                set(value) {
                    value = value.replace(/[\.|,](\d{0,2}$)/, '?$1').split(/\?/)
                    value[0] = value[0].replace(/[^0-9]/g, '')
                    value = Number.parseFloat(value.join('.')) || 0

                    this.changeInitialPayment(value)
                    this.computePaymentResidual(value)

                    if (this.paymentType === 'credit') {
                       this.computePaymentLines()		
                    }
                }
            },
            ...mapGetters([
                'user',
                'selectedCustomer',
                'cartItems',
                'cartTotal',
                'paymentTerms',
                'paymentType',
                'paymentLines',
                'initialPayment',
                'paymentResidual',
                'selectedCurrency',
                'processing',
                'askForPrint'
            ])
        },
        methods: {
            computePaymentResidual(value) {
                this.paymentResidual = value < this.cartTotal ? 0 : value - this.cartTotal
            },
            ...mapActions([
                CHANGE_INITIAL_PAYMENT,
                COMPUTE_PAYMENT_LINES,
                PROCESS_PRINT
            ])
        },
        data() {
            return {
                paymentResidual: 0
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .pos-step
        width: 100%
        height: calc(100% - 50px)
        padding-bottom: 50px
        display: flex
        .payment-amount
            width: calc(100% - 450px)
            height: 100%
            margin-right: 50px
            padding: 35px
            background: $app-light-color
            position: relative
            .form-loading
                width: 90%
                height: 90%
                position: absolute
                .form-overlay
                    width: 100%
                    height: 100%
                    background: $app-bg-color
                    opacity: 0.5
                    position: absolute
                .form-spinner
                    width: 100%
                    height: 100%
                    display: flex
                    justify-content: center
                    align-items: center
            .form-separator
                h3
                    color: $app-separator-color
                    font-size: 8pt
                    margin: 0
                hr
                    margin-top: 15px
            .form-item
                width: 100%px
                height: 45px
                margin-bottom: 15px
                .form-label
                    width: 250px
                    height: 45px
                    font-size: 14pt
                .form-input
                    width: 350px
                    height: 45px
                    font-size: 14pt
                    border-radius: 0
                    &.input-only
                        margin-left: 250px
                        margin-bottom: 15px
            .form-item-table
                width: 100%
                height: 200px
                border: 1px solid $app-border-color
                overflow-y: auto
                table
                    width: 100%
                    thead
                        th
                            line-height: 35px
                            padding-left: 10px
                        th:nth-child(1)
                            width: 200px
                        th:nth-child(2)
                            width: 200px
                    tbody
                        td
                            height: 35px
                            padding-left: 10px

                        td:nth-child(1)
                            width: 200px
                        td:nth-child(2)
                            width: 200px
</style>