eiru_pos/src/components/modals/DiscountModal.vue

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

                    return this.ammount !== 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.ammount = value
                    this.computeDiscount()
                }
            }
        },
        watch: {
            show(value) {
                if (value) {
                    this.$modal.show('product-discount')
                } else {
                    this.ammount = 0
                    this.discount = 0

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

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

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

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

                return false
            }
        },
        data() {
            return {
                discount: 0,
                ammount: 0
            }
        }
    }
</script>

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