From fb3d827c8dbb98620e2ae56bda6c2f9943b91161 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Date: Fri, 8 Nov 2024 11:25:45 +0000
Subject: [PATCH] Bug 38010: Add dropdown button component

---
 .../js/vue/components/DropdownButtons.vue     | 30 ++++++++++++
 .../js/vue/components/Vendors/VendorShow.vue  | 47 ++++++++++---------
 2 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue
new file mode 100644
index 00000000000..288885efa58
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="btn-group">
+        <a
+            class="btn btn-default dropdown-toggle"
+            data-bs-toggle="dropdown"
+            href="#"
+            ><i class="fa fa-plus"></i> New</a
+        >
+        <ul class="dropdown-menu">
+            <li v-for="(item, index) in items" :key="index">
+                <ButtonLink
+                    :to="item.to"
+                    :title="$__(item.title)"
+                    :callback="item.callback"
+                />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import ButtonLink from "./ButtonLink.vue"
+
+export default {
+    components: { ButtonLink },
+    props: ["items"],
+}
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue
index f350e43d2e5..967329897c7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorShow.vue
@@ -2,10 +2,29 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="vendors_show">
         <Toolbar>
-            <ButtonLink
-                :to="{ name: 'VendorFormAdd' }"
-                icon="plus"
-                :title="$__('New vendor')"
+            <DropdownButtons
+                :items="[
+                    {
+                        to: {
+                            path: '/cgi-bin/koha/acqui/basketheader.pl',
+                            query: { booksellerid: vendor.id, op: 'add_form' },
+                        },
+                        title: 'Basket',
+                        callback: 'redirect',
+                    },
+                    {
+                        to: {
+                            path: '/cgi-bin/koha/admin/aqcontract.pl',
+                            query: { booksellerid: vendor.id, op: 'add_form' },
+                        },
+                        title: 'Contract',
+                        callback: 'redirect',
+                    },
+                    {
+                        to: { name: 'VendorFormAdd' },
+                        title: 'Vendor',
+                    },
+                ]"
             />
             <ButtonLink
                 :to="{
@@ -15,24 +34,6 @@
                 icon="pencil"
                 :title="$__('Edit vendor')"
             />
-            <ButtonLink
-                :to="{
-                    path: '/cgi-bin/koha/acqui/basketheader.pl',
-                    query: { booksellerid: vendor.id, op: 'add_form' },
-                }"
-                icon="plus"
-                :title="$__('New basket')"
-                callback="redirect"
-            />
-            <ButtonLink
-                :to="{
-                    path: '/cgi-bin/koha/admin/aqcontract.pl',
-                    query: { booksellerid: vendor.id, op: 'add_form' },
-                }"
-                icon="plus"
-                :title="$__('New contract')"
-                callback="redirect"
-            />
             <ButtonLink
                 :to="{
                     path: '/cgi-bin/koha/acqui/parcels.pl',
@@ -91,6 +92,7 @@ import VendorContacts from "./VendorContacts.vue"
 import VendorSubscriptions from "./VendorSubscriptions.vue"
 import VendorContracts from "./VendorContracts.vue"
 import VendorBaskets from "./VendorBaskets.vue"
+import DropdownButtons from "../DropdownButtons.vue"
 
 export default {
     setup() {
@@ -146,6 +148,7 @@ export default {
     components: {
         Toolbar,
         ButtonLink,
+        DropdownButtons,
         VendorDetails,
         VendorOrderingInformation,
         VendorInterfaces,
-- 
2.39.3 (Apple Git-146)