resources/js/components/ollas/CantidadOllas.vue

@@ -1,18 +1,13 @@
 <script>
+import { mapMutations, mapState } from "vuex";
+
 export default {
     name: "CantidadOllas",
-    data() {
-        return {
-            cantidadControl: 0,
-        }
-    },
     methods: {
-        decrementar() {
+        ...mapMutations("ollas", ["incrementar", "decrementar"]),
-            this.cantidadControl -= 1;
+    },
-        },
+    computed: {
-        incrementar() {
+        ...mapState("ollas", ["cantidad_de_ollas"])
-            this.cantidadControl += 1;
-        },
     }
 }
 </script>
@@ -23,14 +18,14 @@ export default {
         <div class="field has-addons is-justify-content-center contador">
             <div class="control">
                 <button class="button is-small"
-                        :disabled="cantidadControl < 1"
+                        :disabled="cantidad_de_ollas < 1"
                         @click.capture="decrementar">
                     <i class="fa fa-solid fa-minus"></i>
                 </button>
             </div>
             <div class="control">
                 <input id="cantidad"
-                       v-model="cantidadControl"
+                       v-model="cantidad_de_ollas"
                        class="input is-small"
                        type="number"
                        style="text-align: center">

resources/js/components/ollas/OllasNavBarBrand.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, mapMutations, mapState } from "vuex";
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import ChismosaDropdown from "../pedidos/ChismosaDropdown.vue";
 
 export default {
@@ -7,18 +7,23 @@ export default {
     components: { ChismosaDropdown },
     computed: {
         ...mapGetters('pedido', ["pedidoDefinido"]),
+        ...mapGetters('ollas', ["montoTotal"]),
+        ...mapState('ui', ["burger_activa"]),
         ...mapState('pedido', ["nombre"]),
-        ...mapState('ui', ["burger_activa"])
     },
     methods: {
+        ...mapActions('ollas', ["getMontoPorOlla"]),
         ...mapMutations('ui', ["toggleBurger"]),
     },
+    async mounted() {
+        await this.getMontoPorOlla();
+    }
 }
 </script>
 
 <template>
     <div class="navbar-item hide-below-1024">
-        <p v-if="pedidoDefinido">{{ nombre }}</p>
+        <p v-if="pedidoDefinido">{{ `${nombre} - Monto total: ${montoTotal}` }}</p>
         <chismosa-dropdown
             v-if="pedidoDefinido"
             class="hide-above-1023"

resources/js/store/index.js

@@ -6,6 +6,7 @@ import login from "./modules/login";
 import pedido from "./modules/pedido";
 import productos from "./modules/productos";
 import ui from "./modules/ui";
+import ollas from "./modules/ollas";
 
 Vue.use(Vuex);
 
@@ -17,5 +18,6 @@ export default new Vuex.Store({
         pedido,
         productos,
         ui,
+        ollas,
     },
 });

resources/js/store/modules/ollas.js

@@ -0,0 +1,39 @@
+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 = {
+    async getMontoPorOlla({ commit }) {
+        const response = await axios.get('/api/parametros');
+        commit('setMontoPorOlla', response.data);
+    },
+};
+
+const getters = {
+    montoTotal() {
+        return state.monto_por_olla * state.cantidad_de_ollas;
+    }
+};
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions,
+    getters,
+};