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

<template>
    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
        <admin-tabs-secciones></admin-tabs-secciones>
        <div class="block" id="pedidos-seccion"
            :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block pb-6" id="pedidos-tabla-y-dropdown" v-show="hayPedidos">
                <admin-dropdown-descargar
                    :gdc="gdc">
                </admin-dropdown-descargar>
                <admin-tabla-pedidos
                    :pedidos="pedidos" :bonosDeTransporte="bonosDeTransporte" :totalBonosBarriales="totalBonosBarriales">
                </admin-tabla-pedidos>
            </div>
            <p class="has-text-centered" v-show="!hayPedidos">
                Todavía no hay ningún pedido para administrar.
            </p>
        </div>
        <div class="block pb-6" id="bonos-seccion"
            :class="seccionActiva === 'bonos-seccion' ? 'is-active' : 'is-hidden'">
            <admin-tabla-bonos v-show="hayAprobados"
                :pedidos="pedidos">
            </admin-tabla-bonos>
            <p class="has-text-centered" v-show="!hayAprobados">
                Todavía no hay pedidos aprobados.
            </p>
        </div>
        <div class="block pb-6" id="caracteristicas-seccion"
             :class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
            <admin-caracteristicas-opcionales>
            </admin-caracteristicas-opcionales>
        </div>
    </div>
</template>

<script>
import CaracteristicasOpcionales from "./CaracteristicasOpcionales.vue";
import TabsSecciones from "./TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import TablaPedidos from "./TablaPedidos.vue";
import TablaBonos from "./TablaBonos.vue";
export default {
    components: {
        CaracteristicasOpcionales,
        TabsSecciones,
        DropdownDescargar,
        TablaPedidos,
        TablaBonos,
    },
    data() {
        return {
            gdc: 0,
            pedidos: [],
            bonosDeTransporte: 0,
            totalBonosBarriales: 0,
            tabActiva: "pedidos",
            seccionActiva: "pedidos-seccion",
        }
    },
    computed: {
        hayPedidos: function() {
            return this.pedidos.length !== 0
        },
        hayAprobados: function() {
            return this.pedidos.filter(p => p.aprobado).length > 0
        }
    },
    methods: {
        fetchPedidos() {
            axios.get("/api/grupos-de-compra/"+this.gdc+"/bonos-de-transporte", {})
                 .then(response => this.bonosDeTransporte = response.data.bdt);
            axios.get("/api/subpedidos/resources", {
                    params: {
                        grupo_de_compra: this.gdc
                    }})
                 .then(response => {
                    this.pedidos = response.data.data
                }).get;
            axios.get("/api/grupos-de-compra/"+this.gdc+"/bonos-barriales", {})
                .then(response => this.totalBonosBarriales = response.data.bonos_barriales)
        },
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
        getBonosBarriales() {
            axios.get("/api/grupos-de-compra/"+this.gdc+"/bonos-barriales", {})
                 .then(response => this.totalBonosBarriales = response.data.bonos_barriales)
        }
    },
    mounted() {
        Event.$on('sync-aprobacion', (_) => {
            this.fetchPedidos();
        });

        axios.get("/admin/obtener_sesion").then(response => {
            this.gdc = response.data.gdc;
            this.fetchPedidos();
            this.bonosBarriales = this.getBonosBarriales()
        });
    }
}
</script>

<style>

</style>