pestaña de pedidos y de bonos en la pantalla de admin

resources/js/components/PedidosAdminBody.vue

@@ -1,37 +1,51 @@
 <template>
     <div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
-        <div class="block" v-show="hayPedidos">
-            <pedidos-admin-dropdown-descargar
-                :gdc="gdc">
-            </pedidos-admin-dropdown-descargar>
-            <pedidos-admin-tabla-pedidos
-                :pedidos="pedidos">
-            </pedidos-admin-tabla-pedidos>
-            <pedidos-admin-tabla-bonos
+        <pedidos-admin-tabs-secciones></pedidos-admin-tabs-secciones>
+        <div class="block" id="pedidos-seccion" 
+        :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
+            <div class="block" id="pedidos-tabla-y-dropdown" v-show="hayPedidos">
+                <pedidos-admin-dropdown-descargar
+                    :gdc="gdc">
+                </pedidos-admin-dropdown-descargar>
+                <pedidos-admin-tabla-pedidos
+                    :pedidos="pedidos">
+                </pedidos-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" id="bonos-seccion" 
+        :class="seccionActiva === 'bonos-seccion' ? 'is-active' : 'is-hidden'">
+            <pedidos-admin-tabla-bonos v-show="hayAprobados"
                 :pedidos="pedidos">
             </pedidos-admin-tabla-bonos>
+            <p class="has-text-centered" v-show="!hayAprobados">
+                Todavía no hay pedidos aprobados.
+            </p>
         </div>
-        <p class="has-text-centered" v-show="!hayPedidos">
-            Todavía no hay ningún pedido para administrar.
-        </p>
     </div>
 </template>
 
 <script>
+import PedidosAdminTabsSecciones from './PedidosAdminTabsSecciones.vue';
 import PedidosAdminDropdownDescargar from "./PedidosAdminDropdownDescargar.vue";
-import PedidosAdminTablaBonosVue from './PedidosAdminTablaBonos.vue';
+import PedidosAdminTablaBonos from './PedidosAdminTablaBonos.vue';
 import PedidosAdminTablaPedidos from "./PedidosAdminTablaPedidos.vue";
 export default {
     name: "PedidosAdminBody",
     components: {
+        PedidosAdminTabsSecciones,
         PedidosAdminDropdownDescargar,
         PedidosAdminTablaPedidos,
-        PedidosAdminTablaBonosVue
+        PedidosAdminTablaBonos,
     },
     data() {
         return {
             gdc: 0,
-            pedidos: []
+            pedidos: [],
+            tabActiva: "pedidos",
+            seccionActiva: "pedidos-seccion"
         }
     },
     computed: {
@@ -42,8 +56,6 @@ export default {
             return this.pedidos.filter(p => p.aprobado).length > 0
         }
     },
-    beforeCreate() {
-    },
     methods: {
         fetchPedidos() {
             axios.get("/api/subpedidos/resources", {
@@ -61,6 +73,10 @@ export default {
                 suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
             }
             return suma;
+        },
+        setSeccionActiva(tabId) {
+            this.tabActiva = tabId;
+            this.seccionActiva = tabId + "-seccion";
         }
     },
     mounted() {

resources/js/components/PedidosAdminTablaBonos.vue

@@ -13,6 +13,16 @@
                 <th>Total bonos</th>
                 <th>$ {{ totalBonos }}</th>
             </tr>
+            <tr>
+                <th></th>
+                <th></th>
+                <th></th>
+            </tr>
+            <tr>
+                <td>Bonos de Transporte</td>
+                <td>{{ bonosDeTransporteAprobados }}</td>
+                <td>$ {{ bonosDeTransporteAprobados * 15 }}</td>
+            </tr>
         </tfoot>
         <tbody>
             <pedidos-admin-fila-bono v-for="(bono, i) in bonosCantidadesTotales" :key="i"
@@ -47,6 +57,12 @@ export default {
         pedidosAprobados: function() {
             return this.pedidos.filter(p => p.aprobado);
         },
+        bonosDeTransporteAprobados: function() {
+            let bonosTransportePorPedido = this.pedidosAprobados.map(p => p.bonos_de_transporte);
+            let cant = 0;
+            bonosTransportePorPedido.forEach(bt => cant += bt);
+            return cant
+        },
         bonosCantidadesTotales: function() {
             let nombres = [];
             let cantidades = [];

resources/js/components/PedidosAdminTabsSecciones.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="block">
+        <div class="tabs is-boxed" id="tabs">
+            <ul class="has-bottom-line">
+                <li v-for="(tab, index) in tabs" class="is-size-6"
+                    :key="index" 
+                    :id="tab.id + '-tab'" 
+                    :class="{'is-active': tab.id === tabActiva}">
+                    <a @click="setTabActiva(tab.id)">
+                        <span> 
+                            {{ tab.nombre }}
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PedidosAdminTabsSecciones",
+    data() {
+        return {
+            tabActiva: "pedidos",
+            tabs: [
+                {
+                    id: "pedidos",
+                    nombre: "Pedidos"
+                },
+                {
+                    id: "bonos",
+                    nombre: "Bonos"
+                }
+            ]
+        }
+    },
+    methods: {
+      setTabActiva(tabId) {
+        this.$parent.setSeccionActiva(tabId);
+        this.tabActiva = tabId
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+  hr {
+    border: none;
+    height: 1px;
+  }
+  .has-bottom-line {
+    border-bottom-color: #dbdbdb !important;
+    border-bottom-style: solid !important;
+    border-bottom-width: 1px !important;
+  }
+</style>