138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<template>
|
|
<div class="ollas-box mt-0 py-0">
|
|
<div class="header-row">
|
|
<span v-if="visible" class="label">Cantidad de ollas:</span>
|
|
<span v-else class="label">Cantidad de ollas: {{ control }}</span>
|
|
</div>
|
|
<transition name="slide-fade">
|
|
<div v-if="visible" class="field my-1 has-addons is-justify-content-center">
|
|
<div class="control">
|
|
<button class="button is-small" :disabled="control < 1" @click="decrementar">
|
|
<i class="fas fa-minus" />
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
v-model.number="control"
|
|
@input="actualizarDebounced"
|
|
class="input is-small input-centered"
|
|
/>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-small" @click="incrementar">
|
|
<i class="fas fa-plus" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<span class="icon-toggle mt-2 mb-0 pb-0" @click="visible = !visible">
|
|
<i :class="iconoToggle"/>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
name: "CantidadOllas",
|
|
data() {
|
|
return {
|
|
control: 0,
|
|
visible: true,
|
|
debounceTimer: null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState("pedido", ["cantidad_de_ollas"]),
|
|
iconoToggle() {
|
|
return this.visible? 'fas fa-angle-up' : 'fas fa-angle-down'
|
|
}
|
|
},
|
|
watch: {
|
|
cantidad_de_ollas(newVal) {
|
|
this.control = newVal;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions("ollas", ["actualizarCantidadOllas"]),
|
|
...mapMutations("pedido", ["setCantidadOllas"]),
|
|
incrementar() {
|
|
this.control++;
|
|
this.actualizarDebounced();
|
|
},
|
|
decrementar() {
|
|
if (this.control > 0) {
|
|
this.control--;
|
|
this.actualizarDebounced();
|
|
}
|
|
},
|
|
actualizarDebounced() {
|
|
clearTimeout(this.debounceTimer);
|
|
const params = { cantidad: this.control };
|
|
this.debounceTimer = setTimeout(() => {
|
|
this.setCantidadOllas(params);
|
|
this.actualizarCantidadOllas(params);
|
|
}, 500);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.control = this.cantidad_de_ollas;
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ollas-box {
|
|
position: relative;
|
|
left: 0;
|
|
right: 0;
|
|
top: -1.5rem;
|
|
z-index: 2;
|
|
padding: 1rem 1.5rem;
|
|
background: white;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
width: fit-content;
|
|
margin: 1rem auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.input-centered {
|
|
width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon-toggle {
|
|
cursor: pointer;
|
|
color: #888;
|
|
transition: color 0.2s;
|
|
}
|
|
.icon-toggle:hover {
|
|
color: #000;
|
|
}
|
|
|
|
/* Animation */
|
|
.slide-fade-enter-active,
|
|
.slide-fade-leave-active {}
|
|
.slide-fade-enter-from,
|
|
.slide-fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|