From 212cabb96bb86f17621d12b74255f8f1a3684159 Mon Sep 17 00:00:00 2001 From: Martin Renvoize 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 --- .../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 ( + '" + ); + } + } + + // Single value, return as-is + return valueStr; }; return _render; })(searchable_field); @@ -341,3 +372,17 @@ export default { }, }; + + -- 2.51.1