From 538cc84e109729d6b7aadac2386f495f67ae7529 Mon Sep 17 00:00:00 2001
From: Rodrigo <freakrho@gmail.com>
Date: Wed, 16 Oct 2024 21:56:05 -0300
Subject: [PATCH] =?UTF-8?q?Desactivar=20agregar=20producto=20si=20requiere?=
 =?UTF-8?q?=20notas=20y=20est=C3=A1n=20vac=C3=ADas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pedidos/ProductoCantidad.vue   | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/pedidos/ProductoCantidad.vue b/resources/js/components/pedidos/ProductoCantidad.vue
index 7acd421..dbc18e4 100644
--- a/resources/js/components/pedidos/ProductoCantidad.vue
+++ b/resources/js/components/pedidos/ProductoCantidad.vue
@@ -14,7 +14,7 @@
                     <i class="fa fa-solid fa-plus"></i>
                 </button>
             </div>
-            <button :disabled="!hayCambios()" class="button is-small is-success ml-1" @click="confirmar()">
+            <button :disabled="disableConfirm()" class="button is-small is-success ml-1" @click="confirmar()">
                 <span class="icon">
                     <i class="fas fa-check"></i>
                 </span>
@@ -25,10 +25,20 @@
                 </span>
             </button>
         </div>
-        <div v-if="producto.requiere_notas" class="field has-addons is-full-width">
-            <input v-model="notas" class="input" type="text" placeholder="Talle o color" />
+        <div v-if="producto.requiere_notas" v-bind:class="{'has-icons-right': warningNotas()}" 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': warningNotas()}" id="notas" class="input" type="text" placeholder="Talle o color" />
+            <span v-if="warningNotas()" class="icon is-small is-right">
+                <i class="fas fa-exclamation-triangle"></i>
+            </span>
+            <article v-if="warningNotas()" class="message is-danger is-small">
+                <div class="message-body">
+                    No se puede dejar este campo vac&iacute;o
+                </div>
+            </article>
         </div>
-
     </div>
 </template>
 
@@ -86,6 +96,13 @@
             puedeBorrar() {
                 return this.cantidadEnChismosa() > 0;
             },
+            warningNotas() {
+                return this.producto.requiere_notas && this.cantidad > 0 && !this.notas;
+            },
+            disableConfirm() {
+                if (!this.hayCambios() || this.warningNotas()) return true;
+                return false;
+            },
         }
     }
 </script>
@@ -107,4 +124,12 @@
     .contador {
         min-width: 178px;
     }
+
+    .is-danger {
+        background-color: #fca697;
+    }
+    .is-danger::placeholder {
+        color: #fff;
+        opacity: 1; /* Firefox */
+    }
 </style>
\ No newline at end of file