pedi2/resources/js/components/ProductoCard.vue

<script>
export default {
    name: "ProductoCard",
    props: {
        producto: Object
    },
    data() {
      return {
          cantidad: this.producto.cantidad,
          enChismosa: this.producto.cantidad,
      }
    },
    mounted() {
      Event.$on('sync-subpedido', (cantidad,productoId) => {
          if (this.producto.id === productoId)
              this.sincronizar(cantidad);
      });
    },
    methods: {
        decrementar() {
            this.cantidad -= 1;
        },
        incrementar() {
            this.cantidad += 1;
        },
        confirmar() {
            Event.$emit('sync-subpedido', this.cantidad, this.producto.id);
        },
        borrar() {
            this.cantidad = 0;
            this.confirmar();
        },
        sincronizar(cantidad) {
            this.cantidad = cantidad;
            this.producto.cantidad = cantidad;
            this.enChismosa = cantidad;
        },
        hayCambios() {
            return this.cantidad != this.enChismosa;
        },
        puedeBorrar() {
            return this.enChismosa > 0;
        },
    }
}
</script>

<template>
    <div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
        <div class="box" style="height:100%">
            <div class="columns">
                <div class="column">
                    <p class="title is-6">
                        {{ producto.nombre }}
                    </p>
                    <p class="subtitle is-7" v-text="producto.proveedor"></p>
                    <span class="subtitle is-7 hidden-from-tablet" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</span>
                </div>
                <div class="column is-one-quarter has-text-right">
                    <p class="has-text-weight-bold has-text-primary">
                        <span class="is-left-mobile">
                            <img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
                            <img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
                        </span>
                        $<span v-text="producto.precio"></span>
                    </p>
                </div>
            </div>
            <footer class="columns">
                <div class="column is-three-quarters">
                    <div class="field has-addons">
                        <div class="control">
                            <button :disabled="cantidad < 1" 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="!hayCambios() || cantidad < 0" class="button is-small is-success ml-3" @click="confirmar()">
                            <span class="icon">
                                <i class="fas fa-check"></i>
                            </span>
                        </button>
                        <button :disabled="!puedeBorrar()" class="button is-small is-danger ml-3" @click="borrar()">
                            <span class="icon">
                                <i class="fas fa-trash-alt"></i>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="column">
                    <p class="subtitle is-7 is-hidden-mobile" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</p>
                </div>
            </footer>
        </div><!-- END BOX -->
    </div>
</template>

<style lang="scss" scoped>
@use "bulma/sass/utilities/mixins";

@include mixins.until(mixins.$desktop) {
    .hidden-until-desktop {
        display: none;
    }
}

@include mixins.from(mixins.$desktop) {
    .min-width-from-desktop {
        min-width: 25rem;
    }
    .hidden-from-desktop {
        display: none;
    }
}

@include mixins.from(mixins.$tablet) {
    .hidden-from-tablet {
        display: none;
    }
}

@include mixins.mobile() {
    .is-left-mobile {
        float: left;
    }
}
</style>