Merge pull request #2899 from nocodb/refactor/gui-v2-date-time-cell

refactor(gui-v2): Added DateTime Picker

packages/nc-gui-v2/components/cell/DateTimePicker.vue

@@ -1,146 +1,62 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { computed, ref, useProject } from '#imports'
-
-interface Props {
-  modelValue?: string
-}
+import { ReadonlyInj } from '~/context'
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const { isMysql } = useProject()
-const showMessage = ref(false)
-
-const localState = computed({
-  get() {
-    if (!modelValue) {
-      return modelValue
-    }
-    const d = /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
-    if (d.isValid()) {
-      showMessage.value = false
-      return d.format('YYYY-MM-DD HH:mm')
-    } else {
-      showMessage.value = true
-    }
-  },
-  set(value?: string) {
-    if (isMysql) {
-      emit('update:modelValue', value && dayjs(value).format('YYYY-MM-DD HH:mm:ss'))
-    } else {
-      emit('update:modelValue', value && dayjs(value).format('YYYY-MM-DD HH:mm:ssZ'))
+interface Props {
+  modelValue: string
 }
-  },
-})
 
-/* import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
+const { isMysql } = useProject()
+
+const readOnlyMode = inject(ReadonlyInj, false)
 
-dayjs.extend(utc)
+let isDateInvalid = $ref(false)
+const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
-export default {
-  name: 'DateTimePickerCell',
-  props: {
-    value: [String, Date, Number],
-    ignoreFocus: Boolean,
-  },
-  data: () => ({
-    showMessage: false,
-  }),
-  computed: {
-    isMysql() {
-      return ['mysql', 'mysql2'].indexOf(this.$store.getters['project/GtrClientType'])
-    },
-    localState: {
+const localState = $computed({
   get() {
-        if (!this.value) {
-          return this.value
-        }
-        const d = /^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)
-        if (d.isValid()) {
-          this.showMessage = false
-          return d.format('YYYY-MM-DD HH:mm')
-        } else {
-          this.showMessage = true
-        }
-      },
-      set(value) {
-        if (this.isMysql) {
-          this.$emit('input', value && dayjs(value).format('YYYY-MM-DD HH:mm:ss'))
-        } else {
-          this.$emit('input', value && dayjs(value).format('YYYY-MM-DD HH:mm:ssZ'))
+    if (!modelValue) {
+      return undefined
     }
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
 
-      if (this.$listeners.blur) {
-        // $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
+    if (!dayjs(modelValue).isValid()) {
+      isDateInvalid = true
+      return undefined
     }
 
-      return $listeners
-    },
+    return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
   },
-  mounted() {
-    // listen dialog click:outside event and save on close
-    if (this.$refs.picker && this.$refs.picker.$children && this.$refs.picker.$children[0]) {
-      this.$refs.picker.$children[0].$on('click:outside', () => {
-        this.$refs.picker.okHandler()
-      })
+  set(val?: dayjs.Dayjs) {
+    if (!val) {
+      emit('update:modelValue', null)
+      return
     }
 
-    if (!this.ignoreFocus) {
-      this.$refs.picker.display = true
+    if (val.isValid()) {
+      emit('update:modelValue', val?.format(dateFormat))
     }
   },
-} */
+})
 </script>
 
 <template>
-  <input v-model="localState" type="datetime-local" />
-  <!--  <div> -->
-  <!--    <div v-show="!showMessage"> -->
-  <!--      <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> -->
-  <!--    <div v-show="showMessage" class="edit-warning" @dblclick="$refs.picker.display = true"> -->
-  <!--      &lt;!&ndash; TODO: i18n &ndash;&gt; -->
-  <!--      ERR: Couldn't parse {{ value }} -->
-  <!--    </div> -->
-  <!--  </div> -->
+  <a-date-picker
+    v-model:value="localState"
+    :show-time="true"
+    :bordered="false"
+    class="!w-full px-1"
+    format="YYYY-MM-DD HH:mm"
+    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
+    :allow-clear="!readOnlyMode"
+    :input-read-only="true"
+    :open="readOnlyMode ? false : undefined"
+  >
+    <template v-if="readOnlyMode" #suffixIcon></template>
+  </a-date-picker>
 </template>
 
-<style scoped>
-/*:deep(.v-input),*/
-/*:deep(.v-text-field) {*/
-/*  margin-top: 0 !important;*/
-/*  padding-top: 0 !important;*/
-/*  font-size: inherit !important;*/
-/*}*/
-
-/*.edit-warning {*/
-/*  padding: 10px;*/
-/*  text-align: left;*/
-/*  color: #e65100;*/
-/*}*/
-</style>
+<style scoped></style>

packages/nc-gui-v2/utils/dateTimeUtils.ts

@@ -1,6 +1,8 @@
 import dayjs from 'dayjs'
 
 import relativeTime from 'dayjs/plugin/relativeTime'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
 import utc from 'dayjs/plugin/utc'
 import customParseFormat from 'dayjs/plugin/customParseFormat'