<template> <div class="block"> <div class="block" v-show="!hayBonos"> <p class="has-text-centered"> Todavía no hay bonos pedidos. </p> </div> <div class="block" v-show="hayBonos"> <table class="table is-bordered is-striped is-hoverable is-fullwidth"> <thead> <tr> <th><abbr title="Núcleo">Núcleo</abbr></th> <td v-for="(bono,i) in bonos" :key="i" class="is-1"> {{ bono.nombre }} </td> <th><abbr title="Total a Pagar">Total $</abbr></th> </tr> </thead> <tbody> <tr v-for="(bp, i) in bonosPorPedido" :key="i"> <td> {{ bp.nucleo }} </td> <td v-for="(bono,j) in bp.bonos" :key="j" class="has-text-right"> {{ bono.cantidad }} </td> <td class="has-text-right"> {{ bp.total }} </td> </tr> </tbody> <tfoot> <tr> <th></th> <th :colspan="bonos.length">Total bonos</th> <th class="has-text-right">$ {{ totalBonos }}</th> </tr> </tfoot> </table> </div> </div> </template> <script> export default { props: { pedidos: { type: Array, required: true } }, data() { return { bonos: [] } }, computed: { pedidosAprobados: function() { return this.pedidos.filter(p => p.aprobado) }, hayBonos: function() { return this.pedidosAprobados.filter(p => p.subtotal_bonos != 0).length !== 0 }, bonosPorPedido: function() { let bonosPorPedido = this.pedidosAprobados.map(p => p = {"nucleo":p.nombre, "bonos":p.productos.filter(x => x.bono), "total":p.subtotal_bonos}); bonosPorPedido.forEach(bp => { bp.bonos = bp.bonos.map(b => b = {"bono":b.nombre, "cantidad":b.pivot.cantidad, "total":b.pivot.total, "id":b.id}) }) return bonosPorPedido.map(bp => this.completarBonos(bp)); }, totalBonos: function() { let total = 0 this.bonosPorPedido.map(bp => total += parseInt(bp.total)) return total }, }, methods: { completarBonos(bonosPedido) { this.bonos.map(b => { if (!bonosPedido.bonos.map(x => x.id).includes(b.id)) bonosPedido.bonos.push({"bono":b.nombre, "cantidad":0, "total":0, "id":b.id}) }) bonosPedido.bonos = bonosPedido.bonos.sort((b1,b2) => b1.id - b2.id) return bonosPedido } }, beforeMount() { axios.get("../api/productos", { params: { categoria:'TRANSPORTE, BONOS Y FINANCIAMIENTO SORORO', } }).then(response => { this.bonos = response.data.data; }); }, } </script> <style> </style>