From 22cbac14f1428d1cac9f4cdc512a2e4fa696d113 Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Sat, 21 Dec 2024 13:29:14 -0300
Subject: [PATCH] =?UTF-8?q?Pesta=C3=B1as=20para=20body=20de=20compras?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/components/compras/Body.vue | 74 ++++++++++++++++--------
 1 file changed, 51 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/compras/Body.vue b/resources/js/components/compras/Body.vue
index 8ba4d5f..47df9fb 100644
--- a/resources/js/components/compras/Body.vue
+++ b/resources/js/components/compras/Body.vue
@@ -1,42 +1,70 @@
 <template>
-    <div class="container is-fluid has-text-centered">
-        <div class="block">
-            <div class="field">
-                <p class="control">
-                    <a href="/compras/pedidos/descargar" class="button">
+    <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" id="pedidos-compras-seccion"
+             :class="seccionActiva === 'pedidos-compras-seccion' ? 'is-active' : 'is-hidden'">
+            <div class="block">
+                <div class="field">
+                    <p class="control">
+                        <a href="/compras/pedidos/descargar" class="button">
                         <span class="icon is-small">
                             <i class="fas fa-download"></i>
                         </span>
-                        <span>Descargar planilla de totales</span>
-                    </a>
-                </p>
-            </div>
-            <div class="field">
-                <p class="control">
-                    <a href="/compras/pedidos/notas" class="button">
+                            <span>Descargar planilla de totales</span>
+                        </a>
+                    </p>
+                </div>
+                <div class="field">
+                    <p class="control">
+                        <a href="/compras/pedidos/notas" class="button">
                         <span class="icon is-small">
                             <i class="fas fa-sticky-note"></i>
                         </span>
-                        <span>Descargar planilla de notas</span>
-                    </a>
-                </p>
-            </div>
-            <div class="field">
-                <p class="control">
-                    <a href="/compras/pedidos/transporte" class="button">
+                            <span>Descargar planilla de notas</span>
+                        </a>
+                    </p>
+                </div>
+                <div class="field">
+                    <p class="control">
+                        <a href="/compras/pedidos/transporte" class="button">
                         <span class="icon is-small">
                             <i class="fa fa-truck"></i>
                         </span>
-                        <span>Descargar planilla de transporte</span>
-                    </a>
-                </p>
+                            <span>Descargar planilla de transporte</span>
+                        </a>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="block pb-6" id="canasta-compras-seccion"
+             :class="seccionActiva === 'canasta-compras-seccion' ? 'is-active' : 'is-hidden'">
+            <div class="block" id="canasta-compras-seccion">
+                <p> Todavía no hay nada por acá </p>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-export default {
+import TabsSecciones from "../comunes/TabsSecciones.vue";
 
+export default {
+    components: {
+        TabsSecciones,
+    },
+    data() {
+        return {
+            tabs: [{ id: "pedidos-compras", nombre: "Pedidos" },
+                { id: "canasta-compras", nombre: "Canasta" }],
+            tabActiva: "pedidos-compras",
+            seccionActiva: "pedidos-compras-seccion",
+        }
+    },
+    methods: {
+        setSeccionActiva(tabId) {
+            this.tabActiva = tabId;
+            this.seccionActiva = tabId + "-seccion";
+        },
+    }
 }
 </script>