Cambio cantidad ollas, ahora es una solapa toggleable que baja desde las migas
This commit is contained in:
parent
b1fb744684
commit
e7a8d89a29
3 changed files with 134 additions and 71 deletions
|
|
@ -1,71 +1,138 @@
|
|||
<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",
|
||||
methods: {
|
||||
...mapActions("ollas", ["actualizarCantidadOllas"]),
|
||||
...mapMutations("pedido", ["setCantidadOllas"]),
|
||||
incrementar() {
|
||||
this.control += 1;
|
||||
this.actualizarDebounced();
|
||||
name: "CantidadOllas",
|
||||
data() {
|
||||
return {
|
||||
control: 0,
|
||||
visible: true,
|
||||
debounceTimer: null,
|
||||
};
|
||||
},
|
||||
decrementar() {
|
||||
this.control -= 1;
|
||||
this.actualizarDebounced();
|
||||
computed: {
|
||||
...mapState("pedido", ["cantidad_de_ollas"]),
|
||||
iconoToggle() {
|
||||
return this.visible? 'fas fa-angle-up' : 'fas fa-angle-down'
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
}
|
||||
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>
|
||||
|
||||
<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 m-0 p-0"
|
||||
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>
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<script>
|
||||
import PedidosMain from "../pedidos/PedidosMain.vue";
|
||||
import { mapActions, mapMutations } from "vuex";
|
||||
import CantidadOllas from "./CantidadOllas.vue";
|
||||
|
||||
export default {
|
||||
name: "OllasBody",
|
||||
components: { CantidadOllas, PedidosMain },
|
||||
components: { PedidosMain },
|
||||
methods: {
|
||||
...mapActions('pedido', ["getPedidoDeOllas", "getGrupoDeCompra"]),
|
||||
...mapMutations('ui', ["migasOllas"])
|
||||
|
|
@ -19,15 +18,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div id="ollas-body" class="pb-6 mb-6">
|
||||
<pedidos-main>
|
||||
<template v-slot:cartel>
|
||||
<cantidad-ollas/>
|
||||
</template>
|
||||
</pedidos-main>
|
||||
<div id="ollas-body" class="mt-0 mb-6 pb-0 pb-6">
|
||||
<pedidos-main/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ import Canasta from "./Canasta.vue";
|
|||
import Chismosa from "./Chismosa.vue";
|
||||
import NavMigas from "./NavMigas.vue";
|
||||
import { mapActions, mapState } from "vuex";
|
||||
import CantidadOllas from "../ollas/CantidadOllas.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "PedidosMain",
|
||||
components: { NavMigas, Chismosa, Canasta },
|
||||
components: { CantidadOllas, NavMigas, Chismosa, Canasta },
|
||||
computed: {
|
||||
...mapState('ui', ["show_chismosa"]),
|
||||
},
|
||||
|
|
@ -23,6 +24,7 @@ export default defineComponent({
|
|||
<template>
|
||||
<div>
|
||||
<nav-migas/>
|
||||
<cantidad-ollas/>
|
||||
<div class="columns">
|
||||
<div class="column" :class="{ 'is-two-thirds-desktop is-hidden-touch': show_chismosa }">
|
||||
<slot name="cartel"></slot>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue