felix/pedi2
1
0
Fork 0
forked from nathalie/pedi2
Code Issues Pull requests Projects Releases Wiki Activity

Agregados botones para cantidad en el modal de agregar producto

Browse source
This commit is contained in:
Alejandro Tasistro 2022-02-28 13:08:03 -03:00
parent 3bf776b6f7
commit 2f397c88d4
2 changed files with 63 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/css/productos.css vendored
View file

@ -1,4 +1,10 @@
figure.image.icono {
float: right;
margin: 4px;
}
}
.is-thin-centered {
width: 50%;
margin-left: auto;
margin-right: auto;
}

86
public/js/productos.js vendored
View file

@ -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);
});
}
});
});