From 92782be7f694e4acdade846721a7795817ad4ec4 Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Sat, 21 Dec 2024 13:48:40 -0300
Subject: [PATCH] Descargas movidas a dropdown

---
 resources/js/components/compras/Body.vue      | 37 +++-----------
 .../components/compras/DropdownDescargar.vue  | 50 +++++++++++++++++++
 2 files changed, 56 insertions(+), 31 deletions(-)
 create mode 100644 resources/js/components/compras/DropdownDescargar.vue

diff --git a/resources/js/components/compras/Body.vue b/resources/js/components/compras/Body.vue
index 47df9fb..23e9f0a 100644
--- a/resources/js/components/compras/Body.vue
+++ b/resources/js/components/compras/Body.vue
@@ -3,37 +3,9 @@
         <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 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 class="icon is-small">
-                            <i class="fa fa-truck"></i>
-                        </span>
-                            <span>Descargar planilla de transporte</span>
-                        </a>
-                    </p>
-                </div>
+            <div class="block pb-6" id="pedidos-compras-tabla-y-dropdown">
+                <compras-dropdown-descargar>
+                </compras-dropdown-descargar>
             </div>
         </div>
         <div class="block pb-6" id="canasta-compras-seccion"
@@ -47,10 +19,12 @@
 
 <script>
 import TabsSecciones from "../comunes/TabsSecciones.vue";
+import DropdownDescargar from "./DropdownDescargar.vue";
 
 export default {
     components: {
         TabsSecciones,
+        DropdownDescargar,
     },
     data() {
         return {
@@ -58,6 +32,7 @@ export default {
                 { id: "canasta-compras", nombre: "Canasta" }],
             tabActiva: "pedidos-compras",
             seccionActiva: "pedidos-compras-seccion",
+            hayAprobados: true,
         }
     },
     methods: {
diff --git a/resources/js/components/compras/DropdownDescargar.vue b/resources/js/components/compras/DropdownDescargar.vue
new file mode 100644
index 0000000..a37d916
--- /dev/null
+++ b/resources/js/components/compras/DropdownDescargar.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="buttons is-right">
+        <div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
+            <div class="dropdown-trigger">
+                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" :disabled="!hayAprobados" @click="dropdownActivo = !dropdownActivo">
+                    <span class="icon is-small">
+                        <i class="fas fa-download"></i>
+                    </span>
+                    <span>Descargar planillas</span>
+                    <span class="icon is-small">
+                        <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </span>
+                </button>
+            </div>
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                <div class="dropdown-content">
+                    <a href="/compras/pedidos/descargar" class="dropdown-item">
+                        Pedidos por barrio
+                    </a>
+                    <a href="/compras/pedidos/notas" class="dropdown-item">
+                        Notas por barrio
+                    </a>
+                    <a href="/compras/pedidos/transporte" class="dropdown-item">
+                        Transporte por barrio
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dropdownActivo: false
+        }
+    },
+    computed: {
+        hayAprobados: function() {
+            return this.$parent.hayAprobados;
+        }
+    },
+
+}
+</script>
+
+<style>
+
+</style>