Bugzilla – Attachment 188876 Details for
Bug 41151
Vue Additional Fields UX Improvements
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 41151: Display multi-value additional fields as lists in datatables
Bug-41151-Display-multi-value-additional-fields-as.patch (text/plain), 4.76 KB, created by
Martin Renvoize (ashimema)
on 2025-11-01 14:12:35 UTC
(
hide
)
Description:
Bug 41151: Display multi-value additional fields as lists in datatables
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2025-11-01 14:12:35 UTC
Size:
4.76 KB
patch
obsolete
>From 212cabb96bb86f17621d12b74255f8f1a3684159 Mon Sep 17 00:00:00 2001 >From: Martin Renvoize <martin.renvoize@openfifth.co.uk> >Date: Fri, 31 Oct 2025 11:43:41 +0000 >Subject: [PATCH] Bug 41151: Display multi-value additional fields as lists in > datatables >MIME-Version: 1.0 >Content-Type: text/plain; charset=UTF-8 >Content-Transfer-Encoding: 8bit > >This patch improves the display of searchable repeatable additional >fields in datatable columns by: > >- Detecting comma-separated values in the value_str field >- Rendering multiple values as an HTML unordered list instead of > comma-separated text >- Adding appropriate CSS styling for list display within table cells >- Maintaining single-value display for non-repeatable fields > >This makes multi-value additional fields much more readable in list >views, with each value appearing on its own line within the table cell. > >For example, "Bang, History" now displays as: > ⢠Bang > ⢠History > >This completes the UX improvements for additional fields across all >three contexts: entry forms, detail views, and list datatables. > >Signed-off-by: David Nind <david@davidnind.com> >--- > .../prog/js/vue/components/KohaTable.vue | 59 ++++++++++++++++--- > 1 file changed, 52 insertions(+), 7 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue >index 6ce067b8e46..0bade1bd343 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue >@@ -115,13 +115,44 @@ export default { > searchable_field => { > var _customRender = (function (searchable_field) { > var _render = function (data, type, row, meta) { >- return row._strings.additional_field_values >- .filter( >- field => >- field.field_id == >- searchable_field.extended_attribute_type_id >- ) >- .map(el => el.value_str); >+ const fieldValues = >+ row._strings.additional_field_values >+ .filter( >+ field => >+ field.field_id == >+ searchable_field.extended_attribute_type_id >+ ) >+ .map(el => el.value_str); >+ >+ if (fieldValues.length === 0) { >+ return ""; >+ } >+ >+ const valueStr = fieldValues[0]; >+ >+ // Check if there are multiple comma-separated values >+ if (valueStr && valueStr.includes(",")) { >+ const values = valueStr >+ .split(",") >+ .map(v => v.trim()) >+ .filter(v => v); >+ if (values.length > 1) { >+ // Return as unordered list >+ return ( >+ '<ul class="additional-field-list">' + >+ values >+ .map( >+ v => >+ "<li>" + v + "</li>" >+ ) >+ .join("") + >+ "</ul>" >+ ); >+ } >+ } >+ >+ // Single value, return as-is >+ return valueStr; > }; > return _render; > })(searchable_field); >@@ -341,3 +372,17 @@ export default { > }, > }; > </script> >+ >+<style> >+/* Additional fields list styling in datatable */ >+.additional-field-list { >+ margin: 0; >+ padding-left: 1.2em; >+ list-style-type: disc; >+} >+ >+.additional-field-list li { >+ padding: 0.1rem 0; >+ line-height: 1.4; >+} >+</style> >-- >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 41151
:
188814
|
188815
|
188816
|
188817
|
188818
|
188819
|
188820
|
188821
|
188822
|
188874
|
188875
| 188876 |
188877
|
188878
|
188879
|
188880