From 50ceacd938bd938e594f3639505cd7539ee2bb35 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 6 Sep 2024 12:36:04 +0200
Subject: [PATCH] Display related

---
 .../GridColumnConfiguration/getColumns.js     |  2 +-
 .../src/components/grid/stores/datasource.js  |  1 -
 .../src/components/grid/stores/rows.js        | 32 +++++++++++++++----
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index 384f20cf65..419628ead2 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -75,7 +75,7 @@ const getDefault = (schema = {}) => {
             field: `${column.name}.${relColumn}`,
             active: column.visible ?? true,
             order,
-            related: true,
+            related: { field: column.name, subField: relColumn },
           })
         }
       }
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
index 3af6948650..6e0b31de4b 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -83,7 +83,6 @@ export const deriveStores = context => {
             ...$schemaOverrides[field],
             name: field,
             type: FieldType.FORMULA,
-            related: true,
           }
         })
       }
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index fb7a487c8e..e13767cbca 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -6,6 +6,7 @@ import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
 import { FieldType } from "@budibase/types"
+import { processStringSync } from "@budibase/string-templates"
 
 export const createStores = () => {
   const rows = writable([])
@@ -42,15 +43,32 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { rows } = context
+  const { rows, enrichedSchema } = context
 
   // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(rows, $rows => {
-    return $rows.map((row, idx) => ({
-      ...row,
-      __idx: idx,
-    }))
-  })
+  const enrichedRows = derived(
+    [rows, enrichedSchema],
+    ([$rows, $enrichedSchema]) => {
+      const customColumns = Object.values($enrichedSchema || {}).filter(
+        f => f.related
+      )
+      return $rows.map((row, idx) => ({
+        ...row,
+        __idx: idx,
+        ...customColumns.reduce((acc, c) => {
+          try {
+            acc[c.name] = processStringSync(
+              `{{ join (pluck ${c.related.field} '${c.related.subField}') ', ' }}`,
+              row
+            )
+          } catch {
+            // It might be some formula not set, or anything being incorrect
+          }
+          return acc
+        }, {}),
+      }))
+    }
+  )
 
   // Generate a lookup map to quick find a row by ID
   const rowLookupMap = derived(enrichedRows, $enrichedRows => {