pedi2/resources/js/components/Chismosa.vue

95 lines
3.2 KiB
Vue

<template>
<div>
<table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
<thead>
<tr>
<th>Producto</th>
<th><abbr title="Cantidad">C</abbr></th>
<th><abbr title="Precio Total">$</abbr></th>
<th></th>
<th><abbr title="Eliminar"></abbr></th>
</tr>
</thead>
<tfoot>
<tr>
<th><abbr title="Bonos Solidarios">B. Solidarios</abbr></th>
<th>{{ cantidadBonos }}</th>
<th>{{ totalBonos }}</th>
<th></th>
<th></th>
</tr>
<tr>
<th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
<th class="has-text-right">{{ cantidadBonosDeTransporte }}</th>
<th class="has-text-right">{{ totalBonosDeTransporte }}</th>
<th></th>
<th></th>
</tr>
<tr>
<th><p :title="this.$root.pedido.devoluciones_notas">Devoluciones</p></th>
<th class="has-text-right"></th>
<th class="has-text-right">-{{ this.$root.pedido.devoluciones_total }}</th>
<th>
<button @click.capture="modificarDevoluciones()" class="button is-warning">
<span class="icon">
<i class="fas fa-edit"></i>
</span>
</button>
</th>
<th></th>
</tr>
<tr>
<th>Total total</th>
<th></th>
<th>{{ total }}</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
</tbody>
</table>
<p class="has-text-centered" v-show="productos.length == 0">
Compa, todavía no agregaste nada a la chismosa.
</p>
</div>
</template>
<script>
export default {
computed: {
productos: function() {
return this.$root.productos
},
cantidadBonosDeTransporte: function() {
return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte) / 15
},
totalBonosDeTransporte: function() {
return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte)
},
cantidadBonos: function() {
return this.$limpiarInt(this.$root.pedido.subtotal_bonos) / 20
},
totalBonos: function() {
return this.$limpiarInt(this.$root.pedido.subtotal_bonos)
},
total: function() {
return this.$limpiarInt(this.$root.pedido.total)
}
},
methods: {
modificarDevoluciones: function() {
Event.$emit("modificar-devoluciones");
},
}
}
</script>
<style>
@media (max-width: 719px) {
.chismosa-tabla {
max-width: 80vw;
}
}
</style>