ProductoCantidad template WIP

resources/js/components/Chismosa.vue

@@ -7,8 +7,6 @@
                     <th>Producto</th>
                     <th><abbr title="Cantidad">C</abbr></th>
                     <th><abbr title="Precio Total">$</abbr></th>
-                    <th></th>
-                    <th><abbr title="Eliminar"></abbr></th>
                 </tr>
                 </thead>
                 <tfoot>
@@ -16,28 +14,23 @@
                     <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
                     <th class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
                     <th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
-                    <th></th>
-                    <th></th>
                 </tr>
                 <tr v-if="this.$root.devoluciones">
                     <th><p>Devoluciones</p></th>
-                    <td><p :title="notasDevoluciones()">...</p></td>
+                    <td>
-                    <th class="has-text-right">-{{ devoluciones() }}</th>
+                        <p :title="notasDevoluciones()">...</p>
-                    <th>
                         <button @click.capture="modificarDevoluciones()" class="button is-warning">
                             <span class="icon">
                                 <i class="fas fa-edit"></i>
                             </span>
                         </button>
-                    </th>
+                    </td>
-                    <th></th>
+                    <th class="has-text-right">-{{ devoluciones() }}</th>
                 </tr>
                 <tr>
                     <th>Total total</th>
                     <th></th>
                     <th class="has-text-right">{{ total() }}</th>
-                    <th></th>
-                    <th></th>
                 </tr>
                 </tfoot>
                 <tbody>

resources/js/components/Producto/ProductoCantidad.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="field has-addons">
+        <div class="control">
+            <button class="button is-small" @click.capture="decrementar();">
+                <i class="fa fa-solid fa-minus"></i>
+            </button>
+        </div>
+        <div class="control">
+            <input id="cantidad" v-model="cantidad" 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="!hayCambios()" class="button is-small is-success ml-3" @click="confirmar()">
+            <span class="icon">
+                <i class="fas fa-check"></i>
+            </span>
+        </button>
+        <button :disabled="!puedeBorrar()" class="button is-small is-danger ml-3" @click="borrar()">
+            <span class="icon">
+                <i class="fas fa-trash-alt"></i>
+            </span>
+        </button>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            producto: Object
+        },
+        data() {
+            return {
+                cantidad: this.producto.cantidad,
+                enChismosa: this.producto.cantidad,
+            }
+        },
+        mounted() {
+            Event.$on('sync-subpedido', (cantidad,productoId) => {
+                if (this.producto.id === productoId)
+                    this.sincronizar(cantidad);
+            });
+        },
+        methods: {
+            decrementar() {
+                this.cantidad -= 1;
+            },
+            incrementar() {
+                this.cantidad += 1;
+            },
+            confirmar() {
+                Event.$emit('sync-subpedido', this.cantidad, this.producto.id);
+            },
+            borrar() {
+                this.cantidad = 0;
+                this.confirmar();
+            },
+            sincronizar(cantidad) {
+                this.cantidad = cantidad;
+                this.producto.cantidad = cantidad;
+                this.enChismosa = cantidad;
+            },
+            hayCambios() {
+                return this.cantidad != this.enChismosa;
+            },
+            puedeBorrar() {
+                return this.enChismosa > 0;
+            },
+        }
+    }
+</script>
+
+<style>
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+        appearance: textfield;
+        -moz-appearance: textfield;
+    }
+</style>

resources/js/components/ProductoCard.vue

@@ -68,31 +68,7 @@ export default {
             </div>
             <footer class="columns">
                 <div class="column is-three-quarters">
-                    <div class="field has-addons">
+                    <producto-cantidad :producto="producto"></producto-cantidad>
-                        <div class="control">
-                            <button class="button is-small" @click.capture="decrementar();">
-                                <i class="fa fa-solid fa-minus"></i>
-                            </button>
-                        </div>
-                        <div class="control">
-                            <input id="cantidad" v-model="cantidad" 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="!hayCambios()" class="button is-small is-success ml-3" @click="confirmar()">
-                            <span class="icon">
-                                <i class="fas fa-check"></i>
-                            </span>
-                        </button>
-                        <button :disabled="!puedeBorrar()" class="button is-small is-danger ml-3" @click="borrar()">
-                            <span class="icon">
-                                <i class="fas fa-trash-alt"></i>
-                            </span>
-                        </button>
-                    </div>
                 </div>
                 <div class="column">
                     <p class="subtitle is-7 is-hidden-mobile" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</p>

resources/js/components/ProductoRow.vue

@@ -1,18 +1,10 @@
 <template>
 	<tr>
             <td>{{ this.producto.nombre }}</td>
-            <td class="has-text-right">{{ this.producto.pivot.cantidad }}</td>
+            <td class="has-text-right">
+                <producto-cantidad :producto="producto"></producto-cantidad>
+            </td>
             <td class="has-text-right">{{ Math.ceil(this.producto.pivot.total) }}</td>
-            <td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
-                <span class="icon">
-                    <i class="fas fa-edit"></i>
-                </span>
-            </button></td>
-            <td><button @click.capture="eliminarProducto()" class="button is-danger">
-                <span class="icon">
-                    <i class="fas fa-trash-alt"></i>
-                </span>
-            </button></td>
     </tr>
 </template>
 producto
@@ -21,13 +13,5 @@ producto
 		props: {
 	        producto: Object
 	    },
-	    methods: {
-	        seleccionarProducto() {
-	            Event.$emit("producto-seleccionado",this.producto);
-	        },
-	        eliminarProducto() {
-	            Event.$emit("sync-subpedido", 0, this.producto.id);
-	        }
-        }
 	}
 </script>