From 63783fd99235d05a92b9641d6683c4482e46e028 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 29 Apr 2023 13:08:01 +0800
Subject: [PATCH] fix(nc-gui): revise datetime picker rendering logic ...

---
 .../nc-gui/components/cell/DateTimePicker.vue | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index d64419833a..c037166173 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -18,9 +18,10 @@ import {
 interface Props {
   modelValue?: string | null
   isPk?: boolean
+  isUpdateOutside: Record<string, boolean>
 }
 
-const { modelValue, isPk } = defineProps<Props>()
+const { modelValue, isPk, isUpdateOutside } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -44,7 +45,7 @@ const dateTimeFormat = $computed(() => {
   return `${dateFormat} ${timeFormat}`
 })
 
-let localModelValue = $ref(modelValue ? dayjs(modelValue).utc(true).local() : undefined)
+let localModelValue = modelValue ? dayjs(modelValue).utc(true).local() : undefined
 
 let localState = $computed({
   get() {
@@ -57,10 +58,28 @@ let localState = $computed({
       return undefined
     }
 
+    // if cdf is defined, that means the value is auto-generated
+    // hence, show the local time
+    if (column?.value?.cdf) {
+      return dayjs(modelValue).utc(true).local()
+    }
+
+    // cater copy and paste
+    // when copying a datetime cell, the copied value would be local time
+    // when pasting a datetime cell, UTC (xcdb) will be saved in DB
+    // we convert back to local time
+    if (column.value.title! in (isUpdateOutside ?? {})) {
+      localModelValue = dayjs(modelValue).utc().local()
+      return localModelValue
+    }
+
+    // if localModelValue is defined, show localModelValue instead
+    // localModelValue is set in setter below
     if (localModelValue) {
       return localModelValue
     }
 
+    // empty cell - use modelValue in local time
     return dayjs(modelValue).utc(true).local()
   },
   set(val?: dayjs.Dayjs) {
@@ -71,6 +90,7 @@ let localState = $computed({
 
     if (val.isValid()) {
       const formattedValue = dayjs(val?.format(isMysql(column.value.base_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'))
+      // setting localModelValue to cater NOW function in date picker
       localModelValue = formattedValue
       emit('update:modelValue', formattedValue)
     }