From 5c3d68a4e99d42dcb24f92131eb676b47c8269f0 Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Wed, 18 Jun 2025 19:46:00 -0300
Subject: [PATCH] Componente aparte para seccion canastas

---
 resources/js/components/comisiones/Body.vue   | 167 ++++++++----------
 .../comisiones/{ => canasta}/CanastaInput.vue |   0
 .../comisiones/canasta/CanastaSeccion.vue     |  46 +++++
 3 files changed, 118 insertions(+), 95 deletions(-)
 rename resources/js/components/comisiones/{ => canasta}/CanastaInput.vue (100%)
 create mode 100644 resources/js/components/comisiones/canasta/CanastaSeccion.vue

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&aacute;n configurados en esta aplicacai&oacute;n</li>
-                            </ul>
-                            <article class="message is-danger mt-2">
-                                <div class="message-body">
-                                    <div class="content">
-                                        Cargar un archivo de saldos s&oacute;lo reemplazar&aacute; 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&aacute;n configurados en esta aplicacai&oacute;n</li>
+                                    </ul>
+                                    <article class="message is-danger mt-2">
+                                        <div class="message-body">
+                                            <div class="content">
+                                                Cargar un archivo de saldos s&oacute;lo reemplazar&aacute; 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>