104 lines
3.8 KiB
Vue
104 lines
3.8 KiB
Vue
<template>
|
|
<div v-bind:class="visible ? 'is-active modal' : 'modal'">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<section class="modal-card-head">
|
|
<div class="media-content">
|
|
<p class="modal-card-title">
|
|
{{ producto.nombre }}
|
|
<img v-show="producto.nacional" height="24px" width="24px" src="/assets/uruguay.png" />
|
|
<img v-show="producto.economia_solidaria" height="24px" width="24px" src="/assets/solidaria.png">
|
|
</p>
|
|
<p class="subtitle" v-show="producto.proveedor" v-text="producto.proveedor"></p>
|
|
<p class="subtitle is-6" v-show="producto.apto_veganxs">Apto para veganxs.</p>
|
|
<p class="subtitle is-6" v-show="producto.apto_celiacxs">Apto para celíacxs.</p>
|
|
</div>
|
|
</section>
|
|
<section class="modal-card-body">
|
|
<p class="subtitle is-3 has-text-weight-bold has-text-primary has-text-centered">${{ producto.precio }}</p>
|
|
</section>
|
|
<footer class="modal-card-foot">
|
|
<div class="level">
|
|
<div class="level-item has-text-centered">
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad">
|
|
<i class="fa fa-solid fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center">
|
|
</div>
|
|
<div class="control">
|
|
<button class="button" @click="cantidad++">
|
|
<i class="fa fa-solid fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<button class="button" @click.capture="cerrar">Cancelar</button>
|
|
<!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
|
|
<button class="button is-success" :disabled="cantidad <= 0" @click="agregarProducto">Aceptar</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
producto: null,
|
|
visible: false,
|
|
cantidad: 0
|
|
}
|
|
},
|
|
computed: {
|
|
miga: function(){
|
|
return {
|
|
nombre: this.producto.nombre,
|
|
href: "#" + this.producto.nombre
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
cerrar() {
|
|
this.cantidad = 0;
|
|
this.visible = false;
|
|
Event.$emit("migas-pop");
|
|
},
|
|
agregarProducto() {
|
|
if (this.cantidad < 0) alert("No se puede agregar cantidades negativas")
|
|
else if (!Number.isInteger(this.cantidad)) alert("Las cantidades deben ser números enteros")
|
|
else {
|
|
Event.$emit('sync-subpedido',this.cantidad, this.producto.id);
|
|
this.cerrar();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
Event.$on('producto-seleccionado', (producto) => {
|
|
this.producto = producto;
|
|
this.cantidad = this.$root.cantidad(producto)
|
|
this.visible = true;
|
|
Event.$emit("migas-agregar",this.miga);
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
figure.image.icono {
|
|
float: right;
|
|
margin: 4px;
|
|
}
|
|
|
|
.is-thin-centered {
|
|
width: 50%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style> |