Usando vuex para el modal de devoluciones

resources/js/components/pedidos/Chismosa.vue

@@ -19,7 +19,7 @@
                     <th><p>Devoluciones</p></th>
                     <td>
                         <abbr :title="devoluciones_notas">{{ notas_abreviadas }}</abbr>
-                        <button @click.capture="modificarDevoluciones()" class="button is-warning is-small">
+                        <button @click.capture="toggleDevoluciones()" class="button is-warning is-small">
                             <span class="icon">
                                 <i class="fas fa-edit"></i>
                             </span>
@@ -46,7 +46,7 @@
 
 <script>
 import ProductoRow from "./ProductoRow.vue";
-import { mapState } from "vuex";
+import { mapMutations, mapState } from "vuex";
 
 export default {
     components: { ProductoRow },
@@ -68,9 +68,7 @@ export default {
         },
     },
     methods: {
-        modificarDevoluciones() {
-            Event.$emit("modificar-devoluciones");
-        },
+        ...mapMutations('ui',["toggleDevoluciones"]),
     },
 }
 </script>

resources/js/components/pedidos/DevolucionesModal.vue

@@ -1,67 +1,71 @@
 <template>
-	<div v-bind:class="visible ? 'is-active modal' : 'modal'">
+    <div :class="show_devoluciones ? 'is-active modal' : 'modal'">
         <div class="modal-background"></div>
         <div class="modal-card">
             <header class="modal-card-head">
                 <p class="modal-card-title">Devoluciones</p>
-                <button class="delete" aria-label="close" @click.capture="cerrar"></button>
+                <button class="delete" aria-label="close" @click.capture="toggleDevoluciones()"></button>
             </header>
             <section class="modal-card-body">
                 <div class="field has-addons is-centered is-thin-centered">
                     <p class="control">
                         Total:
-                        <input id="total" class="input" type="number" v-model="total" style="text-align: center">
+                        <input id="totalControl" class="input" type="number" v-model="totalControl"
+                               style="text-align: center">
                     </p>
                 </div>
                 <div class="field has-addons is-centered is-thin-centered">
                     <p class="control">
                         Notas:
-                        <input id="notas" class="input" type="text" v-model.text="notas">
+                        <input id="notasControl" class="input" type="text" v-model.text="notasControl">
                     </p>
                 </div>
             </section>
             <footer class="modal-card-foot">
                 <button class="button is-success" @click="modificar">Aceptar</button>
-                <button class="button" @click.capture="cerrar">Cancelar</button>
+                <button class="button" @click.capture="toggleDevoluciones()">Cancelar</button>
             </footer>
         </div>
     </div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                visible: false,
-                total: 0,
-                notas: "",
-            }
+import { mapActions, mapMutations, mapState } from "vuex";
+
+export default {
+    name: 'DevolucionesModal',
+    data() {
+        return {
+            totalControl: 0,
+            notasControl: "",
+        }
+    },
+    mounted() {
+        this.actualizar();
+    },
+    watch: {
+        cantidadEnChismosa() {
+            this.actualizar();
         },
-        computed: {
-            miga: function() {
-                return {
-                    nombre: "Devoluciones",
-                    href: "#devoluciones",
-                }
-            },
+        notasEnChismosa() {
+            this.actualizar();
+        }
+    },
+    computed: {
+        ...mapState('ui', ["show_devoluciones"]),
+        ...mapState('pedido', ["devoluciones_total", "devoluciones_notas"])
+    },
+    methods: {
+        ...mapMutations('ui', ["toggleDevoluciones"]),
+        ...mapActions('pedido', ["modificarDevoluciones"]),
+        modificar() {
+            this.modificarDevoluciones({ monto: this.totalControl, notas: this.notasControl });
+            this.toggleDevoluciones();
         },
-        methods: {
-		    cerrar() {
-		        this.visible = false;
-		        Event.$emit("migas-pop");
-		    },
-            modificar() {
-                Event.$emit('sync-devoluciones', this.total, this.notas);
-                this.cerrar();
-            }
+        actualizar() {
+            this.totalControl = this.devoluciones_total;
+            this.notasControl = this.devoluciones_notas;
         },
-        mounted() {
-            Event.$on('modificar-devoluciones', () => {
-                this.visible = true;
-                this.total = this.$root.pedido.devoluciones_total;
-                this.notas = this.$root.pedido.devoluciones_notas;
-                Event.$emit("migas-agregar", this.miga);
-            });
-        },
-    }
-</script>
+    },
+}
+</script>

resources/js/store/modules/pedido.js

@@ -50,7 +50,13 @@ const actions = {
         });
         commit('setState', response.data.data);
     },
-    async modificarDevoluciones({ commit }, monto, notas) {}
+    async modificarDevoluciones({ commit }, { monto, notas }) {
+        const response = await axios.post("api/subpedidos/" + state.pedido_id + "/sync_devoluciones", {
+            total: monto,
+            notas: notas,
+        });
+        commit('setState', response.data.data);
+    },
 };
 
 const getters = {