eiru_pos/src/components/common/CartItem.vue

<template lang="pug">
    li.cart-item(:class="{ 'cart-item-invalid': !isValid() }" :style="{ height: itemHeight + 'px' }")
        h3.item-name {{ item.name }}
        input.item-quantity(
            type='number'
            v-model.number='quantity'
            @focus='onFocus'
            @blur='onBlur'
        )
        span.item-x x
        span.item-price {{ item.price | currency(...currencyOptions) }}
        span.item-equals =
        span.item-subtotal {{ (item.price * (item.quantity || 1)) | currency(...currencyOptions) }}
        .item-packs-wrapper(v-if='!!item.packs.length')
            h3.item-packs-title Contenido del pack
            ul.item-packs
                li.item-pack(
                    v-for='(pack, index) in item.packs'
                    :key='index'
                ) 
                    span.pack-index {{ index + 1 }}.
                    h3.pack-name {{ pack.name }}
                    span.pack-x x
                    span.pack-quantity {{ pack.quantity }}
        .cart-item-options-wrapper
            .cart-item-options
                .cart-item-option(
                    class='fa fa-plus'
                    @click='onClickIncrement'
                )
                .cart-item-option(
                    class='fa fa-minus'
                    @click='onClickDecrement'
                )
                .cart-item-option(
                    class='fa fa-money'
                    @click='onClickMoney'
                )
                .cart-item-option(
                    class='fa fa-undo'
                    @click='onClickUndo'
                )
                .cart-item-option(
                    class='fa fa-trash'
                    @click='onClickDelete'
                )
</template>

<script>
    export default {
        props: {
            index: {
                type: Number,
                default: -1,
                required: true
            },
            item: {
                type: Object,
                default: null
            },
            currencyOptions: {
                type: Object,
                default: {
                    symbol: '$',
                    position: 'before',
                    thousandsSeparator: '.',
                    decimalPlaces: 2,
                    decimalSeparator: ',' 
                }
            }
        },
        computed: {
            quantity: {
                get() {
                    return this.item.quantity
                },
                set(value) {
                    this.input = !value ? 1 : value

                    if (this.editing) {
                        this.handleEditing(value)

                        return
                    }

                    this.computeQuantity()
                }
            },
            itemHeight: {
                get() {
                    return 
                }
            }
        },
        watch: {
            item: {
                handler(value) {
                    this.onChange(value)
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            handleEditing(value) {
                if (value === '') {
                    clearTimeout(this.inputDaemon)
                    return
                }

                if (this.inputDaemon !== null) {
                    clearTimeout(this.inputDaemon)
                }

                this.inputDaemon = setTimeout(() => {
                    this.computeQuantity()
                }, 300)
            },
            computeQuantity() {
                if (this.input > this.item.quantity) {
                    this.onClickIncrement()
                } else {
                    this.onClickDecrement()
                }
            },
            onFocus() {
                this.editing = true
                this.input = 0
            },
            onBlur() {
                this.editing = false
                this.input = 0
            },
            onInputChange(e) {
                console.log(e)
            },
            onChange(item) {
                this.itemHeight = 90 + (item.packs.length * 30) 
                this.$emit('onChange', item)
            },
            onClickIncrement() {
                this.$emit('onClickIncrement', {
                    id: this.item.id,
                    quantity: this.editing ? this.input : 1
                })
            },
            onClickDecrement() {
                this.$emit('onClickDecrement', {
                    id: this.item.id,
                    quantity: this.editing ? this.input : -1
                })
            },
            onClickMoney() {
                this.$emit('onClickMoney', this.item)
            },
            onClickUndo() {
                this.$emit('onClickUndo', this.item)
            },
            onClickDelete() {
                this.$emit('onClickDelete', {
                    id: this.item.id
                })
            },
            isValid() {
                return this.item.price > 0
            }
        },
        data() {
            return {
                editing: false,
                input: 0,
                inputDaemon: null,
                itemHeight: 90
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .cart-item
        width: 100%
        list-style: none outside none
        border-bottom: 1px solid $app-border-color
        box-sizing: border-box
        position: relative
        &.cart-item-invalid
            border-bottom: 2px solid $app-error-color
        &:nth-child(1)
            border-top: 1px solid $app-border-color
        &:hover
            transition-duration: 1000ms
            border-bottom: 2px solid $app-main-color
        .item-name
            width: 100%
            height: 20px
            margin: 10px 0 5px 0
            float: left
            font-size: 8pt
            display: inline-block
        .item-quantity
            width: 60px
            height: 28px
            margin-top: 6px
            text-align: right
            float: left
            display: inline-block
            user-select: none
            cursor: pointer
            border-radius: 0
        .item-x
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: right
            float: left
            display: inline-block
        .item-price
            width: 80px
            height: 20px
            margin-top: 12px
            text-align: right
            float: left
            display: inline-block
        .item-equals
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            float: left
            display: inline-block
        .item-subtotal
            width: 100px
            height: 20px
            margin-top: 12px
            text-align: right
            font-weight: bold
            display: inline-block
        .item-packs-wrapper
            margin-top: 15px
            .item-packs-title
                margin: 0
                font-size: 8pt
                color: $app-border-color
            .item-packs
                list-style: none
                padding-left: 10px
                .item-pack
                    padding-top: 5px
                    padding-bottom: 2px
                    .pack-index
                        display: inline-block
                        width: 20px
                        font-size: 8pt
                    .pack-name
                        display: inline-block
                        width: 120px
                        margin: 0
                        font-size: 8pt
                    .pack-x
                        display: inline-block
                        width: 20px
                        margin: 0
                        font-size: 8pt
                    .pack-quantity
                        display: inline-block
                        width: 50px
                        margin: 0
                        font-size: 8pt
        .cart-item-options-wrapper
            width: 100%
            height: 20px
            position: absolute
            bottom: 0
            display: flex
            justify-content: center
            .cart-item-options
                width: 120px
                height: 20px
                border: 1px solid #d3d3d3
                border-bottom: none
                display: flex
                justify-content: center
                .cart-item-option
                    width: 18px
                    height: 18px
                    margin: 0 5px
                    color: #666
                    &:hover
                        cursor: pointer
                    &.fa
                        padding-left: 2px
                        line-height: 20px
                        &.fa-plus:hover
                            color: #2196f3
                        &.fa-minus:hover
                            color: #ffc107
                        &.fa-money:hover
                            color: #4caf50
                        &.fa-undo:hover
                            color: #3f51b5
                        &.fa-trash:hover
                            color: #f44336
</style>