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

62 lines
2 KiB
Vue

<template>
<div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
<tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></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-if="hayPedidos">
<dropdown-descargar></dropdown-descargar>
<tabla-pedidos></tabla-pedidos>
</div>
<p class="has-text-centered" v-else>
Todavía no hay ningún pedido para administrar.
</p>
</div>
<div class="block pb-6" id="caracteristicas-seccion"
:class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
<caracteristicas-opcionales></caracteristicas-opcionales>
</div>
</div>
</template>
<script>
import CaracteristicasOpcionales from "./CaracteristicasOpcionales.vue";
import TabsSecciones from "../comunes/TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import TablaPedidos from "./TablaPedidos.vue";
import TablaBonos from "./TablaBonos.vue";
import { mapActions, mapGetters } from "vuex";
export default {
components: {
CaracteristicasOpcionales,
TabsSecciones,
DropdownDescargar,
TablaPedidos,
TablaBonos,
},
data() {
return {
tabs: [{ id: "pedidos", nombre: "Pedidos" },
{ id: "caracteristicas", nombre: "Caracteristicas opcionales" }],
tabActiva: "pedidos",
seccionActiva: "pedidos-seccion",
}
},
computed: {
...mapGetters('admin', ['hayPedidos']),
},
methods: {
...mapActions('admin', ['getGrupoDeCompra']),
setSeccionActiva(tabId) {
this.tabActiva = tabId;
this.seccionActiva = tabId + "-seccion";
},
},
async mounted() {
await this.getGrupoDeCompra();
},
}
</script>
<style>
</style>