From 00f3c8dd99d562ecf6aef189e20bc4a6279d5f44 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@openfifth.co.uk>
Date: Mon, 20 Oct 2025 15:04:53 +0100
Subject: [PATCH] Bug 40191: Extend split button navigation to sticky toolbar

Adds the same split button navigation options to the sticky toolbar that
appears when scrolling resource forms, ensuring consistent functionality
regardless of scroll position.

Components modified:
- Toolbar.vue: Support for dropdown button actions
- ResourceFormSave.vue: Emit navigation events for toolbar
- VendorResource.vue: Wire up toolbar navigation handlers

Maintains UX consistency between main form buttons and sticky toolbar.

Signed-off-by: Jan Kissig <bibliothek@th-wildau.de>
Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../js/vue/components/ResourceFormSave.vue    | 36 ++++++++++++++++---
 .../prog/js/vue/components/Toolbar.vue        | 30 +++++++++++++++-
 .../vue/components/Vendors/VendorResource.vue | 22 ++----------
 3 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue
index f5cc061bfe..c8eb6ab3de 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue
@@ -11,7 +11,12 @@
         <h2 v-else>{{ instancedResource.i18n.newLabel }}</h2>
         <slot
             name="toolbar"
-            :componentPropData="{ ...$props, ...$data, resourceForm }"
+            :componentPropData="{
+                ...$props,
+                ...$data,
+                resourceForm,
+                saveDropdownButtonActions,
+            }"
         />
         <form
             @submit="saveAndNavigate($event, resourceToSave)"
@@ -94,7 +99,7 @@
                 "
             >
                 <DropdownButtons
-                    :dropdownButtons="dropdownButtons"
+                    :dropdownButtons="saveDropdownButtonActions"
                     :cssClass="'btn-primary'"
                 >
                     <ButtonSubmit :title="$__('Save')" />
@@ -197,10 +202,10 @@ export default {
         const saveOptionSelected = ref(
             props.instancedResource.navigationOnFormSave
         );
-        const dropdownButtons = computed(() => {
+        const saveDropdownButtonActions = computed(() => {
             const { components, navigationOnFormSave } =
                 props.instancedResource;
-
+            const formToSubmit = resourceForm.value;
             const buttonOptions = {
                 list: {
                     title: $__("Save and return to list"),
@@ -208,6 +213,13 @@ export default {
                     cssClass: "btn btn-default",
                     callback: () => {
                         saveOptionSelected.value = components.list;
+                        if (
+                            props.instancedResource.stickyToolbar.includes(
+                                "Form"
+                            )
+                        ) {
+                            formToSubmit.value.requestSubmit();
+                        }
                     },
                 },
                 show: {
@@ -216,6 +228,13 @@ export default {
                     cssClass: "btn btn-default",
                     callback: () => {
                         saveOptionSelected.value = components.show;
+                        if (
+                            props.instancedResource.stickyToolbar.includes(
+                                "Form"
+                            )
+                        ) {
+                            formToSubmit.value.requestSubmit();
+                        }
                     },
                 },
                 edit: {
@@ -224,6 +243,13 @@ export default {
                     cssClass: "btn btn-default",
                     callback: () => {
                         saveOptionSelected.value = components.edit;
+                        if (
+                            props.instancedResource.stickyToolbar.includes(
+                                "Form"
+                            )
+                        ) {
+                            formToSubmit.value.requestSubmit();
+                        }
                     },
                 },
             };
@@ -241,7 +267,7 @@ export default {
             resourceForm,
             saveAndNavigate,
             editMode,
-            dropdownButtons,
+            saveDropdownButtonActions,
         };
     },
     props: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
index 4a4b0bfea6..bba969145d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
@@ -4,6 +4,33 @@
         :class="sticky ? 'btn-toolbar sticky' : 'btn-toolbar'"
         ref="toolbar"
     >
+        <template v-if="sticky">
+            <fieldset class="action" style="padding: 0; margin-bottom: 0">
+                <DropdownButtons
+                    :dropdownButtons="
+                        componentPropData.saveDropdownButtonActions
+                    "
+                    :cssClass="'btn-primary'"
+                >
+                    <ButtonSubmit
+                        :title="$__('Save')"
+                        :callback="
+                            () =>
+                                componentPropData.resourceForm.value.requestSubmit()
+                        "
+                    />
+                </DropdownButtons>
+                <router-link
+                    :to="{
+                        name: componentPropData.instancedResource.components
+                            .list,
+                    }"
+                    role="button"
+                    class="cancel"
+                    >{{ $__("Cancel") }}</router-link
+                >
+            </fieldset>
+        </template>
         <template v-if="toolbarButtons">
             <template
                 :key="`toolbar-button-${i}`"
@@ -28,6 +55,7 @@
 import { computed, useTemplateRef, watch } from "vue";
 import ToolbarButton from "./ToolbarButton.vue";
 import DropdownButtons from "./DropdownButtons.vue";
+import ButtonSubmit from "./ButtonSubmit.vue";
 export default {
     props: {
         toolbarButtons: Function,
@@ -39,7 +67,7 @@ export default {
             default: false,
         },
     },
-    components: { ToolbarButton, DropdownButtons },
+    components: { ToolbarButton, DropdownButtons, ButtonSubmit },
     name: "Toolbar",
     setup(props) {
         const toolbar = computed(() => {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue
index 430fd40b65..569f53647d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue
@@ -33,24 +33,6 @@ export default {
         const additionalToolbarButtons = (resource, componentData) => {
             const { instancedResource } = componentData;
             const buttons = {
-                form: [
-                    {
-                        title: $__("Save"),
-                        icon: "save",
-                        callback: () => {
-                            componentData.resourceForm.value.requestSubmit()
-                        },
-                        cssClass: "btn btn-primary"
-                    },
-                    {
-                        to: {
-                            name: "VendorList",
-                        },
-                        title: $__("Cancel"),
-                        icon: "times",
-                        cssClass: "btn btn-link",
-                    },
-                ],
                 show: [
                     {
                         dropdownButtons: [
@@ -753,7 +735,7 @@ export default {
                 return baseResource.apiClient.update(vendor, vendorId).then(
                     vendor => {
                         baseResource.setMessage($__("Vendor updated"));
-                        return vendor
+                        return vendor;
                     },
                     error => {}
                 );
@@ -761,7 +743,7 @@ export default {
                 return baseResource.apiClient.create(vendor).then(
                     vendor => {
                         baseResource.setMessage($__("Vendor created"));
-                        return vendor
+                        return vendor;
                     },
                     error => {}
                 );