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

<template>
    <div class="is-justify-content-center">
        <div class="field has-addons is-justify-content-center contador">
            <div class="control">
                <button class="button is-small" :disabled="cantidadControl < 1" v-if="!aprobado"  @click.capture="decrementar();">
                    <i class="fa fa-solid fa-minus"></i>
                </button>
            </div>
            <div class="control">
                <input id="cantidad"
                       v-model="cantidadControl"
                       class="input is-small"
                       type="number"
                       style="text-align: center"
                       :readonly="aprobado">
            </div>
            <div class="control">
                <button class="button is-small" v-if="!aprobado" @click="incrementar();">
                    <i class="fa fa-solid fa-plus"></i>
                </button>
            </div>
            <button :disabled="!hayCambios || cantidadControl < 0" v-if="!aprobado" class="button is-small is-success ml-1" @click="confirmar()">
                <span class="icon">
                    <i class="fas fa-check"></i>
                </span>
            </button>
            <button :disabled="!puedeBorrar" v-if="!aprobado"  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="!aprobado && requiere_notas"
             :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="notasControl" 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>
import { mapActions, mapGetters, mapState } from "vuex";

export default {
    props: {
        producto_id: {
            type: Number,
            required: true,
        },
        requiere_notas: {
            type: Number,
            required: true,
        }
    },
    data() {
        return {
            cantidadControl: 0,
            notasControl: '',
            notas_warning_visible: false,
        }
    },
    watch: {
        cantidadEnChismosa() {
            this.actualizar();
        },
        notasEnChismosa() {
            this.actualizar();
        }
    },
    mounted() {
        this.actualizar();
    },
    computed: {
        ...mapState('pedido', ["aprobado"]),
        ...mapGetters('pedido', ["enChismosa", "cantidad", "notas"]),
        cantidadEnChismosa() {
            return this.cantidad(this.producto_id);
        },
        notasEnChismosa() {
            return this.notas(this.producto_id);
        },
        hayCambios() {
            return this.cantidadControl !== this.cantidadEnChismosa || this.notasControl !== this.notasEnChismosa;
        },
        puedeBorrar() {
            return this.enChismosa(this.producto_id) && !this.aprobado;
        },
        faltaNotas() {
            return this.requiere_notas && this.cantidadControl > 0 && !this.notasControl;
        },
    },
    methods: {
        ...mapActions('pedido', ["modificarChismosa"]),
        decrementar() {
            this.cantidadControl -= 1;
        },
        incrementar() {
            this.cantidadControl += 1;
        },
        borrar() {
            this.cantidadControl = 0;
            this.confirmar();
        },
        async confirmar() {
            if (this.faltaNotas) {
                this.notas_warning_visible = true;
                return;
            }
            await this.modificarChismosa({
                producto_id: this.producto_id,
                cantidad: this.cantidadControl,
                notas: this.notasControl
            });
        },
        actualizar() {
            this.cantidadControl = this.cantidadEnChismosa;
            this.notasControl = this.notasEnChismosa;
        },
    }
}
</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: 1.5rem;
}

.is-danger {
    background-color: #fca697;
}

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