92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
|
||
|
|
<table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth 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 de Transporte">B. Transporte</abbr></th>
|
||
|
|
<th>{{ this.subpedido.bonos_de_transporte }}</th>
|
||
|
|
<th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Total total</th>
|
||
|
|
<th></th>
|
||
|
|
<th>{{ this.subpedido.total }}</th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
</tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
subpedido: {
|
||
|
|
productos:[]
|
||
|
|
},
|
||
|
|
init: true,
|
||
|
|
visible: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
animation: function() {
|
||
|
|
return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeCreate() {
|
||
|
|
axios.get("/subpedidos/obtener_sesion").then(response => {
|
||
|
|
this.subpedido = response.data.subpedido;
|
||
|
|
this.fetchSubpedido();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetchSubpedido() {
|
||
|
|
axios.get("/api/subpedidos/" + this.subpedido.id)
|
||
|
|
.then(response => {
|
||
|
|
this.subpedido = response.data.data;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
Event.$on('sync-chismosa', (subpedido) => {
|
||
|
|
this.subpedido = subpedido;
|
||
|
|
});
|
||
|
|
Event.$on('toggle-chismosa', () => {
|
||
|
|
this.init = false;
|
||
|
|
this.visible = !this.visible;
|
||
|
|
var main = document.getElementById("main");
|
||
|
|
if (this.visible) main.classList.add("chisma-abierta");
|
||
|
|
else main.classList.remove("chisma-abierta");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.chismosa-container {
|
||
|
|
top: 6.5rem;
|
||
|
|
max-height: 21rem;
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 15;
|
||
|
|
}
|
||
|
|
</style>
|