diff --git a/resources/js/components/comisiones/Body.vue b/resources/js/components/comisiones/Body.vue index be1e47a..b8e9e8e 100644 --- a/resources/js/components/comisiones/Body.vue +++ b/resources/js/components/comisiones/Body.vue @@ -1,110 +1,87 @@ <template> <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop"> - <comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones> - <div class="block pb-6" id="pedidos-comisiones-seccion" + <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"/> + <div class="block pb-6" + id="pedidos-comisiones-seccion" :class="seccionActiva === 'pedidos-comisiones-seccion' ? 'is-active' : 'is-hidden'"> <div class="block" id="pedidos-comisiones-tabla-y-dropdown"> <dropdown-descargar/> </div> </div> - <div class="block pb-6" id="canasta-comisiones-seccion" + <div class="block pb-6" + id="canasta-comisiones-seccion" :class="seccionActiva === 'canasta-comisiones-seccion' ? 'is-active' : 'is-hidden'"> - <div class="block" id="canasta-comisiones-seccion"> - <article class="message is-warning"> - <div class="message-header"> - <p>Formato de la canasta</p> - </div> - <div class="message-body"> - <div class="content"> - La planilla de la canasta tiene que tener el siguiente formato para que la aplicación la lea correctamente: - <ul> - <li> Los precios deben usar punto y no coma decimal </li> - <li> El nombre de las columnas deben ser "Tipo", "Producto", y "Precio" respectivamente </li> - <li> Las celdas deben separarse con '|' </li> - <li> No puede haber "enters" en ninguna celda </li> - <li> El bono de transporte debe tener tipo 'T' </li> - </ul> - <a class="has-text-info" href="/comisiones/canasta/ejemplo">Planilla de ejemplo.</a> - <article class="message is-danger mt-2"> - <div class="message-body"> - <div class="content"> - Cuidado! Cargar una nueva canasta elimina todos los pedidos de la aplicación. - </div> - </div> - </article> - </div> - </div> - </article> - <div class="buttons is-right"> - <canasta-input/> - </div> - </div> + <canasta-seccion/> </div> - <div - class="block pb-6" - id="saldos-comisiones-seccion" - :class="seccionActiva === 'saldos-comisiones-seccion' ? 'is-active' : 'is-hidden'" - > + <div class="block pb-6" + id="saldos-comisiones-seccion" + :class="seccionActiva === 'saldos-comisiones-seccion' ? 'is-active' : 'is-hidden'"> <div class="block" id="saldos-comisiones-seccion"> - <article class="message is-warning"> - <div class="message-header"> - <p> - <button class="icon" aria-label="foldout" @click="toggleSaldosFileDialog"> - <i class="fa" :class="show_saldos_file_dialog ? 'fa-arrow-up' : 'fa-arrow-down'"></i> - </button> - 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án configurados en esta aplicacaión</li> - </ul> - <article class="message is-danger mt-2"> - <div class="message-body"> - <div class="content"> - Cargar un archivo de saldos sólo reemplazará los saldos de los barrios presentes en la tabla. - </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án configurados en esta aplicacaión</li> + </ul> + <article class="message is-danger mt-2"> + <div class="message-body"> + <div class="content"> + Cargar un archivo de saldos sólo reemplazará los saldos de los barrios presentes en la tabla. + </div> + </div> + </article> </div> - </article> - </div> - <input-file-button text="Subir archivo" @archivo-subido="saldosSubido" /> + <input-file-button text="Subir archivo" @archivo-subido="saldosSubido" /> + </div> + </article> </div> - </article> - - <table class="table container"> - <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)"> + <div class="column"> + <table class="table container"> + <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> + </button> + </td> + </tr> + </tbody> + </table> + </div> + </div> </div> </div> </div> @@ -113,16 +90,16 @@ <script> import TabsSecciones from "../comunes/TabsSecciones.vue"; import DropdownDescargar from "./DropdownDescargar.vue"; -import CanastaInput from "./CanastaInput.vue"; import InputFileButton from "../comunes/InputFileButton.vue"; import { mapActions, mapState } from "vuex"; +import CanastaSeccion from "./canasta/CanastaSeccion.vue"; export default { name: "ComisionesBody", components: { + CanastaSeccion, TabsSecciones, DropdownDescargar, - CanastaInput, InputFileButton, }, data() { @@ -136,7 +113,7 @@ export default { seccionActiva: "pedidos-comisiones-seccion", archivo: undefined, saldo_modificado: {}, - show_saldos_file_dialog: false, + show_saldos_file_dialog: true, } }, methods: { diff --git a/resources/js/components/comisiones/CanastaInput.vue b/resources/js/components/comisiones/canasta/CanastaInput.vue similarity index 100% rename from resources/js/components/comisiones/CanastaInput.vue rename to resources/js/components/comisiones/canasta/CanastaInput.vue diff --git a/resources/js/components/comisiones/canasta/CanastaSeccion.vue b/resources/js/components/comisiones/canasta/CanastaSeccion.vue new file mode 100644 index 0000000..b138ea9 --- /dev/null +++ b/resources/js/components/comisiones/canasta/CanastaSeccion.vue @@ -0,0 +1,46 @@ +<script> +import { defineComponent } from "vue"; +import CanastaInput from "./CanastaInput.vue"; + +export default defineComponent({ + components: { CanastaInput }, + name: "CanastaSeccion", +}) +</script> + +<template> + <div> + <article class="message is-warning"> + <div class="message-header"> + <p>Formato de la canasta</p> + </div> + <div class="message-body"> + <div class="content"> + La planilla de la canasta tiene que tener el siguiente formato para que la aplicación la lea correctamente: + <ul> + <li> Los precios deben usar punto y no coma decimal </li> + <li> El nombre de las columnas deben ser "Tipo", "Producto", y "Precio" respectivamente </li> + <li> Las celdas deben separarse con '|' </li> + <li> No puede haber "enters" en ninguna celda </li> + <li> El bono de transporte debe tener tipo 'T' </li> + </ul> + <a class="has-text-info" href="/comisiones/canasta/ejemplo">Planilla de ejemplo.</a> + <article class="message is-danger mt-2"> + <div class="message-body"> + <div class="content"> + Cuidado! Cargar una nueva canasta elimina todos los pedidos de la aplicación. + </div> + </div> + </article> + </div> + </div> + </article> + <div class="buttons"> + <canasta-input/> + </div> + </div> +</template> + +<style scoped> + +</style>