fix: expanded links add record list items display value is not rendered as cell display format

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-import dayjs from 'dayjs'
-import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
+import { UITypes, dateFormats, parseStringDateTime, timeFormats } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
@@ -154,18 +153,21 @@ const parseKey = (group: Group) => {
   }
 
   // show the groupBy dateTime field title format as like cell format
-  if (key && group.column?.uidt === UITypes.DateTime && dayjs(key).isValid()) {
-    const dateFormat = parseProp(group.column?.meta)?.date_format ?? dateFormats[0]
-    const timeFormat = parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
-
-    const dateTimeFormat = `${dateFormat} ${timeFormat}`
-
-    return [dayjs(key).utc().local().format(dateTimeFormat)]
+  if (key && group.column?.uidt === UITypes.DateTime) {
+    const dateTime = parseStringDateTime(
+      key,
+      `${parseProp(group.column?.meta)?.date_format ?? dateFormats[0]} ${
+        parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
+      }`,
+    )
+
+    return [dateTime]
   }
 
   // show the groupBy time field title format as like cell format
-  if (key && group.column?.uidt === UITypes.Time && dayjs(key).isValid()) {
-    return [dayjs(key).format(timeFormats[0])]
+  if (key && group.column?.uidt === UITypes.Time) {
+    const time = parseStringDateTime(key, timeFormats[0], false)
+    return [time]
   }
 
   if (key && group.column?.uidt === UITypes.User) {

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -49,6 +49,7 @@ const {
   loadChildrenList,
   childrenListPagination,
   relatedTableDisplayValueProp,
+  relatedTableDisplayValueTypeAndFormatProp,
   unlink,
   isChildrenListLoading,
   isChildrenListLinked,
@@ -260,6 +261,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
               data-testid="nc-child-list-item"
               :attachment="attachmentCol"
               :related-table-display-value-prop="relatedTableDisplayValueProp"
+              :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp"
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"

packages/nc-gui/components/virtual-cell/components/ListItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
+import { UITypes, isVirtualCol, parseStringDateTime } from 'nocodb-sdk'
 import {
   type ComputedRef,
   IsExpandedFormOpenInj,
@@ -22,6 +22,7 @@ const props = defineProps<{
   fields: any[]
   attachment: any
   relatedTableDisplayValueProp: string
+  relatedTableDisplayValueTypeAndFormatProp: { type: string; format: string }
   isLoading: boolean
   isLinked: boolean
 }>()
@@ -68,6 +69,21 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     return []
   }
 })
+
+const displayValue = computed(() => {
+  if (
+    row.value[props.relatedTableDisplayValueProp] &&
+    props.relatedTableDisplayValueTypeAndFormatProp.type &&
+    props.relatedTableDisplayValueTypeAndFormatProp.format
+  ) {
+    return parseStringDateTime(
+      row.value[props.relatedTableDisplayValueProp],
+      props.relatedTableDisplayValueTypeAndFormatProp.format,
+      !(props.relatedTableDisplayValueTypeAndFormatProp.format === UITypes.Time),
+    )
+  }
+  return row.value[props.relatedTableDisplayValueProp]
+})
 </script>
 
 <template>
@@ -104,7 +120,7 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
       <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center overflow-hidden">
         <div class="flex justify-between xs:gap-x-2">
           <span class="font-semibold text-brand-500 nc-display-value xs:(truncate)">
-            {{ row[relatedTableDisplayValueProp] }}
+            {{ displayValue }}
           </span>
           <div
             v-if="isLinked && !isLoading"

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -44,6 +44,7 @@ const {
   loadChildrenList,
   childrenExcludedListPagination,
   relatedTableDisplayValueProp,
+  relatedTableDisplayValueTypeAndFormatProp,
   link,
   relatedTableMeta,
   meta,
@@ -315,6 +316,7 @@ const onCreatedRecord = (record: any) => {
             :fields="fields"
             :attachment="attachmentCol"
             :related-table-display-value-prop="relatedTableDisplayValueProp"
+            :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp"
             :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
             :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]"
             @expand="

packages/nc-gui/composables/useLTARStore.ts

@@ -1,4 +1,13 @@
-import type { ColumnType, LinkToAnotherRecordType, PaginatedType, RequestParams, TableType } from 'nocodb-sdk'
+import {
+  UITypes,
+  type ColumnType,
+  type LinkToAnotherRecordType,
+  type PaginatedType,
+  type RequestParams,
+  type TableType,
+  dateFormats,
+  timeFormats,
+} from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
   IsPublicInj,
@@ -20,6 +29,7 @@ import {
   useRouter,
   useSharedView,
   watch,
+  parseProp,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -121,9 +131,36 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
+    const relatedTableDisplayValueTypeAndFormatProp = computed(() => {
+      let dateOrDateTimeFieldTypeAndFormat = {
+        type: '',
+        format: '',
+      }
+      let currentColumn = relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0]
+
+      if (currentColumn) {
+        if (currentColumn?.uidt === UITypes.DateTime) {
+          dateOrDateTimeFieldTypeAndFormat = {
+            type: currentColumn?.uidt,
+            format: `${parseProp(currentColumn?.meta)?.date_format ?? dateFormats[0]} ${
+              parseProp(currentColumn?.meta)?.time_format ?? timeFormats[0]
+            }`,
+          }
+        }
+        if (currentColumn?.uidt === UITypes.Time) {
+          dateOrDateTimeFieldTypeAndFormat = {
+            type: currentColumn?.uidt,
+            format: `${timeFormats[0]}`,
+          }
+        }
+      }
+      return dateOrDateTimeFieldTypeAndFormat
+    })
+
     const relatedTablePrimaryKeyProps = computed(() => {
       return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
     })
+
     const displayValueProp = computed(() => {
       return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
@@ -470,6 +507,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       relatedTableMeta,
       loadRelatedTableMeta,
       relatedTableDisplayValueProp,
+      relatedTableDisplayValueTypeAndFormatProp,
       childrenExcludedList,
       childrenList,
       childrenListCount,

packages/nocodb-sdk/src/lib/dateTimeHelper.ts

@@ -79,14 +79,17 @@ export function parseStringDate(v: string, dateFormat: string) {
 
 export function parseStringDateTime(
   v: string,
-  dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`
+  dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`,
+  toLocal: boolean = true
 ) {
-  const dayjsObj = dayjs(v).local();
+  const dayjsObj = toLocal ? dayjs(v).local() : dayjs(v);
 
   if (dayjsObj.isValid()) {
     v = dayjsObj.format(dateTimeFormat);
   } else {
-    v = dayjs(v, dateTimeFormat).local().format(dateTimeFormat);
+    v = toLocal
+      ? dayjs(v, dateTimeFormat).local().format(dateTimeFormat)
+      : dayjs(v, dateTimeFormat).format(dateTimeFormat);
   }
 
   return v;