fix: handling database and browser timezone

re #483 Signed-off-by: Pranav C <pranavxc@gmail.com>
3 years ago · c50435c0b4
11 changed files with 78 additions and 42 deletions
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/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>
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/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) {
+          if (this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime || this.isDateTime || this.isDate) {
            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')
      }
    }
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/dateTimePickerCell.vue
@ -1,20 +1,22 @@
 <template>
-  <v-datetime-picker
-    ref="picker"
-    v-model="localState"
-    class="caption xc-date-time-picker"
-    :text-field-props="{
-      class:'caption mt-0 pt-0',
-      flat:true,
-      solo:true,
-      dense:true,
-      hideDetails:true
-    }"
-    :time-picker-props="{
-      format:'24hr'
-    }"
-    v-on="parentListeners"
-  />
+  <div>
+    <v-datetime-picker
+      ref="picker"
+      v-model="localState"
+      class="caption xc-date-time-picker"
+      :text-field-props="{
+        class:'caption mt-0 pt-0',
+        flat:true,
+        solo:true,
+        dense:true,
+        hideDetails:true
+      }"
+      :time-picker-props="{
+        format:'24hr'
+      }"
+      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
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/timePickerCell.vue
+++ b/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>
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/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]
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/editor.vue
@ -709,7 +709,6 @@ export default {
            return table
          })
        }
-        debugger
        this.$emit('update:projectTemplate', template)
      }
    }
--- a/packages/nc-gui/helpers/sqlUi/MssqlUi.js
+++ b/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',
-          'datetime2',
-          'datetimeoffset'
+          'datetimeoffset',
+          'datetime2'
+          // 'datetime'
        ]

      case 'AutoNumber':
--- a/packages/nc-gui/helpers/sqlUi/PgUi.js
+++ b/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':
--- a/packages/nocodb/src/lib/dataMapper/lib/sql/CustomKnex.ts
+++ b/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 = {
--- a/packages/nocodb/src/lib/sqlUi/MssqlUi.ts
+++ b/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'];
--- a/packages/nocodb/src/lib/sqlUi/PgUi.ts
+++ b/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':