gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Pedro Amorim 2025-02-04 09:47:09 +00:00 committed by Lucas Gass
parent 5f07cb13f8
commit cae0aef587
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
2 changed files with 84 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
koha-tmpl/intranet-tmpl/prog/js/vue/components/RelationshipWidget.vue
View File

@ -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>

92
koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceFormAdd.vue
View File

@ -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>