forked from nathalie/pedi2
109 lines
3.8 KiB
JavaScript
109 lines
3.8 KiB
JavaScript
Vue.component('chismosa', {
|
|
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>
|
|
`,
|
|
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");
|
|
});
|
|
}
|
|
});
|
|
|
|
Vue.component('producto-row', {
|
|
template: `
|
|
<tr>
|
|
<td>{{ this.producto.nombre }}</td>
|
|
<td>{{ this.producto.pivot.cantidad }}</td>
|
|
<td>{{ this.producto.pivot.total }}</td>
|
|
<td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
|
|
<span class="icon">
|
|
<i class="fas fa-edit"></i>
|
|
</span>
|
|
</button></td>
|
|
<td><button @click.capture="eliminarProducto(producto)" class="button is-danger">
|
|
<span class="icon">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</span>
|
|
</button></td>
|
|
</tr>
|
|
`,
|
|
props: {
|
|
producto: Object
|
|
},
|
|
methods: {
|
|
seleccionarProducto(producto) {
|
|
Event.$emit("producto-seleccionado",producto);
|
|
},
|
|
eliminarProducto(producto) {
|
|
Event.$emit("sync-subpedido", 0, this.producto.id);
|
|
Event.$emit("sync-subpedido");
|
|
}
|
|
}
|
|
}) |