From 937e7ec16ca1493664200bc8d60d58050f784446 Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Thu, 29 Aug 2024 21:43:13 -0300
Subject: [PATCH] Agregado input para cantidad con botones, todavia sin logica

---
 .../js/components/ProductosContainer.vue      | 55 +++++++++++++++----
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/ProductosContainer.vue b/resources/js/components/ProductosContainer.vue
index e3563a5..297e222 100644
--- a/resources/js/components/ProductosContainer.vue
+++ b/resources/js/components/ProductosContainer.vue
@@ -1,22 +1,55 @@
 <template>
 	<div v-show="visible" class="container is-max-desktop">
       <div class="columns is-multiline is-mobile">
-        <div v-for="(producto,i) in productos" :key="i" class="block column is-full">
+        <div v-for="(producto,i) in productos" :key="i" class="block column is-half-desktop is-full-mobile is-full-tablet">
           <div @click.capture="seleccionarProducto(producto)" class="box" style="height:100%">
 			<div class="columns">
-				<div class="column is-half">
+				<div class="column is-three-quarters">
 					<p class="title is-6">
 						{{ producto.nombre }}
-						<img v-show="producto.nacional" height="20px" width="20px" src="/assets/uruguay.png" />
-						<img v-show="producto.economia_solidaria" height="20px" width="20px" src="/assets/solidaria.png">
-					</p>
-					<p class="subtitle is-7" v-text="producto.proveedor"></p>
-				</div>
-				<div class="column is-half has-text-right">
-					<p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
-					<p class="subtitle is-7" v-if="producto.cantidad != 0">{{ producto.cantidad }} en chismosa</p>
+                    </p>
+                    <p class="subtitle is-7" v-text="producto.proveedor"></p>
 				</div>
+                <div class="column is-one-quarter has-text-right">
+                    <p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
+                    <p class="subtitle is-7" v-if="producto.cantidad !== 0">{{ producto.cantidad }} en chismosa</p>
+                </div>
 			</div>
+            <footer class="columns">
+                <div class="column is-three-quarters">
+                    <div class="field has-addons">
+                        <div class="control">
+                            <button class="button is-small">
+                                <i class="fa fa-solid fa-minus"></i>
+                            </button>
+                        </div>
+                        <div class="control">
+                            <input id="cantidad" v-model="producto.cantidad" class="input is-small" type="number" style="text-align: center">
+                        </div>
+                        <div class="control">
+                            <button class="button is-small">
+                                <i class="fa fa-solid fa-plus"></i>
+                            </button>
+                        </div>
+                        <button class="button is-small is-success ml-3">
+                            <span class="icon">
+                                <i class="fas fa-check"></i>
+                            </span>
+                        </button>
+                        <button class="button is-small is-danger ml-3">
+                            <span class="icon">
+                                <i class="fas fa-trash-alt"></i>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+                <div class="column is-one-quarter has-text-right">
+                    <p>
+                        <img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
+                        <img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
+                    </p>
+                </div>
+            </footer>
           </div><!-- END BOX -->
         </div><!-- END BLOCK COLUMN -->
       </div><!-- END COLUMNS -->
@@ -67,4 +100,4 @@ export default {
 		}
 	  }
 	}
-</script>
\ No newline at end of file
+</script>