fix: handling database and browser timezone

re #483

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/ProjectTreeView.vue

@@ -228,7 +228,7 @@
                         >
                           <v-icon
                             small
-                            :class="`nc-child-draggable-icon-${child.name}`"
+                            :class="`nc-child-draggable-icon nc-child-draggable-icon-${child.name}`"
                           >
                             mdi-drag-vertical
                           </v-icon>

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

@@ -43,22 +43,19 @@
       v-else-if="isDate"
       v-model="localState"
       v-on="parentListeners"
-      @input="$emit('change')"
     />
 
     <time-picker-cell
       v-else-if="isTime"
       v-model="localState"
       v-on="parentListeners"
-      @update="$emit('change')"
     />
 
     <date-time-picker-cell
       v-else-if="isDateTime"
       v-model="localState"
-      ignore-focus="ignoreFocus"
+      ignore-focus
       v-on="parentListeners"
-      @input="$emit('change')"
     />
 
     <enum-cell
@@ -178,11 +175,10 @@ export default {
         return this.value
       },
       set(val) {
-        this.changed = true
         if (val !== this.value) {
+          this.changed = true
           this.$emit('input', val)
-          // debugger
+          if (this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime || this.isDateTime || this.isDate) {
-          if (this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime) {
             this.syncData()
           } else {
             this.syncDataDebounce(this)
@@ -217,14 +213,16 @@ export default {
     // this.$refs.input.focus();
   },
   beforeDestroy() {
-    if (this.changed && !(this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime)) {
+    if (this.changed && !(this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime || this.isDateTime)) {
+      this.changed = false
       this.$emit('change')
     }
     this.destroyed = true
   },
   methods: {
     syncData() {
-      if (!this.destroyed) {
+      if (this.changed && !this.destroyed) {
+        this.changed = false
         this.$emit('update')
       }
     }

packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue

@@ -1,20 +1,22 @@
 <template>
-  <v-datetime-picker
+  <div>
-    ref="picker"
+    <v-datetime-picker
-    v-model="localState"
+      ref="picker"
-    class="caption xc-date-time-picker"
+      v-model="localState"
-    :text-field-props="{
+      class="caption xc-date-time-picker"
-      class:'caption mt-0 pt-0',
+      :text-field-props="{
-      flat:true,
+        class:'caption mt-0 pt-0',
-      solo:true,
+        flat:true,
-      dense:true,
+        solo:true,
-      hideDetails:true
+        dense:true,
-    }"
+        hideDetails:true
-    :time-picker-props="{
+      }"
-      format:'24hr'
+      :time-picker-props="{
-    }"
+        format:'24hr'
-    v-on="parentListeners"
+      }"
-  />
+      v-on="parentListeners"
+    />
+  </div>
 </template>
 
 <script>
@@ -25,14 +27,16 @@ dayjs.extend(utc)
 
 export default {
   name: 'DateTimePickerCell',
-  props: ['value', 'ignoreFocus'],
+  props: {
+    value: [String, Date, Number], ignoreFocus: Boolean
+  },
   computed: {
     localState: {
       get() {
         if (!this.value) { return this.value }
 
+        console.log(this.value, dayjs(this.value).utc().format('YYYY-MM-DD HH:mm'))
         return dayjs(this.value).format('YYYY-MM-DD HH:mm')
-
         // todo : time value correction
         //
         // if (/^\d{6,}$/.test(this.value)) {
@@ -44,14 +48,16 @@ export default {
       set(val) {
         // console.log('dayjs=====', dayjs.utc(val).toString())
         // const uVal = val && new Date(val).toISOString().slice(0, 19).replace('T', ' ').replace(/(\d{1,2}:\d{1,2}):\d{1,2}$/, '$1')
-        this.$emit('input', val && dayjs(val).format('YYYY-MM-DD HH:mm'))
+        // console.log(uVal)
+
+        this.$emit('input', val && dayjs(val).format('YYYY-MM-DD HH:mm:ssZ'))
       }
     },
     parentListeners() {
       const $listeners = {}
 
       if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
+        // $listeners.blur = this.$listeners.blur
       }
       if (this.$listeners.focus) {
         $listeners.focus = this.$listeners.focus

packages/nc-gui/components/project/spreadsheet/components/editableCell/timePickerCell.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
+
 export default {
   name: 'TimePickerCell',
   props: {
@@ -20,12 +22,34 @@ export default {
   },
   computed: {
     localState: {
+      // get() {
+      //   return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ') : this.value
+      // },
+      // set(val) {
+      //   this.$emit('input', (new Date(val).toJSON() || '').slice(0, 10) || val)
+      // }
       get() {
-        return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ') : this.value
+        if (!this.value) {
+          return this.value
+        }
+        let dateTime = dayjs(this.value)
+        if (!dateTime.isValid()) {
+          dateTime = dayjs(this.value, 'HH:mm:ss')
+        }
+        if (!dateTime.isValid()) {
+          dateTime = dayjs(`1999-01-01 ${this.value}`)
+        }
+        if (!dateTime.isValid()) {
+          return this.value
+        }
+        return dateTime.format('HH:mm:ss')
       },
       set(val) {
-        this.$emit('input', (new Date(val).toJSON() || '').slice(0, 10) || val)
+        console.log(val)
+        const dateTime = dayjs(`1999-01-01 ${val}:00`)
+        if (dateTime.isValid()) { this.$emit('input', dateTime.format('YYYY-MM-DD HH:mm:ssZ')) }
       }
+
     },
     parentListeners() {
       const $listeners = {}
@@ -54,7 +78,7 @@ export default {
 
 <style scoped>
 .value {
-  width:100%;
+  width: 100%;
   min-height: 20px;
 }
 </style>

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

@@ -1005,6 +1005,7 @@ export default {
             return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
           }
           this.$set(this.data[row], 'saving', true)
+
           // eslint-disable-next-line promise/param-names
           const newData = await this.api.update(id, {
             [column._cn]: rowObj[column._cn]

packages/nc-gui/components/templates/editor.vue

@@ -709,7 +709,6 @@ export default {
             return table
           })
         }
-        debugger
         this.$emit('update:projectTemplate', template)
       }
     }

packages/nc-gui/helpers/sqlUi/MssqlUi.js

@@ -1107,7 +1107,7 @@ export class MssqlUi {
         colProp.dt = 'varchar'
         break
       case 'DateTime':
-        colProp.dt = 'datetime'
+        colProp.dt = 'datetimeoffset'
         break
       case 'CreateTime':
         colProp.dt = 'datetime'
@@ -1294,9 +1294,9 @@ export class MssqlUi {
       case 'CreateTime':
       case 'LastModifiedTime':
         return [
-          'datetime',
+          'datetimeoffset',
-          'datetime2',
+          'datetime2'
-          'datetimeoffset'
+          // 'datetime'
         ]
 
       case 'AutoNumber':

packages/nc-gui/helpers/sqlUi/PgUi.js

@@ -1577,7 +1577,7 @@ export class PgUi {
         colProp.dt = 'character varying'
         break
       case 'Date':
-        colProp.dt = 'character varying'
+        colProp.dt = 'date'
 
         break
       case 'Year':

packages/nocodb/src/lib/dataMapper/lib/sql/CustomKnex.ts

@@ -1,5 +1,9 @@
 import Knex from 'knex';
 
+const types = require('pg').types;
+// override parsing date column to Date()
+types.setTypeParser(1082, val => val);
+
 import { BaseModelSql } from './BaseModelSql';
 
 const opMapping = {

packages/nocodb/src/lib/sqlUi/MssqlUi.ts

@@ -1145,7 +1145,7 @@ export class MssqlUi {
         colProp.dt = 'varchar';
         break;
       case 'DateTime':
-        colProp.dt = 'datetime';
+        colProp.dt = 'datetimeoffset';
         break;
       case 'CreateTime':
         colProp.dt = 'datetime';
@@ -1292,7 +1292,11 @@ export class MssqlUi {
       case 'DateTime':
       case 'CreateTime':
       case 'LastModifiedTime':
-        return ['datetime', 'datetime2', 'datetimeoffset'];
+        return [
+          'datetimeoffset',
+          'datetime2'
+          // 'datetime'
+        ];
 
       case 'AutoNumber':
         return ['int', 'bigint', 'smallint', 'tinyint'];

packages/nocodb/src/lib/sqlUi/PgUi.ts

@@ -1596,7 +1596,7 @@ export class PgUi {
         colProp.dt = 'character varying';
         break;
       case 'Date':
-        colProp.dt = 'character varying';
+        colProp.dt = 'date';
 
         break;
       case 'Year':