resources/js/components/compras/Body.vue

@@ -41,6 +41,22 @@
                 </div>
             </div>
         </div>
+        <div
+            class="block pb-6"
+            id="saldos-compras-seccion"
+            :class="seccionActiva === 'saldos-compras-seccion' ? 'is-active' : 'is-hidden'"
+        >
+            <div class="block" id="saldos-compras-seccion">
+                <table>
+                    <tbody>
+                        <tr v-for="gdc in grupos_de_compra">
+                            <th>{{ gdc.nombre }}</th>
+                            <td>{{ gdc.saldo }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -48,6 +64,7 @@
 import TabsSecciones from "../comunes/TabsSecciones.vue";
 import DropdownDescargar from "./DropdownDescargar.vue";
 import CanastaInput from "./CanastaInput.vue";
+import { mapActions, mapState } from "vuex";
 
 export default {
     components: {
@@ -57,8 +74,11 @@ export default {
     },
     data() {
         return {
-            tabs: [{ id: "pedidos-compras", nombre: "Pedidos" },
-                { id: "canasta-compras", nombre: "Canasta" }],
+            tabs: [
+                { id: "pedidos-compras", nombre: "Pedidos" },
+                { id: "canasta-compras", nombre: "Canasta" },
+                { id: "saldos-compras", nombre: "Saldos" },
+            ],
             tabActiva: "pedidos-compras",
             seccionActiva: "pedidos-compras-seccion",
             archivo: undefined,
@@ -69,6 +89,15 @@ export default {
             this.tabActiva = tabId;
             this.seccionActiva = tabId + "-seccion";
         },
-    }
+        ...mapActions('comisiones', ['getGruposDeCompra']),
+    },
+    computed: {
+        ...mapState('comisiones', [
+            'grupos_de_compra',
+        ]),
+    },
+    async mounted() {
+        await this.getGruposDeCompra();
+    },
 }
 </script>

resources/js/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import admin from "./modules/admin";
+import comisiones from "./modules/comisiones";
 import login from "./modules/login";
 import pedido from "./modules/pedido";
 import productos from "./modules/productos";
@@ -11,6 +12,7 @@ Vue.use(Vuex);
 export default new Vuex.Store({
     modules: {
         admin,
+        comisiones,
         login,
         pedido,
         productos,

resources/js/store/modules/comisiones.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+const state = {
+    grupos_de_compra: null,
+};
+
+const mutations = {
+    setGruposDeCompra(state, { grupos_de_compra }) {
+        state.grupos_de_compra = grupos_de_compra;
+    },
+};
+
+const actions = {
+    async getGruposDeCompra({ commit }) {
+        const response = await axios.get('/api/grupos-de-compra');
+        commit('setGruposDeCompra', response.data);
+    },
+};
+
+const getters = {};
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions,
+    getters,
+};

routes/api.php

@@ -18,6 +18,7 @@ Route::middleware('api')->group(function() {
     Route::get('/regiones/{region}', 'Api\GrupoDeCompraController@region');
 
     Route::prefix('grupos-de-compra')->group(function() {
+        Route::get('/', 'Api\GrupoDeCompraController@index');
         Route::get('/{grupoDeCompra}', 'Api\GrupoDeCompraController@show');
         Route::post('/{gdc}/devoluciones', 'Api\GrupoDeCompraController@toggleDevoluciones');
     });