ProductoModal.vue reemplazado por ProductoCard.vue
This commit is contained in:
parent
43f2a1e928
commit
781ef8a7a1
|
|
@ -0,0 +1,93 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductoCard",
|
||||||
|
props: {
|
||||||
|
producto: Object
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cantidad: this.producto.cantidad,
|
||||||
|
enChismosa: this.producto.cantidad,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
Event.$on('sync-subpedido', (cantidad,_) => this.sincronizar(cantidad));
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
decrementar() {
|
||||||
|
this.cantidad -= 1;
|
||||||
|
},
|
||||||
|
incrementar() {
|
||||||
|
this.cantidad += 1;
|
||||||
|
},
|
||||||
|
confirmar() {
|
||||||
|
Event.$emit('sync-subpedido', this.cantidad, this.producto.id);
|
||||||
|
},
|
||||||
|
borrar() {
|
||||||
|
this.cantidad = 0;
|
||||||
|
this.confirmar();
|
||||||
|
},
|
||||||
|
sincronizar(cantidad) {
|
||||||
|
this.cantidad = cantidad;
|
||||||
|
this.producto.cantidad = cantidad;
|
||||||
|
this.enChismosa = cantidad;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box" style="height:100%">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-three-quarters">
|
||||||
|
<p class="title is-6">
|
||||||
|
{{ producto.nombre }}
|
||||||
|
</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="enChismosa !== 0">{{ enChismosa }} 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" @click.capture="decrementar();">
|
||||||
|
<i class="fa fa-solid fa-minus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<input id="cantidad" v-model="cantidad" class="input is-small" type="number" style="text-align: center">
|
||||||
|
</div>
|
||||||
|
<div class="control" @click="incrementar();">
|
||||||
|
<button class="button is-small">
|
||||||
|
<i class="fa fa-solid fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="button is-small is-success ml-3" @click="confirmar()">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="button is-small is-danger ml-3" @click="borrar()">
|
||||||
|
<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 -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
<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>
|
|
||||||
<button class="button is-success" @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>
|
|
||||||
Loading…
Reference in New Issue