71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<script>
|
|
import { mapActions, mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
name: "CantidadOllas",
|
|
methods: {
|
|
...mapActions("ollas", ["actualizarCantidadOllas"]),
|
|
...mapMutations("pedido", ["setCantidadOllas"]),
|
|
incrementar() {
|
|
this.control += 1;
|
|
this.actualizarDebounced();
|
|
},
|
|
decrementar() {
|
|
this.control -= 1;
|
|
this.actualizarDebounced();
|
|
},
|
|
async actualizarDebounced() {
|
|
const params = { cantidad: this.control };
|
|
clearTimeout(this.debounceTimer);
|
|
this.debounceTimer = setTimeout(() => {
|
|
this.setCantidadOllas(params);
|
|
this.actualizarCantidadOllas(params);
|
|
}, 500);
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState("pedido", ["cantidad_de_ollas"])
|
|
},
|
|
data() {
|
|
return {
|
|
debounceTimer: null,
|
|
control: 0,
|
|
};
|
|
},
|
|
watch: {
|
|
cantidad_de_ollas() {
|
|
this.control = this.cantidad_de_ollas;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="notification has-text-centered">
|
|
<label class="label">Cantidad de ollas:</label>
|
|
<div class="field has-addons is-justify-content-center contador">
|
|
<div class="control">
|
|
<button class="button is-small"
|
|
:disabled="control < 1"
|
|
@click.capture="decrementar">
|
|
<i class="fa fa-solid fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<input id="cantidad"
|
|
v-model="control"
|
|
class="input is-small has-text-centered"
|
|
type="number"
|
|
@input="actualizarDebounced">
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-small" @click="incrementar">
|
|
<i class="fa fa-solid fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|