fix: add links modal displayValue in header is not like cell format

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

@@ -49,7 +49,7 @@ const {
   loadChildrenList,
   childrenListPagination,
   relatedTableDisplayValueProp,
-  relatedTableDisplayValueTypeAndFormatProp,
+  displayValueTypeAndFormatProp,
   unlink,
   isChildrenListLoading,
   isChildrenListLinked,
@@ -58,7 +58,7 @@ const {
   row,
   link,
   meta,
-  displayValueProp,
+  headerDisplayValue
 } = useLTARStoreOrThrow()
 
 const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow()
@@ -196,7 +196,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
       :table-title="meta?.title"
       :header="$t('activity.linkedRecords')"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="row.row[displayValueProp]"
+      :display-value="headerDisplayValue"
     />
     <div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
       <div
@@ -261,7 +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"
+              :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
               :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

@@ -22,7 +22,7 @@ const props = defineProps<{
   fields: any[]
   attachment: any
   relatedTableDisplayValueProp: string
-  relatedTableDisplayValueTypeAndFormatProp: { type: string; format: string }
+  displayValueTypeAndFormatProp: { type: string; format: string }
   isLoading: boolean
   isLinked: boolean
 }>()
@@ -73,13 +73,13 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
 const displayValue = computed(() => {
   if (
     row.value[props.relatedTableDisplayValueProp] &&
-    props.relatedTableDisplayValueTypeAndFormatProp.type &&
-    props.relatedTableDisplayValueTypeAndFormatProp.format
+    props.displayValueTypeAndFormatProp.type &&
+    props.displayValueTypeAndFormatProp.format
   ) {
     return parseStringDateTime(
       row.value[props.relatedTableDisplayValueProp],
-      props.relatedTableDisplayValueTypeAndFormatProp.format,
-      !(props.relatedTableDisplayValueTypeAndFormatProp.format === UITypes.Time),
+      props.displayValueTypeAndFormatProp.format,
+      !(props.displayValueTypeAndFormatProp.format === UITypes.Time),
     )
   }
   return row.value[props.relatedTableDisplayValueProp]

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

@@ -37,19 +37,19 @@ const {
   childrenExcludedList,
   isChildrenExcludedListLinked,
   isChildrenExcludedListLoading,
-  displayValueProp,
   isChildrenExcludedLoading,
   childrenListCount,
   loadChildrenExcludedList,
   loadChildrenList,
   childrenExcludedListPagination,
   relatedTableDisplayValueProp,
-  relatedTableDisplayValueTypeAndFormatProp,
+  displayValueTypeAndFormatProp,
   link,
   relatedTableMeta,
   meta,
   unlink,
   row,
+  headerDisplayValue
 } = useLTARStoreOrThrow()
 
 const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowStoreOrThrow()
@@ -236,7 +236,7 @@ const onCreatedRecord = (record: any) => {
       :relation="relation"
       :table-title="meta?.title"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="row.row[displayValueProp]"
+      :display-value="headerDisplayValue"
       :header="$t('activity.addNewLink')"
     />
     <div class="flex mt-2 mb-2 items-center gap-2">
@@ -316,7 +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"
+            :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
             :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
             :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]"
             @expand="

packages/nc-gui/composables/useLTARStore.ts

@@ -7,6 +7,7 @@ import {
   type TableType,
   dateFormats,
   timeFormats,
+  parseStringDateTime,
 } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
@@ -131,8 +132,16 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
-    const relatedTableDisplayValueTypeAndFormatProp = computed(() => {
-      let 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
+    })
+
+    const displayValueTypeAndFormatProp = computed(() => {
+      let displayValueTypeAndFormat = {
         type: '',
         format: '',
       }
@@ -140,7 +149,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
       if (currentColumn) {
         if (currentColumn?.uidt === UITypes.DateTime) {
-          dateOrDateTimeFieldTypeAndFormat = {
+          displayValueTypeAndFormat = {
             type: currentColumn?.uidt,
             format: `${parseProp(currentColumn?.meta)?.date_format ?? dateFormats[0]} ${
               parseProp(currentColumn?.meta)?.time_format ?? timeFormats[0]
@@ -148,21 +157,28 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           }
         }
         if (currentColumn?.uidt === UITypes.Time) {
-          dateOrDateTimeFieldTypeAndFormat = {
+          displayValueTypeAndFormat = {
             type: currentColumn?.uidt,
             format: `${timeFormats[0]}`,
           }
         }
       }
-      return dateOrDateTimeFieldTypeAndFormat
+      return displayValueTypeAndFormat
     })
 
-    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
+    const headerDisplayValue = computed(() => {
+      if (
+        row.value.row[displayValueProp.value] &&
+        displayValueTypeAndFormatProp.value.type &&
+        displayValueTypeAndFormatProp.value.format
+      ) {
+        return parseStringDateTime(
+          row.value.row[displayValueProp.value],
+          displayValueTypeAndFormatProp.value.format,
+          !(displayValueTypeAndFormatProp.value.format === UITypes.Time),
+        )
+      }
+      return row.value.row[displayValueProp.value]
     })
 
     const loadChildrenExcludedList = async (activeState?: any) => {
@@ -507,7 +523,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       relatedTableMeta,
       loadRelatedTableMeta,
       relatedTableDisplayValueProp,
-      relatedTableDisplayValueTypeAndFormatProp,
+      displayValueTypeAndFormatProp,
       childrenExcludedList,
       childrenList,
       childrenListCount,
@@ -529,6 +545,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       isChildrenExcludedLoading,
       deleteRelatedRow,
       getRelatedTableRowId,
+      headerDisplayValue
     }
   },
   'ltar-store',