119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<script>
|
|
import ProductoCantidad from './Producto/ProductoCantidad.vue';
|
|
|
|
export default {
|
|
name: "ProductoCard",
|
|
components: {
|
|
ProductoCantidad,
|
|
},
|
|
props: {
|
|
producto: Object
|
|
},
|
|
data() {
|
|
return {
|
|
cantidad: this.producto.cantidad,
|
|
enChismosa: this.producto.cantidad,
|
|
notas: this.producto.notas,
|
|
}
|
|
},
|
|
mounted() {
|
|
Event.$on('sync-subpedido', (cantidad, productoId, notas) => {
|
|
if (this.producto.id === productoId)
|
|
this.sincronizar(cantidad, notas);
|
|
});
|
|
},
|
|
methods: {
|
|
decrementar() {
|
|
this.cantidad -= 1;
|
|
},
|
|
incrementar() {
|
|
this.cantidad += 1;
|
|
},
|
|
confirmar() {
|
|
Event.$emit('sync-subpedido', this.cantidad, this.producto.id, this.notas);
|
|
},
|
|
borrar() {
|
|
this.cantidad = 0;
|
|
this.confirmar();
|
|
},
|
|
sincronizar(cantidad, notas) {
|
|
this.cantidad = cantidad;
|
|
this.producto.cantidad = cantidad;
|
|
this.enChismosa = cantidad;
|
|
this.notas = notas;
|
|
this.producto.notas = notas;
|
|
},
|
|
hayCambios() {
|
|
return this.cantidad != this.enChismosa || this.notas != this.producto.notas;
|
|
},
|
|
puedeBorrar() {
|
|
return this.enChismosa > 0;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
|
|
<div class="box" style="height:100%">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p class="title is-6">
|
|
{{ producto.nombre }}
|
|
</p>
|
|
<p class="subtitle is-7" v-text="producto.proveedor"></p>
|
|
<span class="subtitle is-7 hidden-from-tablet" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</span>
|
|
</div>
|
|
<div class="column is-one-quarter has-text-right">
|
|
<p class="has-text-weight-bold has-text-primary">
|
|
<span class="is-left-mobile">
|
|
<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"/>
|
|
</span>
|
|
$<span v-text="producto.precio"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<footer class="columns">
|
|
<div class="column is-three-quarters">
|
|
<producto-cantidad :producto="producto"></producto-cantidad>
|
|
</div>
|
|
<div class="column">
|
|
<p class="subtitle is-7 is-hidden-mobile" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</p>
|
|
</div>
|
|
</footer>
|
|
</div><!-- END BOX -->
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "bulma/sass/utilities/mixins";
|
|
|
|
@include mixins.until(mixins.$desktop) {
|
|
.hidden-until-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include mixins.from(mixins.$desktop) {
|
|
.min-width-from-desktop {
|
|
min-width: 25rem;
|
|
}
|
|
.hidden-from-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include mixins.from(mixins.$tablet) {
|
|
.hidden-from-tablet {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include mixins.mobile() {
|
|
.is-left-mobile {
|
|
float: left;
|
|
}
|
|
}
|
|
</style>
|