Cambio cantidad ollas, ahora es una solapa toggleable que baja desde las migas

resources/js/components/ollas/CantidadOllas.vue

@@ -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",
+    name: "CantidadOllas",
-  methods: {
+    data() {
-    ...mapActions("ollas", ["actualizarCantidadOllas"]),
+        return {
-    ...mapMutations("pedido", ["setCantidadOllas"]),
+            control: 0,
-    incrementar() {
+            visible: true,
-      this.control += 1;
+            debounceTimer: null,
-      this.actualizarDebounced();
+        };
     },
-    decrementar() {
+    computed: {
-      this.control -= 1;
+        ...mapState("pedido", ["cantidad_de_ollas"]),
-      this.actualizarDebounced();
+        iconoToggle() {
+            return this.visible? 'fas fa-angle-up' : 'fas fa-angle-down'
+        }
     },
-    async actualizarDebounced() {
+    watch: {
-      const params = { cantidad: this.control };
+        cantidad_de_ollas(newVal) {
-      clearTimeout(this.debounceTimer);
+            this.control = newVal;
-      this.debounceTimer = setTimeout(() => {
+        },
-        this.setCantidadOllas(params);
+    },
-        this.actualizarCantidadOllas(params);
+    methods: {
-      }, 500);
+        ...mapActions("ollas", ["actualizarCantidadOllas"]),
-    }
+        ...mapMutations("pedido", ["setCantidadOllas"]),
-  },
+        incrementar() {
-  computed: {
+            this.control++;
-      ...mapState("pedido", ["cantidad_de_ollas"])
+            this.actualizarDebounced();
-  },
+        },
-  data() {
+        decrementar() {
-    return {
+            if (this.control > 0) {
-      debounceTimer: null,
+                this.control--;
-      control: 0,
+                this.actualizarDebounced();
-    };
+            }
-  },
+        },
-  watch: {
+        actualizarDebounced() {
-    cantidad_de_ollas() {
+            clearTimeout(this.debounceTimer);
-      this.control = this.cantidad_de_ollas;
+            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>

resources/js/components/ollas/OllasBody.vue

@@ -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">
+    <div id="ollas-body" class="mt-0 mb-6 pb-0 pb-6">
-        <pedidos-main>
+        <pedidos-main/>
-            <template v-slot:cartel>
-                <cantidad-ollas/>
-            </template>
-        </pedidos-main>
     </div>
 </template>
 
 <style scoped>
-
 </style>

resources/js/components/pedidos/PedidosMain.vue

@@ -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>