pedi2/resources/js/components/pedidos/ProductoCantidad.vue

<template>
    <div>
        <div class="field has-addons contador">
            <div class="control">
                <button class="button is-small" @click.capture="decrementar();">
                    <i class="fa fa-solid fa-minus"></i>
                </button>
            </div>
            <div class="control">
                <input id="cantidad" v-model="cantidad" class="input is-small" type="number" style="text-align: center">
            </div>
            <div class="control" @click="incrementar();">
                <button class="button is-small">
                    <i class="fa fa-solid fa-plus"></i>
                </button>
            </div>
            <button :disabled="disableConfirm()" class="button is-small is-success ml-1" @click="confirmar()">
                <span class="icon">
                    <i class="fas fa-check"></i>
                </span>
            </button>
            <button :disabled="!puedeBorrar()" class="button is-small is-danger ml-1" @click="borrar()">
                <span class="icon">
                    <i class="fas fa-trash-alt"></i>
                </span>
            </button>
        </div>
        <div v-if="producto.requiere_notas" v-bind:class="{'has-icons-right': notas_warning_visible}" class="control is-full-width has-icons-left">
            <span class="icon is-small is-left">
                <i class="fas fa-sticky-note"></i>
            </span>
            <input v-model="notas" v-bind:class="{'is-danger': notas_warning_visible}" id="notas" class="input" type="text" placeholder="Talle o color" />
            <span v-if="notas_warning_visible" class="icon is-small is-right">
                <i class="fas fa-exclamation-triangle"></i>
            </span>
            <article v-if="notas_warning_visible" class="message is-danger is-small">
                <div class="message-body">
                    No se puede dejar este campo vac&iacute;o
                </div>
            </article>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            producto: Object
        },
        data() {
            return {
                cantidad: this.cantidadEnChismosa(),
                notas: this.notasEnChismosa(),
                notas_warning_visible: false,
            }
        },
        mounted() {
            Event.$on('sync-subpedido', (cantidad, productoId, notas) => {
                if (this.producto.id === productoId) 
                    this.sincronizar(cantidad, notas);
            });
        },
        methods: {
            notasEnChismosa() {
                return this.producto.pivot !== undefined ? this.producto.pivot.notas : "";
            },
            cantidadEnChismosa() {
                return this.producto.pivot !== undefined ? this.producto.pivot.cantidad : 0;
            },
            decrementar() {
                this.cantidad -= 1;
            },
            incrementar() {
                this.cantidad += 1;
            },
            confirmar() {
                if (this.warningNotas()) {
                    this.notas_warning_visible = true;
                    return;
                }
                console.log("Emit sync " + this.cantidad + " " + this.notas);
                Event.$emit('sync-subpedido', this.cantidad, this.producto.id, this.notas);
            },
            borrar() {
                this.cantidad = 0;
                this.confirmar();
            },
            sincronizar(cantidad, notas) {
                this.notas_warning_visible = false;
                this.notas = notas;
                this.cantidad = cantidad;
                if (this.producto.pivot !== undefined) {
                    this.producto.pivot.cantidad = cantidad;
                    this.producto.pivot.notas = notas;
                }
            },
            hayCambios() {
                if (this.cantidad != this.cantidadEnChismosa()) return true;
                
                return this.cantidad > 0 && this.notas != this.notasEnChismosa();
            },
            puedeBorrar() {
                return this.cantidadEnChismosa() > 0;
            },
            warningNotas() {
                return this.producto.requiere_notas && this.cantidad > 0 && !this.notas;
            },
            disableConfirm() {
                return !this.hayCambios();
            },
        }
    }
</script>

<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        appearance: textfield;
        -moz-appearance: textfield;
    }
    
    .contador {
        min-width: 178px;
    }

    .is-danger {
        background-color: #fca697;
    }
    .is-danger::placeholder {
        color: #fff;
        opacity: 1; /* Firefox */
    }
</style>