pedi2/resources/js/components/ProductoModal.vue

112 lines
4.1 KiB
Vue

<template>
<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 v-show="producto.nacional" class="image icono is-32x32" style="z-index:10">
<img src="/assets/uruguay.png">
</figure>
<figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10">
<img src="/assets/solidaria.png">
</figure>
<figure class="image is-4by3">
<img
v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.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-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</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" v-model.number="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">
<!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
<button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Aceptar</button>
<button class="button" @click.capture="cerrar">Cancelar</button>
</footer>
</div>
</div>
</template>
<script>
export default {
data() {
return {
producto: null,
visible: false,
cant: 0
}
},
computed: {
miga: function(){
return {
nombre: this.producto.nombre,
href: "#" + this.producto.nombre
}
}
},
methods: {
cerrar() {
this.cant = 0;
this.visible = false;
Event.$emit("migas-pop");
},
agregarProducto() {
if (this.cant < 0) alert("No se puede agregar cantidades negativas")
else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros")
else {
Event.$emit('sync-subpedido',this.cant, this.producto.id);
this.cerrar();
}
}
},
mounted() {
Event.$on('producto-seleccionado', (producto) => {
this.producto = 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>