From cd25cca2b5dbba0c4da8ece2b5138a1f42f3bd95 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@openfifth.co.uk>
Date: Thu, 9 Oct 2025 12:27:34 +0000
Subject: [PATCH] Bug 37893: VueJS Framework: Consider rendering of
 relationshipSelect attribute on list

The display of a relationshipSelect on the ResourceList defaults to
whats in the showElement part of the attribute definition.
This also means we can now get rid of the 'vendor' attribute type and
have that be a 'relationshipSelect' instead.

Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../prog/js/vue/components/ResourceList.vue   | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
index 705c26dfd1..636857763d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
@@ -26,6 +26,7 @@ import { ref, inject, onBeforeMount, computed } from "vue";
 import { APIClient } from "../fetch/api-client.js";
 import KohaTable from "./KohaTable.vue";
 import { $__ } from "@koha-vue/i18n";
+import { useBaseElement } from "../composables/base-element.js";
 
 export default {
     inheritAttrs: false,
@@ -42,6 +43,8 @@ export default {
             select: props.instancedResource.doResourceSelect,
         });
 
+        const { accessNestedProperty } = useBaseElement();
+
         const getResourceCount = async () => {
             await props.instancedResource.apiClient.count().then(
                 count => {
@@ -174,6 +177,44 @@ export default {
                     });
                     return acc;
                 }
+                if (attr.type === "relationshipSelect") {
+                    acc.push({
+                        title: attr.label,
+                        data: attr.name,
+                        searchable: true,
+                        orderable: true,
+                        render: function (data, type, row, meta) {
+                            if (attr.showElement) {
+                                const relationshipDisplayAttr =
+                                    accessNestedProperty(
+                                        attr.showElement.value,
+                                        row
+                                    );
+                                let href = "#";
+                                if (
+                                    attr.showElement.link?.href &&
+                                    attr.showElement.link.slug
+                                ) {
+                                    href =
+                                        attr.showElement.link.href +
+                                        `/${row[attr.showElement.link.slug]}`;
+                                }
+                                return (
+                                    '<a href="' +
+                                    href +
+                                    '">' +
+                                    relationshipDisplayAttr +
+                                    "</a>"
+                                );
+                            }
+                            return accessNestedProperty(
+                                attr.relationshipDisplayAttr,
+                                row
+                            );
+                        },
+                    });
+                    return acc;
+                }
                 if (attr.type === "select" && attr.avCat) {
                     acc.push({
                         title: attr.label,