Bugzilla – Attachment 188770 Details for
Bug 40191
Design pattern: Redirect user to a view of the record after saving instead of list
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 40191: Add split button UI for alternative post-save navigation
Bug-40191-Add-split-button-UI-for-alternative-post.patch (text/plain), 10.96 KB, created by
Martin Renvoize (ashimema)
on 2025-10-31 08:59:32 UTC
(
hide
)
Description:
Bug 40191: Add split button UI for alternative post-save navigation
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2025-10-31 08:59:32 UTC
Size:
10.96 KB
patch
obsolete
>From 3e0fd7abf931f3ac289d3c308fe48990987d88b1 Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@openfifth.co.uk> >Date: Fri, 17 Oct 2025 16:48:18 +0100 >Subject: [PATCH] Bug 40191: Add split button UI for alternative post-save > navigation > >Introduces a split button pattern allowing users to override the default >post-save behavior: >- Primary button executes default action >- Dropdown menu provides alternative navigation options >- Adapts menu options based on resource configuration > >Components modified: >- New DropdownButtons component for split button UI >- Updated ButtonSubmit to support dropdown actions >- Extended ResourceFormSave with action handlers >- Applied to VendorResource and ToolbarButton > >The UI adapts based on resource configuration: >- "show" default: offers "continue editing" and "return to list" >- "edit" default: offers "show" and "return to list" >- "list" default: offers "show" and "continue editing" > >Test plan: >1) Enable ERM and navigate to the agreements form >2) At the bottom, there should now be a button for "Submit" and a dropdown with two options > - Submit and continue editing > - Submit and return to list >3) Fill out the form three times, testing a different button each time >4) Click to edit one of your agreements >5) The buttons should operate the same but now they will start with 'Submit' instead of 'Save' >6) Navigate to licenses - for the purposes of testing the DO NOT PUSH commit has set this to have the behaviour where it returns to the list on save >7) On the form, the list option should be gone from the dropdowns and replaced by "Submit and show" >8) The buttons should all operate as described >9) Navigate to packages - for the purposes of testing they have been set to default to staying on the form when saving >10) The option to continue editing should be gone, replaced with the option to return to the list >11) The buttons should work as described > >Sponsored-by: Karlsruhe Institute of Technology (KIT) >Signed-off-by: Michaela <michaela.sieber@kit.edu> >Signed-off-by: Jan Kissig <bibliothek@th-wildau.de> >Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> >--- > .../prog/js/vue/components/ButtonSubmit.vue | 14 +++-- > .../js/vue/components/DropdownButtons.vue | 15 ++++- > .../js/vue/components/ResourceFormSave.vue | 55 ++++++++++++++++++- > .../prog/js/vue/components/ToolbarButton.vue | 5 +- > .../vue/components/Vendors/VendorResource.vue | 5 +- > 5 files changed, 77 insertions(+), 17 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue >index cf91b240149..95c3245b878 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue >@@ -1,8 +1,5 @@ > <template> >- <button >- @click="form && form.value.requestSubmit()" >- class="btn btn-primary" >- > >+ <button @click="callback && callback()" :class="cssClass"> > <font-awesome-icon v-if="icon" :icon="icon" /> > {{ title }} > </button> >@@ -22,8 +19,13 @@ export default { > type: String, > required: false, > }, >- form: { >- type: Object, >+ cssClass: { >+ type: String, >+ default: "btn btn-primary", >+ required: false, >+ }, >+ callback: { >+ type: Function, > }, > }, > }; >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue >index 009ce57db7a..af51fde6711 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/DropdownButtons.vue >@@ -1,10 +1,11 @@ > <template> > <div class="btn-group"> >+ <slot /> > <a >- class="btn btn-default dropdown-toggle" >+ :class="`btn ${cssClass} dropdown-toggle`" > data-bs-toggle="dropdown" > href="#" >- ><i class="fa fa-plus"></i> {{ title }}</a >+ ><i v-if="title" class="fa fa-plus"></i> {{ title }}</a > > > <ul class="dropdown-menu"> > <li v-for="(button, index) in dropdownButtons" :key="index"> >@@ -13,6 +14,7 @@ > :title="$__(button.title)" > :callback="button.callback" > :cssClass="'dropdown-item'" >+ :action="button.action" > /> > </li> > </ul> >@@ -24,7 +26,14 @@ import ToolbarButton from "./ToolbarButton.vue"; > > export default { > components: { ToolbarButton }, >- props: ["dropdownButtons", "title"], >+ props: { >+ dropdownButtons: Array, >+ title: String, >+ cssClass: { >+ type: String, >+ default: "btn-default", >+ }, >+ }, > }; > </script> > >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 5758973995a..70e33400784 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue >@@ -93,7 +93,9 @@ > !instancedResource.stickyToolbar.includes('Form')) > " > > >- <ButtonSubmit /> >+ <DropdownButtons :dropdownButtons="dropdownButtons" :cssClass="'btn-primary'"> >+ <ButtonSubmit :title="buttonTextLeader" /> >+ </DropdownButtons> > <router-link > :to="{ name: instancedResource.components.list }" > role="button" >@@ -109,14 +111,18 @@ > import { computed, onBeforeMount, reactive, ref, useTemplateRef } from "vue"; > import FormElement from "./FormElement.vue"; > import ButtonSubmit from "./ButtonSubmit.vue"; >+import DropdownButtons from "./DropdownButtons.vue"; > import TabsWrapper from "./TabsWrapper.vue"; > import AccordionWrapper from "./AccordionWrapper.vue"; >+import { $__ } from "@koha-vue/i18n" > > export default { > inheritAttrs: false, > setup(props) { > const initialized = ref(false); > const resource = ref(null); >+ const editMode = ref(false); >+ const buttonTextLeader = computed(() => editMode.value ? $__("Save") : $__("Submit")) > > const resourceToSave = computed(() => { > return ( >@@ -139,6 +145,7 @@ export default { > props.instancedResource.idAttr > ] > ) { >+ editMode.value = true > props.instancedResource.getResource( > props.instancedResource.route.params[ > props.instancedResource.idAttr >@@ -158,7 +165,7 @@ export default { > const saveAndNavigate = ($event, resourceToSave) => { > const { components, navigationOnFormSave, onFormSave, router, idAttr } = props.instancedResource > // Default to show >- const navigationAction = navigationOnFormSave || components.show >+ const navigationAction = saveOptionSelected.value || navigationOnFormSave || components.show > const idParamRequired = navigationAction === components.show || navigationAction === components.edit > onFormSave($event, resourceToSave).then(resource => { > if(resource) { >@@ -173,12 +180,53 @@ export default { > } > }) > } >+ >+ const saveOptionSelected = ref(props.instancedResource.navigationOnFormSave) >+ const dropdownButtons = computed(() => { >+ const { components, navigationOnFormSave } = props.instancedResource >+ >+ const buttonOptions = { >+ list: { >+ title: $__("%s and return to list").format(buttonTextLeader.value), >+ action: "submit", >+ cssClass: "btn btn-default", >+ callback: () => { >+ saveOptionSelected.value = components.list >+ } >+ }, >+ show: { >+ title: $__("%s and show").format(buttonTextLeader.value), >+ action: "submit", >+ cssClass: "btn btn-default", >+ callback: () => { >+ saveOptionSelected.value = components.show >+ } >+ }, >+ edit: { >+ title: $__("%s and continue editing").format(buttonTextLeader.value), >+ action: "submit", >+ cssClass: "btn btn-default", >+ callback: () => { >+ saveOptionSelected.value = components.edit >+ } >+ } >+ } >+ return Object.keys(buttonOptions).reduce((acc, key) => { >+ if(key === "show" && !navigationOnFormSave) return acc >+ if(components[key] === navigationOnFormSave) return acc >+ return [buttonOptions[key], ...acc] >+ },[]) >+ }) >+ > return { > initialized, > resource, > resourceToSave, > resourceForm, >- saveAndNavigate >+ saveAndNavigate, >+ editMode, >+ dropdownButtons, >+ buttonTextLeader > }; > }, > props: { >@@ -189,6 +237,7 @@ export default { > FormElement, > TabsWrapper, > AccordionWrapper, >+ DropdownButtons > }, > name: "ResourceFormSave", > }; >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue >index 2ddd1643dc2..ee4cca7409a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue >@@ -1,5 +1,5 @@ > <template> >- <ButtonSubmit v-if="form" v-bind="$props" /> >+ <ButtonSubmit v-if="action === 'submit'" v-bind="$props" /> > <Link v-else v-bind="$props" /> > </template> > >@@ -35,9 +35,6 @@ export default { > default: "btn btn-default", > required: false, > }, >- form: { >- type: Object, >- }, > }, > name: "Toolbar", > }; >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 ed51a63fd22..6c28b2f5908 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 >@@ -37,7 +37,10 @@ export default { > { > title: $__("Save"), > icon: "save", >- form: componentData.resourceForm, >+ callback: () => { >+ componentData.resourceForm.value.requestSubmit() >+ }, >+ cssClass: "btn btn-primary" > }, > { > to: { >-- >2.51.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 40191
:
188107
|
188108
|
188109
|
188137
|
188138
|
188139
|
188164
|
188165
|
188167
|
188193
|
188194
|
188195
|
188196
|
188197
|
188198
|
188201
|
188202
|
188203
|
188768
|
188769
| 188770 |
188771
|
188772
|
188773
|
188774
|
188775
|
188776