eiru_purchases/src/components/modals/PriceModal.vue

<template lang="pug">
    modal(name='product-price' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'product-price']")
        form
            .price-item
                label.price-label Precio unitario
                input.price-input(:value='(!item || item.price) | currency(...options)' readonly)
            .price-item
                label.price-label Precio mínimo
                input.price-input(:value='(!item || item.minimumPrice) | currency(...options)' readonly)
            .price-item
                label.price-label Precio máximo
                input.price-input(:value='(!item || item.maximumPrice) | currency(...options)' readonly)
            hr
            .price-item
                label.price-label Precio aplicado
                input.price-input(v-model='formattedAmmount' :class="{'price-input-invalid': !isValid()}" autofocus)
            .price-item
                label.price-label {{ residual < 0 ? 'Ganancia' : 'Descuento' }}
                input.price-input(:value='residual | absolute | currency(...options)' readonly)
            .price-actions
                button.price-action(@click.prevent='onAccept' :disabled='isValid() === false') Aceptar
                button.price-action(@click.prevent='onCancel') Cancelar
</template> 

<script>
    export default {
        props: {
            item: {
                type: Object,
                default: {
                    price: 0,
                    minimumPrice: 0,
                    maximumPrice: 0
                }
            },
            options: {
                type: Object,
                default: {
                    symbol: '$',
                    position: 'before',
                    thousandsSeparator: '.',
                    decimalPlaces: 2,
                    decimalSeparator: ','
                }
            },
            show: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            formattedAmmount: {
                get() {
                    let formatted = this.$options.filters.currency(this.amount, {...this.options})
                    return this.amount !== 0 ? 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.amount = value
                    this.computeResisual()
                }
            }
        },
        watch: {
            show(value) {
                if (value) {
                    this.$modal.show('product-price')
                } else {
                    this.amount = 0
                    this.residual = 0

                    this.$modal.hide('product-price')
                }
            }
        },
        methods: {
            beforeClose(e) {
                if (this.show) {
                    e.stop()
                }
            },
            onAccept() {
                this.$emit('onAccept', this.amount)
            },
            onCancel() {
                this.$emit('onCancel')
            },
            computeResisual() {
                if (this.amount !== 0) {
                    this.residual = this.item.price - this.amount
                } else {
                    this.residual = 0
                }
            },
            isValid() {
                if (!this.item) {
                    return false
                }

                if (this.amount === 0) {
                    return false
                }

                if (this.item.minimumPrice === 0 && this.item.maximumPrice === 0) {
                    return true
                }

                if (this.amount >= this.item.minimumPrice && this.amount <= this.item.maximumPrice) {
                    return true
                }

                return false
            }
        },
        data() {
            return {
                amount: 0,
                residual: 0
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .product-price
        width: 600px
        height: 340px !important
        form
            width: 100% !important
            height: 290px !important
            padding: 15px !important
            .price-item
                width: 100%
                height: 45px
                margin-bottom: 10px
                &:nth-child(1)
                    .price-input
                        border: none
                &:nth-child(2), &:nth-child(3), &:nth-child(6) 
                    height: 35px
                    margin-bottom: 5px
                    .price-label
                        width: 30%
                        height: 35px
                        font-size: 10pt
                        color: $app-dark-color
                    .price-input
                        width: 70%
                        height: 35px
                        font-size: 18pt
                        text-align: right
                        border: none
                .price-label
                    width: 30%
                    height: 45px
                    font-size: 14pt
                .price-input
                    width: 70%
                    height: 45px
                    font-size: 28pt
                    text-align: right
                    border-radius: 0
                    &.price-input-invalid
                        border-color: $app-error-color
                        box-shadow: 1px 1px 2px $app-error-color, -1px -1px 2px $app-error-color
                        &:focus
                            outline: none
            .price-actions
                float: right
                .price-action
                    width: 160px
                    height: 40px
                    border: none
                    box-shadow: none
                    border-radius: 0
                    margin-right: 5px
                    background: $app-main-color
                    color: $app-bg-color
</style>