resources/js/components/ollas/CantidadOllas.vue

@@ -0,0 +1,49 @@
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+export default {
+    name: "CantidadOllas",
+    data() {
+        return {
+            cantidadControl: 0,
+        }
+    },
+    methods: {
+        decrementar() {
+            this.cantidadControl -= 1;
+        },
+        incrementar() {
+            this.cantidadControl += 1;
+        },
+    }
+}
+</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="cantidadControl < 1"
+                        @click.capture="decrementar">
+                    <i class="fa fa-solid fa-minus"></i>
+                </button>
+            </div>
+            <div class="control">
+                <input id="cantidad"
+                       v-model="cantidadControl"
+                       class="input is-small"
+                       type="number"
+                       style="text-align: center">
+            </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>

resources/js/components/ollas/OllasBody.vue

@@ -1,10 +1,11 @@
 <script>
 import PedidosMain from "../pedidos/PedidosMain.vue";
 import { mapActions, mapMutations } from "vuex";
+import CantidadOllas from "./CantidadOllas.vue";
 
 export default {
     name: "OllasBody",
-    components: { PedidosMain },
+    components: { CantidadOllas, PedidosMain },
     methods: {
         ...mapActions('pedido', ["getPedidoDeOllas", "getGrupoDeCompra"]),
         ...mapMutations('ui', ["migasOllas"])
@@ -19,7 +20,11 @@ export default {
 
 <template>
     <div id="ollas-body" class="pb-6 mb-6">
-        <pedidos-main></pedidos-main>
+        <pedidos-main>
+            <template v-slot:cartel>
+                <cantidad-ollas/>
+            </template>
+        </pedidos-main>
     </div>
 </template>