From 15fe013de274250faaaffdc11967e89e673ff1e6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Nov 2023 12:24:12 +0000
Subject: [PATCH] feat: handle json array parse in ui

---
 .../components/smartsheet/grid/GroupBy.vue      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index dbb97ad07a..89eb9e9159 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
+import { UITypes } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
@@ -134,6 +135,20 @@ const onScroll = (e: Event) => {
   if (!vGroup.value.root) return
   _scrollLeft.value = (e.target as HTMLElement).scrollLeft
 }
+
+const parseKey = (group) => {
+  // parse json array key if it's a lookup or link to another record
+  if ((group.key && group.column?.uidt === UITypes.Lookup) || group.column?.uidt === UITypes.LinkToAnotherRecord) {
+    try {
+      const parsedKey = JSON.parse(group.key)
+      return parsedKey.join(', ')
+    } catch {
+      // if parsing try to split it by `___` (for sqlite)
+      return group.key.split('___').join(', ')
+    }
+  }
+  return key
+}
 </script>
 
 <template>
@@ -247,7 +262,7 @@ const onScroll = (e: Event) => {
                               'font-weight': 500,
                             }"
                           >
-                            {{ grp.key in GROUP_BY_VARS.VAR_TITLES ? GROUP_BY_VARS.VAR_TITLES[grp.key] : grp.key.replaceAll('___',', ') }}
+                            {{ grp.key in GROUP_BY_VARS.VAR_TITLES ? GROUP_BY_VARS.VAR_TITLES[grp.key] : parseKey(grp) }}
                           </span>
                         </a-tag>
                       </div>