eiru_pos/src/components/modals/PricelistModal.vue

<template lang="pug">
    modal(
        name='pricelist-modal'
        transition='nice-modal-fade'
        width='400px'
        height='600px'
        :classes="['v--modal', 'pricelist-modal']"
        @before-close='beforeClose'
    )
        .pricelist-content
            h1 Lista de precios
            .pricelist-items-wrapper
                ul.pricelist-items
                    li.pricelist-item(
                        v-for='item in items'
                        :key='item.id'
                        @click.prevent='onApply(item)'
                    )
                        h3 {{ computePrice(item) }}
                        h1 {{ item.pricelistName }}
            .pricelist-options
                button.pricelist-option(
                    @click.prevent='onCancel'
                ) Cancelar
</template>

<script>
    export default {
        props: {
            show: {
                type: Boolean,
                default: false
            },
            items: {
                type: Array,
                default: []
            }
        },
        watch: {
            show(canShow) {
                if (canShow) {
                    this.$modal.show('pricelist-modal')
                    return
                }

                this.$modal.hide('pricelist-modal')
            }
        },
        methods: {
            beforeClose(e) {
                if(this.show) {
                    e.stop()
                }
            },
            computePrice(item) {
                return (item.productPrice * (1 + item.priceDiscount)) + item.priceSurcharge
            },
            onApply(item) {
                const price = this.computePrice(item)
                this.$emit('onApply', price)
            },
            onCancel(e) {
                this.$emit('onCancel')
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .pricelist-modal
        .pricelist-content
            width: 100%
            height: 100%
            padding: 15px
            h1
                font-size: 12pt
                color: #757575
            .pricelist-items-wrapper
                width: 100%
                height: calc(100% - 95px)
                overflow-y: auto
                .pricelist-items
                    width: 100%
                    padding-left: 0
                    a
                    .pricelist-item
                        list-style: none
                        padding: 0
                        border-bottom: 1px solid #d3d3d3
                        h1
                            font-size: 10pt
                        &:hover
                            cursor: pointer
                            border-bottom: 2px solid $app-main-color
            .pricelist-options
                float: right
                .pricelist-option
                    width: 160px
                    height: 40px
                    border: none
                    box-shadow: none
                    border-radius: 0
                    margin-right: 5px
                    background: $app-main-color
                    color: $app-bg-color
</style>