From 2f397c88d4cecfe87d66fe83a8c277413ac44941 Mon Sep 17 00:00:00 2001
From: Ale <ale.tasistro@gmail.com>
Date: Mon, 28 Feb 2022 13:08:03 -0300
Subject: [PATCH] Agregados botones para cantidad en el modal de agregar
 producto

---
 public/css/productos.css |  8 +++-
 public/js/productos.js   | 86 ++++++++++++++++++++++++++--------------
 2 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/public/css/productos.css b/public/css/productos.css
index 83aa0b1..11d3eb8 100644
--- a/public/css/productos.css
+++ b/public/css/productos.css
@@ -1,4 +1,10 @@
 figure.image.icono {
     float: right;
     margin: 4px;
-}
\ No newline at end of file
+}
+
+.is-thin-centered {
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+}
diff --git a/public/js/productos.js b/public/js/productos.js
index 3d58f65..6202472 100644
--- a/public/js/productos.js
+++ b/public/js/productos.js
@@ -110,41 +110,64 @@ Vue.component('productos-container', {
 
 Vue.component('producto-container', {
   template: `
-    <div v-bind:class="visible ? 'is-active modal' : 'modal'">
+      <div v-bind:class="visible ? 'is-active modal' : 'modal'">
       <div class="modal-background"></div>
       <div class="modal-card">
-        <header class="modal-card-head">
-          <p class="modal-card-title" v-text="producto.nombre"></p>
-          <button class="delete" aria-label="close" @click.capture="cerrar"></button>
-        </header>
-        <section class="modal-card-body">
-          <div class="card-image">
-              <figure class="image is-4by3">
-                <img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
-              </figure>
-              <figure v-show="producto.nacional" class="image icono is-32x32">
-                    <img src="/assets/uruguay.png">
-              </figure>
-              <figure v-show="producto.economia_solidaria" class="image icono is-32x32">
-                <img src="/assets/solidaria.png">
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4" v-text="producto.proveedor"></p>
-              <p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
-              <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
-            </div>
-        </section>
-        <footer class="modal-card-foot">
-          <button class="button is-success">Agregar a la chismosa</button>
-          <button class="button" @click.capture="cerrar">Cancelar</button>
-        </footer>
+          <header class="modal-card-head">
+              <p class="modal-card-title" v-text="producto.nombre"></p>
+              <button class="delete" aria-label="close" @click.capture="cerrar"></button>
+          </header>
+          <section class="modal-card-body">
+              <div class="card-image">
+                  <figure class="image is-4by3">
+                      <img
+                          v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
+                  </figure>
+                  <figure v-show="producto.nacional" class="image icono is-32x32">
+                      <img src="/assets/uruguay.png">
+                  </figure>
+                  <figure v-show="producto.economia_solidaria" class="image icono is-32x32">
+                      <img src="/assets/solidaria.png">
+                  </figure>
+              </div>
+              <div class="media-content">
+                  <p class="title is-4" v-text="producto.proveedor"></p>
+                  <p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
+                  <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
+                  <div class="field has-addons is-centered is-thin-centered">
+                      <p class="control">
+                          <button class="button" @click="cant !== 0 ? cant-- : cant">
+                      <span class="icon is-small">
+                        <!-- Habría que ver de poner un ícono de - -->
+                      </span>
+                              <span>-</span>
+                          </button>
+                      </p>
+                      <p class="control">
+                          <input id="cantidad" class="input" type="number" :value=cant style="text-align: center">
+                      </p>
+                      <p class="control">
+                          <button class="button" @click="cant++">
+                      <span class="icon is-small">
+                        <!-- Habría que ver de poner un ícono de + -->
+                      </span>
+                              <span>+</span>
+                          </button>
+                      </p>
+                  </div>
+              </div>
+          </section>
+          <footer class="modal-card-foot">
+              <button class="button is-success" @click="agregarProducto">Agregar a la chismosa</button>
+              <button class="button" @click.capture="cerrar">Cancelar</button>
+          </footer>
       </div>
-    </div>`,
+      </div>`,
   data() {
     return {
       producto: null,
-      visible: false
+      visible: false,
+      cant: 0
     }
   },
   computed: {
@@ -159,6 +182,9 @@ Vue.component('producto-container', {
     cerrar() {
       this.visible = false;
       Event.$emit("migas-pop");
+    },
+    agregarProducto() {
+        Event.$emit("producto-add");
     }
   },
   mounted() {
@@ -168,4 +194,4 @@ Vue.component('producto-container', {
       Event.$emit("migas-agregar",this.miga);
     });
   }
-});
\ No newline at end of file
+});