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>
This commit is contained in:
Matt Blenkinsop
Lucas Gass
parent
23afa83ecc
commit
00f3c8dd99
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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 => {}
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue