From 6fc7021317aad9c6a4754600963039ae1be01cb9 Mon Sep 17 00:00:00 2001
From: Rodrigo <freakrho@gmail.com>
Date: Sun, 15 Sep 2024 12:48:34 -0300
Subject: [PATCH] ProductoCantidad template WIP

---
 resources/js/components/Chismosa.vue          | 15 +---
 .../components/Producto/ProductoCantidad.vue  | 88 +++++++++++++++++++
 resources/js/components/ProductoCard.vue      | 26 +-----
 resources/js/components/ProductoRow.vue       | 22 +----
 4 files changed, 96 insertions(+), 55 deletions(-)
 create mode 100644 resources/js/components/Producto/ProductoCantidad.vue

diff --git a/resources/js/components/Chismosa.vue b/resources/js/components/Chismosa.vue
index a383a82..10d9b88 100644
--- a/resources/js/components/Chismosa.vue
+++ b/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>
-                    <th class="has-text-right">-{{ devoluciones() }}</th>
-                    <th>
+                    <td>
+                        <p :title="notasDevoluciones()">...</p>
                         <button @click.capture="modificarDevoluciones()" class="button is-warning">
                             <span class="icon">
                                 <i class="fas fa-edit"></i>
                             </span>
                         </button>
-                    </th>
-                    <th></th>
+                    </td>
+                    <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>
diff --git a/resources/js/components/Producto/ProductoCantidad.vue b/resources/js/components/Producto/ProductoCantidad.vue
new file mode 100644
index 0000000..f326819
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/components/ProductoCard.vue b/resources/js/components/ProductoCard.vue
index 453ecfe..fa80743 100644
--- a/resources/js/components/ProductoCard.vue
+++ b/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">
-                        <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>
+                    <producto-cantidad :producto="producto"></producto-cantidad>
                 </div>
                 <div class="column">
                     <p class="subtitle is-7 is-hidden-mobile" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</p>
diff --git a/resources/js/components/ProductoRow.vue b/resources/js/components/ProductoRow.vue
index 0a6951c..534cf4d 100644
--- a/resources/js/components/ProductoRow.vue
+++ b/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>