Componentes aparte para tabla y fila de saldos

resources/js/components/comisiones/Body.vue

@@ -50,14 +50,10 @@ export default {
         }
     },
     methods: {
-        ...mapActions('comisiones', ['getGruposDeCompra']),
         setSeccionActiva(tabId) {
             this.tabActiva = tabId;
             this.seccionActiva = tabId + "-seccion";
         },
     },
-    async mounted() {
-        await this.getGruposDeCompra();
-    },
 }
 </script>

resources/js/components/comisiones/saldos/SaldoRow.vue

@@ -0,0 +1,71 @@
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+
+export default {
+    name: "SaldoRow",
+    props: {
+        grupo_de_compra: {
+            type: Object,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            saldoControl: 0,
+            inputSaldoInteractuado: false,
+        };
+    },
+    mounted() {
+        this.saldoControl = this.grupo_de_compra.saldo;
+    },
+    watch: {
+        lastFetch() {
+            this.saldoControl = this.grupo_de_compra.saldo;
+        },
+    },
+    methods: {
+        ...mapActions("comisiones", ["setSaldo"]),
+        async confirmarSaldo() {
+            await this.setSaldo({
+                gdc_id: this.grupo_de_compra.id,
+                saldo: this.saldoControl,
+            });
+            this.inputSaldoInteractuado = false;
+        },
+    },
+    computed: {
+        ...mapState("comisiones", ["lastFetch"]),
+        ...mapGetters("comisiones", ["saldo"]),
+        saldoModificado() {
+            return Number.parseFloat(this.saldo(this.grupo_de_compra.id)) !== Number.parseFloat(this.saldoControl);
+        }
+    }
+}
+</script>
+
+<template>
+    <tr>
+        <th>{{ grupo_de_compra.nombre }}</th>
+        <td>
+            <input :id="`saldo-input-${grupo_de_compra.id}`"
+                   v-model="saldoControl"
+                   class="input is-small"
+                   type="number"
+                   style="text-align: center"
+                   @input="inputSaldoInteractuado = true">
+        </td>
+        <td>
+            <button :disabled="!(inputSaldoInteractuado && saldoModificado)"
+                    class="button is-small is-success ml-1"
+                    @click="confirmarSaldo">
+                <span class="icon">
+                    <i class="fas fa-check"/>
+                </span>
+            </button>
+        </td>
+    </tr>
+</template>
+
+<style scoped>
+
+</style>

resources/js/components/comisiones/saldos/SaldosSeccion.vue

@@ -1,27 +1,20 @@
 <script>
 import InputFileButton from "../../comunes/InputFileButton.vue";
 import { mapActions, mapState } from "vuex";
+import TablaSaldos from "./TablaSaldos.vue";
 
 export default {
     name: "SaldosSeccion",
-    components: { InputFileButton },
+    components: { TablaSaldos, InputFileButton },
     data() {
         return {
             archivo: undefined,
-            saldo_modificado: {},
             show_saldos_file_dialog: true,
         };
     },
     methods: {
         ...mapActions('ui',["toast"]),
-        ...mapActions('comisiones', ['setSaldo', 'cargarSaldos']),
+        ...mapActions('comisiones', ['cargarSaldos']),
-        async confirmar_saldo(gdc_id) {
-            await this.setSaldo({
-                gdc_id: gdc_id,
-                saldo: this.getSaldo(gdc_id),
-            });
-            this.saldo_modificado[gdc_id] = false;
-        },
         async archivoSubido(event) {
             event.component.cargando = true;
             const formData = new FormData();
@@ -29,23 +22,10 @@ export default {
             await this.cargarSaldos(formData);
             event.component.cargando = false;
         },
-        saldoModificado(gdc_id) {
-            this.saldo_modificado[gdc_id] = true;
-        },
-        isSaldoModificado(gdc_id) {
-            return gdc_id in this.saldo_modificado && this.saldo_modificado[gdc_id];
-        },
-        getSaldo(gdc_id) {
-            const barrio = this.grupos_de_compra.find(gdc => gdc.id === gdc_id);
-            return barrio.saldo;
-        },
         toggleSaldosFileDialog() {
             this.show_saldos_file_dialog = !this.show_saldos_file_dialog;
         },
     },
-    computed: {
-        ...mapState('comisiones', ['grupos_de_compra']),
-    },
 }
 </script>
 
@@ -86,39 +66,11 @@ export default {
                 </article>
             </div>
             <div class="column">
-                <table class="table container">
+                <tabla-saldos/>
-                    <thead>
-                    <tr>
-                        <th>Barrio</th>
-                        <th>Saldo</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr v-for="gdc in grupos_de_compra">
-                        <th>{{ gdc.nombre }}</th>
-                        <td>
-                            <input id="cantidad"
-                                   v-model="gdc.saldo"
-                                   class="input is-small"
-                                   type="number"
-                                   style="text-align: center"
-                                   @input="saldoModificado(gdc.id)">
-                        </td>
-                        <td>
-                            <button :disabled="!isSaldoModificado(gdc.id)" class="button is-small is-success ml-1" @click="confirmar_saldo(gdc.id)">
-                                    <span class="icon">
-                                        <i class="fas fa-check"></i>
-                                    </span>
-                            </button>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
             </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-
 </style>

resources/js/components/comisiones/saldos/TablaSaldos.vue

@@ -0,0 +1,38 @@
+<script>
+import { mapActions, mapState } from "vuex";
+import SaldoRow from "./SaldoRow.vue";
+
+export default {
+    name: "TablaSaldos",
+    components: { SaldoRow },
+    async mounted() {
+        await this.getGruposDeCompra();
+    },
+    methods: {
+        ...mapActions("comisiones", ["getGruposDeCompra"]),
+    },
+    computed: {
+        ...mapState("comisiones", ["grupos_de_compra"]),
+    }
+}
+</script>
+
+<template>
+    <table class="table container">
+        <thead>
+            <tr>
+                <th>Barrio</th>
+                <th>Saldo</th>
+            </tr>
+        </thead>
+        <tbody>
+            <saldo-row v-for="(gdc,index) in grupos_de_compra"
+                       :grupo_de_compra="gdc"
+                       :key="index"/>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+
+</style>

resources/js/store/modules/comisiones.js

@@ -1,12 +1,14 @@
 import axios from "axios";
 
 const state = {
+    lastFetch: undefined,
     grupos_de_compra: [],
 };
 
 const mutations = {
     setGruposDeCompra(state, { data }) {
         state.grupos_de_compra = data;
+        state.lastFetch = new Date();
     },
     setSaldo(state, { gdc_id, saldo }) {
         const barrio = state.grupos_de_compra.find(gdc => gdc.id === gdc_id);