From cae0aef58777a86f8fd2e2bb08193b899df686be Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Tue, 4 Feb 2025 09:47:09 +0000
Subject: [PATCH] Bug 38201: Allow for form display groups as tabs

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../js/vue/components/RelationshipWidget.vue  |  8 +-
 .../js/vue/components/ResourceFormAdd.vue     | 92 ++++++++++++++++---
 2 files changed, 84 insertions(+), 16 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/RelationshipWidget.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/RelationshipWidget.vue
index 0cb2b81ce2..a0c65af55a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/RelationshipWidget.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/RelationshipWidget.vue
@@ -31,7 +31,7 @@
         </fieldset>
         <a
             v-if="resourceRelationshipCount > 0 || noCountRequired"
-            class="btn btn-default"
+            class="btn btn-default add-new-relationship"
             @click="addResourceRelationship"
             ><font-awesome-icon icon="plus" />
             {{ $__("Add new %s").format(resourceStrings.nameLowerCase) }}</a
@@ -114,3 +114,9 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.add-new-relationship {
+    margin-top: 0.5em;
+}
+</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormAdd.vue
index 2496025ca6..6b2e73b375 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormAdd.vue
@@ -11,12 +11,64 @@
             }}
         </h2>
         <h2 v-else>{{ $__("New") + " " + i18n.displayName }}</h2>
-        <div>
-            <form @submit="onSubmit($event, resourceToAddOrEdit)">
-                <fieldset
-                    class="rows"
+        <ul
+            v-if="formGroupsDisplayMode == 'tabs'"
+            class="nav nav-tabs"
+            role="tablist"
+        >
+            <li
+                v-for="(tab, counter) in getFieldGroupings('Form')"
+                class="nav-item"
+            >
+                <a
+                    href="#"
+                    :class="['nav-link', { active: counter == 0 }]"
+                    data-bs-toggle="tab"
+                    :data-bs-target="'#' + tab.name?.replace(/\s/g, '_')"
+                    role="tab"
+                    :aria-controls="tab.name?.replace(/\s/g, '_')"
+                    :data-content="tab.name"
+                    >{{ tab.name }}</a
+                >
+            </li>
+        </ul>
+        <form @submit="onSubmit($event, resourceToAddOrEdit)">
+            <div v-if="formGroupsDisplayMode == 'tabs'" class="tab-content">
+                <div
                     v-for="(group, counter) in getFieldGroupings('Form')"
                     v-bind:key="counter"
+                    :id="group.name?.replace(/\s/g, '_')"
+                    role="tabpanel"
+                    :aria-labelledby="group.name?.replace(/\s/g, '_') + '-tab'"
+                    :class="[
+                        'tab-pane',
+                        'rows',
+                        { show: counter == 0 },
+                        { active: counter == 0 },
+                    ]"
+                >
+                    <fieldset class="rows">
+                        <legend v-if="group.name">{{ group.name }}</legend>
+                        <ol>
+                            <li
+                                v-for="(attr, index) in group.fields"
+                                v-bind:key="index"
+                            >
+                                <FormElement
+                                    :resource="resourceToAddOrEdit"
+                                    :attr="attr"
+                                    :index="index"
+                                />
+                            </li>
+                        </ol>
+                    </fieldset>
+                </div>
+            </div>
+            <div v-else>
+                <fieldset
+                    v-for="(group, counter) in getFieldGroupings('Form')"
+                    v-bind:key="counter"
+                    class="rows"
                 >
                     <legend v-if="group.name">{{ group.name }}</legend>
                     <ol>
@@ -32,17 +84,17 @@
                         </li>
                     </ol>
                 </fieldset>
-                <fieldset class="action">
-                    <ButtonSubmit />
-                    <router-link
-                        :to="{ name: listComponent }"
-                        role="button"
-                        class="cancel"
-                        >{{ $__("Cancel") }}</router-link
-                    >
-                </fieldset>
-            </form>
-        </div>
+            </div>
+            <fieldset class="action">
+                <ButtonSubmit />
+                <router-link
+                    :to="{ name: listComponent }"
+                    role="button"
+                    class="cancel"
+                    >{{ $__("Cancel") }}</router-link
+                >
+            </fieldset>
+        </form>
     </div>
 </template>
 
@@ -67,6 +119,7 @@ export default {
         onSubmit: Function,
         resourceName: String,
         getFieldGroupings: Function,
+        formGroupsDisplayMode: String,
     },
     created() {
         if (this.$route.params[this.idAttr]) {
@@ -101,3 +154,12 @@ export default {
     name: "ResourceFormAdd",
 };
 </script>
+
+<style scoped>
+div.rows li {
+    border-bottom: none;
+}
+div.rows + div.rows {
+    margin-top: 0em;
+}
+</style>