Bug 43121: Use an explicit label for group and tab names rather than a translated string

Signed-off-by: Michaela <michaela.sieber@kit.edu>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>

koha-tmpl/intranet-tmpl/prog/js/vue/components/AccordionWrapper.vue

@@ -14,7 +14,7 @@
                 :aria-controls="`collapse-${counter}`"
             >
                 <i class="fa fa-caret-down" title="Collapse this section"></i>
-                {{ group.name }}
+                {{ group.label }}
             </legend>
             <div
                 :id="`collapse-${counter}`"

koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormSave.vue

@@ -75,7 +75,7 @@
                     v-bind:key="counter"
                     class="rows"
                 >
-                    <legend v-if="group.name">{{ group.name }}</legend>
+                    <legend v-if="group.name">{{ group.label }}</legend>
                     <ol>
                         <li
                             v-for="(attr, index) in group.fields"

koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceShow.vue

@@ -62,7 +62,7 @@
                     v-for="(group, counter) in paneFieldList"
                     v-bind:key="counter"
                 >
-                    <legend v-if="group.name">{{ group.name }}</legend>
+                    <legend v-if="group.name">{{ group.label }}</legend>
                     <ol>
                         <li
                             v-for="(attr, index) in group.fields"
@@ -84,7 +84,7 @@
                 v-for="(group, counter) in fieldList"
                 v-bind:key="counter"
             >
-                <legend v-if="group.name">{{ group.name }}</legend>
+                <legend v-if="group.name">{{ group.label }}</legend>
                 <ol>
                     <li
                         v-for="(attr, index) in group.fields"
@@ -159,6 +159,7 @@ export default {
                 .map(field => {
                     return {
                         name: field.name,
+                        label: field.name,
                         fields: [field],
                         ...(props.instancedResource.showGroupsDisplayMode ===
                         "splitScreen"

koha-tmpl/intranet-tmpl/prog/js/vue/components/TabsWrapper.vue

@@ -12,8 +12,8 @@
                 :data-bs-target="'#' + tab.name?.replace(/\s/g, '_')"
                 role="tab"
                 :aria-controls="tab.name?.replace(/\s/g, '_')"
-                :data-content="tab.name"
-                >{{ tab.name }}</a
+                :data-content="tab.label"
+                >{{ tab.label }}</a
             >
         </li>
     </ul>

koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-resource.js

@@ -42,6 +42,7 @@ import {
  * @param {Function} resourceConfig.defaultToolbarButtons - A function to amend default buttons in the toolbar.
  * @param {Function} resourceConfig.additionalToolbarButtons - A function to add additional buttons to the toolbar.
  * @param {String} resourceConfig.formGroupsDisplayMode - The display mode for the form groups if not the default. Can be one of the following: "accordion", "tabs".
+ * @param {Object} resourceConfig.groupLabels - Maps each group key to its translated, user-facing label, e.g. { ordering_information: $__("Ordering information") }.
  * @param {Array} resourceConfig.stickyToolbar - The names of the components with a toolbar that should be sticky.
  * @param {Array} resourceConfig.navigationOnFormSave - The name of the component that should be navigated to when saving the resource creation/edit form. Defaults to the show component
  *
@@ -486,6 +487,10 @@ export function useBaseResource(resourceConfig) {
             );
             const groupInfo = {
                 name: group === "noGroupFound" ? null : group,
+                label:
+                    group === "noGroupFound"
+                        ? null
+                        : (resourceConfig.groupLabels?.[group] ?? group),
                 fields: groupFields,
                 hasDataToDisplay: false,
             };