100 lines
3.0 KiB
Vue
100 lines
3.0 KiB
Vue
<template>
|
|
<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="!hayCambios()" 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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
producto: Object
|
|
},
|
|
data() {
|
|
return {
|
|
cantidad: this.producto.cantidad,
|
|
enChismosa: this.producto.cantidad,
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.producto.pivot !== undefined) {
|
|
this.cantidad = this.producto.pivot.cantidad;
|
|
this.enChismosa = this.cantidad;
|
|
}
|
|
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;
|
|
if (this.producto.pivot != null) {
|
|
this.producto.pivot.cantidad = cantidad;
|
|
} else {
|
|
this.producto.cantidad = cantidad;
|
|
}
|
|
this.enChismosa = cantidad;
|
|
},
|
|
hayCambios() {
|
|
return this.cantidad != this.enChismosa;
|
|
},
|
|
puedeBorrar() {
|
|
return this.enChismosa > 0;
|
|
},
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
</style> |