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

<script>
import InputFileButton from "../../comunes/InputFileButton.vue";
import { mapActions } from "vuex";
import TablaSaldos from "./TablaSaldos.vue";

export default {
    name: "SaldosSeccion",
    components: { TablaSaldos, InputFileButton },
    data() {
        return {
            archivo: undefined,
            show_saldos_file_dialog: true,
        };
    },
    methods: {
        ...mapActions('ui',["toast"]),
        ...mapActions('comisiones', ['cargarSaldos']),
        async archivoSubido(event) {
            event.component.cargando = true;
            const formData = new FormData();
            formData.append('data',event.archivo);
            await this.cargarSaldos(formData);
            event.component.cargando = false;
        },
        toggleSaldosFileDialog() {
            this.show_saldos_file_dialog = !this.show_saldos_file_dialog;
        },
    },
}
</script>

<template>
    <div>
        <div class="columns">
            <div class="column">
                <article class="message is-warning">
                    <div class="message-header">
                        <p>
                            <span class="icon is-small"
                                  @click="toggleSaldosFileDialog">
                                <i :class="`fas ${!show_saldos_file_dialog ? 'fa-angle-down' : 'fa-angle-up'}`" aria-hidden="true"></i>
                            </span>
                            Cargar saldos
                        </p>
                    </div>
                    <div class="message-body" v-if="show_saldos_file_dialog">
                        <div class="content">
                            La planilla de saldos tiene que tener el siguiente formato para que la aplicación la lea correctamente:
                            <ul>
                                <li>Los valores deben usar punto y no coma decimal</li>
                                <li>El nombre de las columnas deben ser "Barrio" y "Saldo"</li>
                                <li>Las celdas deben separarse con '|'</li>
                                <li>No puede haber "enters" en ninguna celda</li>
                                <li>El nombre de los barrios debe estar exactamente igual que como est&aacute;n configurados en esta aplicacai&oacute;n</li>
                            </ul>
                            <article class="message is-danger mt-2">
                                <div class="message-body">
                                    <div class="content">
                                        Al cargar un archivo, se reemplazaran los saldos de los barrios que éste contenga, el resto quedará sin cambiar.
                                    </div>
                                </div>
                            </article>
                        </div>
                        <input-file-button text="Subir archivo" @archivo-subido="archivoSubido" />
                    </div>
                </article>
            </div>
            <div class="column">
                <tabla-saldos/>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>