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

Agregados botones para cantidad en el modal de agregar producto

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 { figure.image.icono {
float: right; float: right;
margin: 4px; 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', { Vue.component('producto-container', {
template: ` 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-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title" v-text="producto.nombre"></p> <p class="modal-card-title" v-text="producto.nombre"></p>
<button class="delete" aria-label="close" @click.capture="cerrar"></button> <button class="delete" aria-label="close" @click.capture="cerrar"></button>
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-4by3">
<img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'"> <img
</figure> v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
<figure v-show="producto.nacional" class="image icono is-32x32"> </figure>
<img src="/assets/uruguay.png"> <figure v-show="producto.nacional" class="image icono is-32x32">
</figure> <img src="/assets/uruguay.png">
<figure v-show="producto.economia_solidaria" class="image icono is-32x32"> </figure>
<img src="/assets/solidaria.png"> <figure v-show="producto.economia_solidaria" class="image icono is-32x32">
</figure> <img src="/assets/solidaria.png">
</div> </figure>
<div class="media-content"> </div>
<p class="title is-4" v-text="producto.proveedor"></p> <div class="media-content">
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p> <p class="title is-4" v-text="producto.proveedor"></p>
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p> <p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
</div> <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
</section> <div class="field has-addons is-centered is-thin-centered">
<footer class="modal-card-foot"> <p class="control">
<button class="button is-success">Agregar a la chismosa</button> <button class="button" @click="cant !== 0 ? cant-- : cant">
<button class="button" @click.capture="cerrar">Cancelar</button> <span class="icon is-small">
</footer> <!-- 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>`, </div>`,
data() { data() {
return { return {
producto: null, producto: null,
visible: false visible: false,
cant: 0
} }
}, },
computed: { computed: {
@ -159,6 +182,9 @@ Vue.component('producto-container', {
cerrar() { cerrar() {
this.visible = false; this.visible = false;
Event.$emit("migas-pop"); Event.$emit("migas-pop");
},
agregarProducto() {
Event.$emit("producto-add");
} }
}, },
mounted() { mounted() {
@ -168,4 +194,4 @@ Vue.component('producto-container', {
Event.$emit("migas-agregar",this.miga); Event.$emit("migas-agregar",this.miga);
}); });
} }
}); });