resources/js/components/Chismosa.vue

@@ -7,6 +7,8 @@
                     <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>
@@ -14,23 +16,28 @@
                     <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>
+                    <td><p :title="notasDevoluciones()">...</p></td>
-                        <p :title="notasDevoluciones()">...</p>
+                    <th class="has-text-right">-{{ devoluciones() }}</th>
+                    <th>
                         <button @click.capture="modificarDevoluciones()" class="button is-warning">
                             <span class="icon">
                                 <i class="fas fa-edit"></i>
                             </span>
                         </button>
-                    </td>
+                    </th>
-                    <th class="has-text-right">-{{ devoluciones() }}</th>
+                    <th></th>
                 </tr>
                 <tr>
                     <th>Total total</th>
                     <th></th>
                     <th class="has-text-right">{{ total() }}</th>
+                    <th></th>
+                    <th></th>
                 </tr>
                 </tfoot>
                 <tbody>
@@ -92,6 +99,5 @@
         position: fixed;
         overflow-y: auto;
         max-height: 88vh;
-        margin-right: 20px;
     }
 </style>

resources/js/components/Producto/ProductoCantidad.vue

@@ -1,88 +0,0 @@
-<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,7 +68,31 @@ export default {
             </div>
             <footer class="columns">
                 <div class="column is-three-quarters">
-                    <producto-cantidad :producto="producto"></producto-cantidad>
+                    <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>
                 </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,10 +1,18 @@
 <template>
 	<tr>
             <td>{{ this.producto.nombre }}</td>
-            <td class="has-text-right">
+            <td class="has-text-right">{{ this.producto.pivot.cantidad }}</td>
-                <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
@@ -13,5 +21,13 @@ producto
 		props: {
 	        producto: Object
 	    },
+	    methods: {
+	        seleccionarProducto() {
+	            Event.$emit("producto-seleccionado",this.producto);
+	        },
+	        eliminarProducto() {
+	            Event.$emit("sync-subpedido", 0, this.producto.id);
+	        }
+        }
 	}
 </script>