refactor(nc-gui): revise renderValue for formula & LTAR

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

@@ -1,41 +1,26 @@
 <script lang="ts" setup>
-import dayjs from 'dayjs'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, computed, handleTZ, inject, replaceUrlsWithLink, useProject } from '#imports'
+import { CellValueInj, ColumnInj, computed, handleTZ, inject, renderCellValue, replaceUrlsWithrenderValuet } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
 
 const cellValue = inject(CellValueInj)
 
-const { isPg } = useProject()
+const { isPg, isMssql } = useProject()
 
-const result = computed(() =>
+const result = computed(() => {
-  isPg(column.value.base_id) ? renderResult(handleTZ(cellValue?.value)) : renderResult(cellValue?.value),
+  const isMSSQL = isMssql(column.value.base_id)
-)
+  return isPg(column.value.base_id)
+    ? renderValue(isMSSQL, handleTZ(cellValue?.value))
+    : renderValue(isMSSQL, cellValue?.value)
+})
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } =
   useShowNotEditableWarning()
-
-const renderResult = (result?: any) => {
-  if (!result || typeof result !== 'string') {
-    return result
-  }
-  // convert all date time values to local time
-  // the datetime is either YYYY-MM-DD hh:mm:ss (xcdb)
-  // or YYYY-MM-DD hh:mm:ss+xx:yy (ext)
-  return result.replace('.000000', '').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(result.indexOf('+') === -1)
-      .local()
-      .format('YYYY-MM-DD HH:mm')
-  })
-}
 </script>
 
 <template>

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

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
 import {
   ActiveCellInj,
+  ColumnInj,
   IsFormInj,
   IsLockedInj,
   ReadonlyInj,
   iconMap,
   inject,
   ref,
+  renderCellValue,
   useExpandedFormDetached,
   useLTARStoreOrThrow,
-  useUIPermission,
+  useProject,
+  renderValue,
 } from '#imports'
-import { renderValue } from "./utils";
 
 interface Props {
   value?: string | number | boolean
@@ -36,6 +38,10 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { open } = useExpandedFormDetached()
 
+const { isMssql } = useProject()
+
+const column = inject(ColumnInj)
+
 function openExpandedForm() {
   if (!readOnly && !isLocked.value) {
     open({
@@ -61,7 +67,7 @@ export default {
     :class="{ active }"
     @click="openExpandedForm"
   >
-    <span class="name">{{ renderValue(value) }}</span>
+    <span class="name">{{ renderValue(isMssql(column.value.base_id), 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

@@ -13,12 +13,13 @@ import {
   iconMap,
   inject,
   ref,
+  renderCellValue,
   useLTARStoreOrThrow,
+  useProject,
   useSmartsheetRowStoreOrThrow,
   useVModel,
-  watch,
+  renderValue
 } from '#imports'
-import { renderValue } from "./utils";
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
@@ -26,6 +27,8 @@ const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
+const { isMssql } = useProject()
+
 const isForm = inject(IsFormInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
@@ -149,7 +152,7 @@ const onClick = (row: Row) => {
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
-                {{ renderValue(row[relatedTableDisplayValueProp]) }}
+                {{ renderValue(isMssql(column.value.base_id), 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

@@ -12,13 +12,14 @@ import {
   inject,
   isDrawerExist,
   ref,
+  renderCellValue,
   useLTARStoreOrThrow,
+  useProject,
   useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useVModel,
-  watch,
+  renderValue
 } from '#imports'
-import { renderValue } from "./utils";
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -26,6 +27,8 @@ const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
+const { isMssql } = useProject()
+
 const column = inject(ColumnInj)
 
 const filterQueryRef = ref()
@@ -230,7 +233,7 @@ watch(vModel, (nextVal) => {
             :class="{ 'nc-selected-row': selectedRowIndex === i }"
             @click="linkRow(refRow)"
           >
-            {{ renderValue(refRow[relatedTableDisplayValueProp]) }}
+            {{ renderValue(isMssql(column.value.base_id), 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

@@ -1,10 +0,0 @@
-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(value.indexOf('+') === -1).local().format('YYYY-MM-DD HH:mm')
-  })
-}