fix: different date across views (#1016)

* fix: precision bug & timezone offset issues introduced by xlsx

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>

* fix: primary value format in expanded form

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>

* fix: cell formatting

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>

* fix: use c._cn instead of c.cn

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>

packages/nc-gui/components/import/templateParsers/ExcelTemplateAdapter.js

@@ -46,7 +46,26 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
       this.data[tn] = []
       const ws = this.wb.Sheets[sheet]
       const range = XLSX.utils.decode_range(ws['!ref'])
-      const rows = XLSX.utils.sheet_to_json(ws, { header: 1, blankrows: false, cellDates: true, defval: null })
+      const originalRows = XLSX.utils.sheet_to_json(ws, { header: 1, blankrows: false, cellDates: true, defval: null })
+
+      // fix precision bug & timezone offset issues introduced by xlsx
+      const basedate = new Date(1899, 11, 30, 0, 0, 0);
+      // number of milliseconds since base date
+      const dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
+      // number of milliseconds in a day
+      const day_ms = 24 * 60 * 60 * 1000;
+      // handle date1904 property
+      const fixImportedDate = (date) => {
+        const parsed = XLSX.SSF.parse_date_code((date.getTime() - dnthresh) / day_ms, { 
+          date1904: this.wb.Workbook.WBProps.date1904 
+        })
+        return new Date(parsed.y, parsed.m, parsed.d, parsed.H, parsed.M, parsed.S)
+      }
+      // fix imported date
+      const rows = originalRows.map((r) => r.map((v) => {
+        return v instanceof Date ? fixImportedDate(v): v
+      }))
+      
       const columnNameRowExist = +rows[0].every(v => v === null || typeof v === 'string')
 
       // const colLen = Math.max()

packages/nc-gui/components/project/spreadsheet/components/cell/dateCell.vue

@@ -3,12 +3,14 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
+
 export default {
   name: 'DateCell',
   props: ['value'],
   computed: {
     date() {
-      return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ').replace(/\s\d{2}:\d{2}:[\d:.]+z?$/i, '') : (this.value && new Date(this.value))
+      return (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)).format('YYYY-MM-DD')
     }
   }
 }

packages/nc-gui/components/project/spreadsheet/components/cell/dateTimeCell.vue

@@ -3,16 +3,14 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
+
 export default {
   name: 'DateTimeCell',
   props: ['value'],
   computed: {
     dateTime() {
-      if (/^\d{6,}$/.test(this.value)) {
-        return new Date(+this.value)
-      }
-
-      return /\dT\d/.test(this.value) ? new Date(this.value.replace(/(\d)T(?=\d)/, '$1 ')) : ((this.value && new Date(this.value)))
+      return !this.value ? this.value : (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)).format('YYYY-MM-DD HH:mm')
     }
   }
 }

packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue

@@ -13,7 +13,7 @@
           <template v-else>
             {{ table }}
           </template>
-          : {{ localState[primaryValueColumn] }}
+          : {{ primaryValue() }}
         </h5>
         <v-spacer />
         <v-btn small text @click="reload">
@@ -267,6 +267,7 @@ import EditableCell from '@/components/project/spreadsheet/components/editableCe
 import colors from '@/mixins/colors'
 import VirtualCell from '@/components/project/spreadsheet/components/virtualCell'
 import VirtualHeaderCell from '@/components/project/spreadsheet/components/virtualHeaderCell'
+import { UITypes } from '@/components/project/spreadsheet/helpers/uiTypes'
 
 const relativeTime = require('dayjs/plugin/relativeTime')
 const utc = require('dayjs/plugin/utc')
@@ -342,7 +343,7 @@ export default {
       return Object.values(this.changedColumns).some(Boolean)
     },
     localBreadcrumbs() {
-      return [...this.breadcrumbs, `${this.meta ? this.meta._tn : this.table} (${this.localState && this.localState[this.primaryValueColumn]})`]
+      return [...this.breadcrumbs, `${this.meta ? this.meta._tn : this.table} (${this.primaryValue()})`]
     }
   },
   watch: {
@@ -436,7 +437,7 @@ export default {
         this.$emit('input', this.localState)
         this.$emit('update:isNew', false)
 
-        this.$toast.success(`${this.localState[this.primaryValueColumn]} updated successfully.`, {
+        this.$toast.success(`${this.primaryValue()} updated successfully.`, {
           position: 'bottom-right'
         }).goAway(3000)
       } catch (e) {
@@ -474,6 +475,26 @@ export default {
       } catch (e) {
         this.$toast.error(e.message).goAway(3000)
       }
+    },
+    primaryValue() {
+      if (this.localState) {
+        const value = this.localState[this.primaryValueColumn]
+        const col = this.meta.columns.find(c => c._cn == this.primaryValueColumn)
+        if (!col) return
+        const uidt = col.uidt
+        if (uidt == UITypes.Date) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
+        } else if (uidt == UITypes.DateTime) {
+          return (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)).format('YYYY-MM-DD HH:mm')
+        } else if (uidt == UITypes.Time) {
+          let dateTime = dayjs(value)
+          if (!dateTime.isValid()) dateTime = dayjs(value, 'HH:mm:ss')
+          if (!dateTime.isValid()) dateTime = dayjs(`1999-01-01 ${value}`)
+          if (!dateTime.isValid()) return value
+          return dateTime.format('HH:mm:ss')
+        }
+        return value
+      }
     }
   }
 }