Agregada lógica de cantidad de ollas

resources/js/components/ollas/CantidadOllas.vue

@@ -1,14 +1,42 @@
 <script>
-import { mapMutations, mapState } from "vuex";
+import { mapActions, mapMutations, mapState } from "vuex";
 
 export default {
   name: "CantidadOllas",
   methods: {
-        ...mapMutations("ollas", ["incrementar", "decrementar"]),
+    ...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("ollas", ["cantidad_de_ollas"])
+      ...mapState("pedido", ["cantidad_de_ollas"])
+  },
+  data() {
+    return {
+      debounceTimer: null,
+      control: 0,
+    };
+  },
+  watch: {
+    cantidad_de_ollas() {
+      this.control = this.cantidad_de_ollas;
     }
+  },
 }
 </script>
 
@@ -18,17 +46,17 @@ export default {
         <div class="field has-addons is-justify-content-center contador">
             <div class="control">
                 <button class="button is-small"
-                        :disabled="cantidad_de_ollas < 1"
+                        :disabled="control < 1"
                         @click.capture="decrementar">
                     <i class="fa fa-solid fa-minus"></i>
                 </button>
             </div>
             <div class="control">
                 <input id="cantidad"
-                       v-model="cantidad_de_ollas"
+                       v-model="control"
-                       class="input is-small"
+                       class="input is-small has-text-centered"
                        type="number"
-                       style="text-align: center">
+                       @input="actualizarDebounced">
             </div>
             <div class="control">
                 <button class="button is-small" @click="incrementar">

resources/js/store/modules/ollas.js

@@ -2,19 +2,12 @@ import axios from "axios";
 
 const state = {
     monto_por_olla: undefined,
-    cantidad_de_ollas: 0,
 };
 
 const mutations = {
     setMontoPorOlla(state, parametros) {
         state.monto_por_olla = Number.parseInt(parametros.find(p => p.id === 'monto-olla').valor);
     },
-    incrementar(state) {
-        state.cantidad_de_ollas += 1;
-    },
-    decrementar(state) {
-        state.cantidad_de_ollas -= 1;
-    },
 };
 
 const actions = {
@@ -22,13 +15,18 @@ const actions = {
         const response = await axios.get('/api/parametros');
         commit('setMontoPorOlla', response.data);
     },
+    async actualizarCantidadOllas({ rootState }, { cantidad: cantidad}) {
+        const barrio = rootState.pedido.grupo_de_compra.id;
+        const params = { cantidad : cantidad };
+        await axios.put(`/ollas/${barrio}/cantidad`, params);
+    }
 };
 
 const getters = {
-    montoTotal() {
+    montoTotal(state, _, rootState) {
-        return state.monto_por_olla * state.cantidad_de_ollas;
+        return state.monto_por_olla * rootState.pedido.cantidad_de_ollas;
     },
-    montoSuperado: (state, getters, rootState) => {
+    montoSuperado: (_, getters, rootState) => {
         return rootState.pedido.total > getters.montoTotal;
     }
 };

resources/js/store/modules/pedido.js

@@ -39,6 +39,7 @@ const mutations = {
         state.nombre = pedido.nombre;
         state.productos = pedido.productos;
         state.total = Number.parseFloat(pedido.total.replace(',',''));
+        state.cantidad_de_ollas = Number.parseInt(pedido.cantidad_de_ollas);
         delete state.aprobado;
         delete state.total_transporte;
         delete state.cantidad_transporte;
@@ -58,6 +59,9 @@ const mutations = {
         state.total_sin_devoluciones = null;
         state.devoluciones_total = null;
         state.devoluciones_notas = null;
+    },
+    setCantidadOllas(state, { cantidad }) {
+        state.cantidad_de_ollas = cantidad;
     }
 };
 
@@ -109,7 +113,7 @@ const actions = {
         commit('reset');
     },
     async getPedidoDeOllas({ commit }) {
-        const response = await axios.get(`/api/ollas/${state.grupo_de_compra.id}`);
+        const response = await axios.get(`/ollas/${state.grupo_de_compra.id}`);
         commit('setPedidoDeOllas', response.data);
     },
 };