pedi2/resources/js/components/admin/TablaBonos.vue

<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>