Usando vuex

resources/js/components/pedidos/ProductoCantidad.vue

@@ -7,29 +7,31 @@
                 </button>
             </div>
             <div class="control">
-                <input id="cantidad" v-model="cantidad" class="input is-small" type="number" style="text-align: center">
+                <input id="cantidad" v-model="cantidadControl" class="input is-small" type="number"
+                       style="text-align: center">
             </div>
             <div class="control" @click="incrementar();">
                 <button class="button is-small">
                     <i class="fa fa-solid fa-plus"></i>
                 </button>
             </div>
-            <button :disabled="disableConfirm()" class="button is-small is-success ml-1" @click="confirmar()">
+            <button :disabled="!hayCambios" class="button is-small is-success ml-1" @click="confirmar()">
                 <span class="icon">
                     <i class="fas fa-check"></i>
                 </span>
             </button>
-            <button :disabled="!puedeBorrar()" class="button is-small is-danger ml-1" @click="borrar()">
+            <button :disabled="!puedeBorrar" class="button is-small is-danger ml-1" @click="borrar()">
                 <span class="icon">
                     <i class="fas fa-trash-alt"></i>
                 </span>
             </button>
         </div>
-        <div v-if="producto.requiere_notas" v-bind:class="{'has-icons-right': notas_warning_visible}" class="control is-full-width has-icons-left">
+        <div v-if="requiere_notas" :class="{'has-icons-right': notas_warning_visible}"
+             class="control is-full-width has-icons-left">
             <span class="icon is-small is-left">
                 <i class="fas fa-sticky-note"></i>
             </span>
-            <input v-model="notas" v-bind:class="{'is-danger': notas_warning_visible}" id="notas" class="input" type="text" placeholder="Talle o color" />
+            <input v-model="notasControl" v-bind:class="{'is-danger': notas_warning_visible}" id="notas" class="input" type="text" placeholder="Talle o color"/>
             <span v-if="notas_warning_visible" class="icon is-small is-right">
                 <i class="fas fa-exclamation-triangle"></i>
             </span>
@@ -43,98 +45,110 @@
 </template>
 
 <script>
-    export default {
+import { mapActions, mapGetters } from "vuex";
-        props: {
+
-            producto: Object
+export default {
+    props: {
+        producto_id: {
+            type: Number,
+            required: true,
         },
-        data() {
+        requiere_notas: {
-            return {
+            type: Number,
-                cantidad: this.cantidadEnChismosa(),
+            required: true,
-                notas: this.notasEnChismosa(),
+        }
-                notas_warning_visible: false,
+    },
+    data() {
+        return {
+            cantidadControl: 0,
+            notasControl: '',
+            notas_warning_visible: false,
+        }
+    },
+    watch: {
+        cantidadEnChismosa() {
+            this.actualizar();
+        },
+        notasEnChismosa() {
+            this.actualizar();
+        }
+    },
+    mounted() {
+        this.actualizar();
+    },
+    computed: {
+        ...mapGetters('pedido', ["enChismosa", "cantidad", "notas"]),
+        cantidadEnChismosa() {
+            return this.cantidad(this.producto_id);
+        },
+        notasEnChismosa() {
+            return this.notas(this.producto_id);
+        },
+        hayCambios() {
+            return this.cantidadControl !== this.cantidadEnChismosa || this.notasControl !== this.notasEnChismosa;
+        },
+        puedeBorrar() {
+            return this.enChismosa(this.producto_id);
+        },
+        faltaNotas() {
+            return this.requiere_notas && this.cantidadControl > 0 && !this.notasControl;
+        },
+    },
+    methods: {
+        ...mapActions('pedido', ["modificarChismosa"]),
+        decrementar() {
+            this.cantidadControl -= 1;
+        },
+        incrementar() {
+            this.cantidadControl += 1;
+        },
+        borrar() {
+            this.cantidadControl = 0;
+            this.confirmar();
+        },
+        async confirmar() {
+            if (this.faltaNotas) {
+                this.notas_warning_visible = true;
+                return;
             }
-        },
+            await this.modificarChismosa({
-        mounted() {
+                producto_id: this.producto_id,
-            Event.$on('sync-subpedido', (cantidad, productoId, notas) => {
+                cantidad: this.cantidadControl,
-                if (this.producto.id === productoId) 
+                notas: this.notasControl
-                    this.sincronizar(cantidad, notas);
             });
         },
-        methods: {
+        actualizar() {
-            notasEnChismosa() {
+            this.cantidadControl = this.cantidadEnChismosa;
-                return this.producto.pivot !== undefined ? this.producto.pivot.notas : "";
+            this.notasControl = this.notasEnChismosa;
-            },
+        },
-            cantidadEnChismosa() {
-                return this.producto.pivot !== undefined ? this.producto.pivot.cantidad : 0;
-            },
-            decrementar() {
-                this.cantidad -= 1;
-            },
-            incrementar() {
-                this.cantidad += 1;
-            },
-            confirmar() {
-                if (this.warningNotas()) {
-                    this.notas_warning_visible = true;
-                    return;
-                }
-                console.log("Emit sync " + this.cantidad + " " + this.notas);
-                Event.$emit('sync-subpedido', this.cantidad, this.producto.id, this.notas);
-            },
-            borrar() {
-                this.cantidad = 0;
-                this.confirmar();
-            },
-            sincronizar(cantidad, notas) {
-                this.notas_warning_visible = false;
-                this.notas = notas;
-                this.cantidad = cantidad;
-                if (this.producto.pivot !== undefined) {
-                    this.producto.pivot.cantidad = cantidad;
-                    this.producto.pivot.notas = notas;
-                }
-            },
-            hayCambios() {
-                if (this.cantidad != this.cantidadEnChismosa()) return true;
-                
-                return this.cantidad > 0 && this.notas != this.notasEnChismosa();
-            },
-            puedeBorrar() {
-                return this.cantidadEnChismosa() > 0;
-            },
-            warningNotas() {
-                return this.producto.requiere_notas && this.cantidad > 0 && !this.notas;
-            },
-            disableConfirm() {
-                return !this.hayCambios();
-            },
-        }
     }
+}
 </script>
 
 <style>
-    /* Chrome, Safari, Edge, Opera */
+/* Chrome, Safari, Edge, Opera */
-    input::-webkit-outer-spin-button,
+input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
+input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
+    -webkit-appearance: none;
-        margin: 0;
+    margin: 0;
-    }
+}
 
-    /* Firefox */
+/* Firefox */
-    input[type=number] {
+input[type=number] {
-        appearance: textfield;
+    appearance: textfield;
-        -moz-appearance: textfield;
+    -moz-appearance: textfield;
-    }
+}
-    
-    .contador {
-        min-width: 178px;
-    }
 
-    .is-danger {
+.contador {
-        background-color: #fca697;
+    min-width: 178px;
-    }
+}
-    .is-danger::placeholder {
+
-        color: #fff;
+.is-danger {
-        opacity: 1; /* Firefox */
+    background-color: #fca697;
-    }
+}
-</style>
+
+.is-danger::placeholder {
+    color: #fff;
+    opacity: 1; /* Firefox */
+}
+</style>

resources/js/components/pedidos/ProductoCard.vue

@@ -1,53 +1,25 @@
 <script>
 import ProductoCantidad from "./ProductoCantidad.vue";
+import { mapGetters } from "vuex";
 
 export default {
     name: "ProductoCard",
     components: { ProductoCantidad },
     props: {
-        producto: Object
+        producto: {
+            type: Object,
+            required: true
+        }
     },
-    data() {
+    computed: {
-      return {
+        ...mapGetters('pedido',["enChismosa", "cantidad"]),
-          cantidad: this.producto.cantidad,
+        fuePedido() {
-          enChismosa: this.producto.cantidad,
+            return this.enChismosa(this.producto.id);
-          notas: this.producto.notas,
+        },
-      }
+        cantidadEnChismosa() {
+            return this.cantidad(this.producto.id);
+        }
     },
-    mounted() {
-      Event.$on('sync-subpedido', (cantidad, productoId, notas) => {
-          if (this.producto.id === productoId)
-              this.sincronizar(cantidad, notas);
-      });
-    },
-    methods: {
-        decrementar() {
-            this.cantidad -= 1;
-        },
-        incrementar() {
-            this.cantidad += 1;
-        },
-        confirmar() {
-            Event.$emit('sync-subpedido', this.cantidad, this.producto.id, this.notas);
-        },
-        borrar() {
-            this.cantidad = 0;
-            this.confirmar();
-        },
-        sincronizar(cantidad, notas) {
-            this.cantidad = cantidad;
-            this.producto.cantidad = cantidad;
-            this.enChismosa = cantidad;
-            this.notas = notas;
-            this.producto.notas = notas;
-        },
-        hayCambios() {
-            return this.cantidad !== this.enChismosa || this.notas !== this.producto.notas;
-        },
-        puedeBorrar() {
-            return this.enChismosa > 0;
-        },
-    }
 }
 </script>
 
@@ -59,7 +31,7 @@ export default {
                     <p class="title is-6">
                         {{ producto.nombre }}
                     </p>
-                    <span class="subtitle is-7 hidden-from-tablet" v-if="enChismosa">{{ enChismosa }} en chismosa</span>
+                    <span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span>
                 </div>
                 <div class="column is-one-quarter has-text-right">
                     <p class="has-text-weight-bold has-text-primary">
@@ -73,13 +45,16 @@ export default {
             </div>
             <footer class="columns">
                 <div class="column is-three-quarters">
-                    <producto-cantidad :producto="producto"></producto-cantidad>
+                    <producto-cantidad
+                        :producto_id="producto.id"
+                        :requiere_notas="producto.requiere_notas">
+                    </producto-cantidad>
                 </div>
                 <div class="column">
-                    <p class="subtitle is-7 is-hidden-mobile" v-if="enChismosa > 0">{{ enChismosa }} en chismosa</p>
+                    <p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
                 </div>
             </footer>
-        </div><!-- END BOX -->
+        </div>
     </div>
 </template>
 

resources/js/components/pedidos/ProductoRow.vue

@@ -2,18 +2,25 @@
 	<tr>
             <td>{{ this.producto.nombre }}</td>
             <td class="has-text-right">
-                <producto-cantidad :producto="producto"></producto-cantidad>
+                <producto-cantidad
+                    :producto_id="producto.id"
+                    :requiere_notas="producto.requiere_notas">
+                </producto-cantidad>
             </td>
-            <td class="has-text-right">{{ this.producto.pivot.total }}</td>
+            <td class="has-text-right">{{ cantidad(producto.id) }}</td>
     </tr>
 </template>
 <script>
     import ProductoCantidad from "./ProductoCantidad.vue";
+    import { mapGetters } from "vuex";
 
     export default {
         components: { ProductoCantidad },
 		props: {
 	        producto: Object
 	    },
+        computed: {
+            ...mapGetters('pedido',["cantidad"]),
+        },
 	}
 </script>

resources/js/store/modules/pedido.js

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 const state = {
     lastFetch: null,
     pedido_id: null,
@@ -40,7 +42,14 @@ const actions = {
         const response = await axios.get(`/api/subpedidos/${pedido.id}`);
         commit('setState', response.data.data);
     },
-    async modificarChismosa({ commit }, producto_id, cantidad, notas) {},
+    async modificarChismosa({ commit }, { producto_id, cantidad, notas }) {
+        const response = await axios.post("/api/subpedidos/" + state.pedido_id + "/sync", {
+            cantidad: cantidad,
+            producto_id: producto_id,
+            notas: notas,
+        });
+        commit('setState', response.data.data);
+    },
     async modificarDevoluciones({ commit }, monto, notas) {}
 };
 
@@ -52,10 +61,10 @@ const getters = {
         return ((producto_id) => state.productos.some(p => p.id === producto_id));
     },
     cantidad() {
-        return ((producto_id) => state.productos.find(p => p.id === producto_id).pivot.cantidad);
+        return ((producto_id) => state.productos.find(p => p.id === producto_id)?.pivot.cantidad ?? 0);
     },
     notas() {
-        return ((producto_id) => state.productos.find(p => p.id === producto_id).pivot.notas);
+        return ((producto_id) => state.productos.find(p => p.id === producto_id)?.pivot.notas ?? "");
     }
 }