From e9923ffe13331ff6964fa9ec5634ffda30331d13 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Nov 2023 12:24:14 +0000
Subject: [PATCH] fix: render group by label

---
 .../components/smartsheet/grid/GroupBy.vue    | 46 +++++++------------
 .../smartsheet/grid/GroupByLabel.vue          | 28 +++++++++++
 packages/nc-gui/composables/useViewGroupBy.ts |  6 +++
 packages/nocodb/src/db/BaseModelSqlv2.ts      |  4 --
 4 files changed, 50 insertions(+), 34 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index 6965f065bf..49844a3d73 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-import {isVirtualCol, UITypes} from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
+import GroupByLabel from './GroupByLabel.vue'
 import { GROUP_BY_VARS, computed, ref } from '#imports'
 import type { Group, Row } from '#imports'
 
@@ -48,6 +49,8 @@ const fullPage = computed<boolean>(() => {
   return props.fullPage ?? (tableHeader.value?.offsetWidth ?? 0) > (props.viewWidth ?? 0)
 })
 
+const { isUIAllowed } = useRoles()
+
 const _activeGroupKeys = ref<string[] | string>()
 
 const activeGroups = computed<string[]>(() => {
@@ -137,17 +140,19 @@ const onScroll = (e: Event) => {
 }
 
 const parseKey = (group) => {
+  const key = group.key.toString()
+
   // 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) {
+  if ((key && group.column?.uidt === UITypes.Lookup) || group.column?.uidt === UITypes.LinkToAnotherRecord) {
     try {
-      const parsedKey = JSON.parse(group.key)
-      return parsedKey.join(', ')
+      const parsedKey = JSON.parse(key)
+      return parsedKey
     } catch {
       // if parsing try to split it by `___` (for sqlite)
-      return group.key.split('___').join(', ')
+      return key.split('___')
     }
   }
-  return group.key
+  return [key]
 }
 </script>
 
@@ -262,32 +267,13 @@ const parseKey = (group) => {
                               'font-weight': 500,
                             }"
                           >
-                            {{ grp.key in GROUP_BY_VARS.VAR_TITLES ? GROUP_BY_VARS.VAR_TITLES[grp.key] : parseKey(grp) }}
+                            <template v-if="grp.key in GROUP_BY_VARS.VAR_TITLES">{{
+                              GROUP_BY_VARS.VAR_TITLES[grp.key]
+                            }}</template>
+
+                            <GroupByLabel v-for="(val, ind) of parseKey(grp)" v-else :key="ind" :model-value="val" :column="grp.column"/>
                           </span>
                         </a-tag>
-
-
-
-<div>
-                        <LazySmartsheetVirtualCell
-                            v-if="isVirtualCol(grp.column)"
-                            v-model="grp.key"
-                            class="!text-gray-600"
-                            :column="grp.column"
-                            :row="record"
-                        />
-
-                        <LazySmartsheetCell
-                            v-else
-                            v-model="grp.key"
-                            class="!text-gray-600"
-                            :column="grp.column"
-                            :edit-enabled="false"
-                            :read-only="true"
-                        />
-
-</div>
-
                       </div>
                     </div>
                   </div>
diff --git a/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue b/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
new file mode 100644
index 0000000000..ee2bd5cf2a
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
+
+defineProps<{
+  column: ColumnType
+  modelValue: any
+}>()
+
+provide(ReadonlyInj, true)
+</script>
+
+<template>
+  <div class="pointer-events-none">
+    <LazySmartsheetRow v-show="!showSkeleton" :row="{ row: { [column.title]: modelValue }, rowMeta: {} }">
+      <LazySmartsheetVirtualCell v-if="isVirtualCol(column)" :model-value="modelValue" class="!text-gray-600" :column="column" />
+
+      <LazySmartsheetCell
+        v-else
+        :model-value="modelValue"
+        class="!text-gray-600"
+        :column="column"
+        :edit-enabled="false"
+        :read-only="true"
+      />
+    </LazySmartsheetRow>
+  </div>
+</template>
diff --git a/packages/nc-gui/composables/useViewGroupBy.ts b/packages/nc-gui/composables/useViewGroupBy.ts
index 7bbb31c3dc..7d715082c5 100644
--- a/packages/nc-gui/composables/useViewGroupBy.ts
+++ b/packages/nc-gui/composables/useViewGroupBy.ts
@@ -89,6 +89,12 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     if (col.uidt === UITypes.Checkbox) {
       return value ? GROUP_BY_VARS.TRUE : GROUP_BY_VARS.FALSE
     }
+
+    // convert to JSON string if non-string value
+    if(value && typeof value === 'object') {
+      value = JSON.stringify(value)
+    }
+
     return value ?? GROUP_BY_VARS.NULL
   }
 
diff --git a/packages/nocodb/src/db/BaseModelSqlv2.ts b/packages/nocodb/src/db/BaseModelSqlv2.ts
index 8734bbe296..6cf9d25d21 100644
--- a/packages/nocodb/src/db/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/db/BaseModelSqlv2.ts
@@ -388,10 +388,6 @@ class BaseModelSqlv2 {
       });
     }
 
-    console.log('=======data');
-    console.log(qb.toQuery());
-    console.log('=======data');
-
     return data?.map((d) => {
       d.__proto__ = proto;
       return d;