refactor: render elements horizontally

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -49,8 +49,6 @@ 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[]>(() => {
@@ -154,6 +152,9 @@ const parseKey = (group) => {
   }
   return [key]
 }
+
+const shouldRenderCell = (column) =>
+  [UITypes.Lookup, UITypes.Attachment, UITypes.Barcode, UITypes.QrCode, UITypes.Links].includes(column?.uidt)
 </script>
 
 <template>
@@ -247,6 +248,9 @@ const parseKey = (group) => {
                             </span>
                           </a-tag>
                         </template>
+                        <div v-else-if="shouldRenderCell(grp.column)" class="flex min-w-[100px] flex-wrap">
+                          <GroupByLabel v-for="(val, ind) of parseKey(grp)" :key="ind" :model-value="val" :column="grp.column" />
+                        </div>
                         <a-tag
                           v-else
                           :key="`panel-tag-${grp.column.id}-${grp.key}`"
@@ -270,8 +274,9 @@ const parseKey = (group) => {
                             <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"/>
+                            <template v-else>
+                              {{ parseKey(grp)?.join(', ') }}
+                            </template>
                           </span>
                         </a-tag>
                       </div>

packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 
-const props = defineProps<{
+defineProps<{
   column: ColumnType
   modelValue: any
 }>()
 
 provide(ReadonlyInj, true)
-
-const renderCell = computed(() =>
-  [UITypes.Lookup, UITypes.Attachment, UITypes.Barcode, UITypes.QrCode, UITypes.Links].includes(props.column?.uidt),
-)
 </script>
 
 <template>
   <div class="pointer-events-none">
-    <LazySmartsheetRow v-if="renderCell" :row="{ row: { [column.title]: modelValue }, rowMeta: {} }">
+    <LazySmartsheetRow :row="{ row: { [column.title]: modelValue }, rowMeta: {} }">
       <LazySmartsheetVirtualCell v-if="isVirtualCol(column)" :model-value="modelValue" class="!text-gray-600" :column="column" />
 
       <LazySmartsheetCell
@@ -28,6 +24,5 @@ const renderCell = computed(() =>
         :read-only="true"
       />
     </LazySmartsheetRow>
-    <template v-else>{{ modelValue }}</template>
   </div>
 </template>

packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue

@@ -158,15 +158,11 @@ const loadAllowedLookups = async () => {
       if (col.uidt !== UITypes.Lookup) continue
 
       let nextCol = col
-
       // check the lookup column is supported type or not
-      while (btLookup && nextCol && nextCol.uidt === UITypes.Lookup) {
+      while (nextCol && nextCol.uidt === UITypes.Lookup) {
         const lookupRelation = (await getMeta(nextCol.fk_model_id))?.columns?.find(
           (c) => c.id === (nextCol.colOptions as LookupType).fk_relation_column_id,
         )
-        if ((lookupRelation.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO) {
-          continue
-        }
 
         const relatedTableMeta = await getMeta((lookupRelation.colOptions as LinkToAnotherRecordType).fk_related_model_id)
 

packages/nc-gui/composables/useViewGroupBy.ts

@@ -91,7 +91,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     }
 
     // convert to JSON string if non-string value
-    if(value && typeof value === 'object') {
+    if (value && typeof value === 'object') {
       value = JSON.stringify(value)
     }