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