feat(nc-gui): handle datetime for LTAR

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

@@ -11,6 +11,7 @@ import {
   useLTARStoreOrThrow,
   useUIPermission,
 } from '#imports'
+import { renderValue } from "./utils";
 
 interface Props {
   value?: string | number | boolean
@@ -60,7 +61,7 @@ export default {
     :class="{ active }"
     @click="openExpandedForm"
   >
-    <span class="name">{{ value }}</span>
+    <span class="name">{{ renderValue(value) }}</span>
 
     <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
       <component

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

@@ -18,6 +18,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { renderValue } from "./utils";
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
@@ -148,7 +149,7 @@ const onClick = (row: Row) => {
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
-                {{ row[relatedTableDisplayValueProp] }}
+                {{ renderValue(row[relatedTableDisplayValueProp]) }}
                 <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
 

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

@@ -18,6 +18,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { renderValue } from "./utils";
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -229,7 +230,7 @@ watch(vModel, (nextVal) => {
             :class="{ 'nc-selected-row': selectedRowIndex === i }"
             @click="linkRow(refRow)"
           >
-            {{ refRow[relatedTableDisplayValueProp] }}
+            {{ renderValue(refRow[relatedTableDisplayValueProp]) }}
             <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">
               ({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }})
             </span>

packages/nc-gui/components/virtual-cell/components/utils.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+
+export const renderValue = (value: string | number | boolean) => {
+  if (!value || typeof value !== 'string') return value
+  return value.replace(/\b(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\+\d{2}:\d{2})\b/g, (d) => {
+    // TODO(timezone): retrieve the format from the corresponding column meta
+    // assume hh:mm at this moment
+    return dayjs(d).utc().local().format('YYYY-MM-DD HH:mm')
+  })
+}