From e5c0c64e0156a090229c41cc7bfd4802e70a2bd1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 15:28:32 +0530
Subject: [PATCH 1/5] refactor/gui-v2-added-Date-Picker

---
 packages/nc-gui-v2/components.d.ts            |   3 +
 .../nc-gui-v2/components/cell/DatePicker.vue  | 106 +++++++-----------
 packages/nc-gui-v2/package-lock.json          |  74 ++++++++++--
 3 files changed, 107 insertions(+), 76 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 692c3f667c..72c980072e 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -15,6 +16,7 @@ declare module '@vue/runtime-core' {
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
@@ -51,6 +53,7 @@ declare module '@vue/runtime-core' {
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index d461974693..ade1685a94 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,91 +1,63 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { computed } from '#imports'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+import { ColumnInj, ReadonlyInj } from '~/context'
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+dayjs.extend(customParseFormat)
 
 interface Props {
   modelValue: string
 }
 
-const { modelValue } = defineProps<Props>()
+const columnMeta = inject(ColumnInj, null)
+const readOnlyMode = inject(ReadonlyInj, false)
 
-const emit = defineEmits(['update:modelValue'])
+let isDateInvalid = $ref(false)
+const dateFormat = columnMeta?.meta?.date_format ?? 'YYYY-MM-DD'
 
-const localState = computed({
+const localState = $computed({
   get() {
-    if (!modelValue || !dayjs(modelValue).isValid()) {
+    if (!modelValue) {
       return undefined
     }
 
-    return (/^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)).format('YYYY-MM-DD')
-  },
-  set(val?: string) {
-    if (dayjs(val).isValid()) {
-      emit('update:modelValue', val && dayjs(val).format('YYYY-MM-DD'))
+    if (!dayjs(modelValue).isValid()) {
+      isDateInvalid = true
+      return undefined
     }
-  },
-})
-
-/*
 
-export default {
-  name: 'DatePickerCell',
-  props: {
-    value: [String, Date],
+    return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
   },
-  computed: {
-    localState: {
-      get() {
-        if (!this.value || !dayjs(this.value).isValid()) {
-          return undefined
-        }
-
-        return (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)).format('YYYY-MM-DD')
-      },
-      set(val) {
-        if (dayjs(val).isValid()) {
-          this.$emit('input', val && dayjs(val).format('YYYY-MM-DD'))
-        }
-      },
-    },
-    date() {
-      if (!this.value || this.localState) {
-        return this.localState
-      }
-      return 'Invalid Date'
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
+  set(val?: dayjs.Dayjs) {
+    if (!val && !columnMeta?.rqd) {
+      emit('update:modelValue', null)
+      return
+    }
 
-      return $listeners
-    },
-  },
-  mounted() {
-    if (this.$el && this.$el.$el) {
-      this.$el.$el.focus()
+    if (val?.isValid()) {
+      emit('update:modelValue', val?.format('YYYY-MM-DD'))
     }
   },
-} */
+})
 </script>
 
 <template>
-  <!--  <v-menu> -->
-  <!--    <template #activator="{ on }"> -->
-  <input v-model="localState" type="date" class="value" />
-  <!--    </template> -->
-  <!--    <v-date-picker v-model="localState" flat @click.native.stop v-on="parentListeners" /> -->
-  <!--  </v-menu> -->
+  <a-date-picker
+    v-model:value="localState"
+    :bordered="false"
+    class="!w-full px-1"
+    :format="dateFormat"
+    :placeholder="isDateInvalid ? 'Invalid date' : '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>
-.value {
-  width: 100%;
-  min-height: 20px;
-}
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index c578963671..b80358c982 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -10478,14 +10478,15 @@
       }
     },
     "node_modules/@intlify/bundle-utils": {
-      "version": "2.2.2",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-3.1.0.tgz",
+      "integrity": "sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@intlify/message-compiler": "^9.1.0",
-        "@intlify/shared": "^9.1.0",
+        "@intlify/message-compiler": "next",
+        "@intlify/shared": "next",
         "jsonc-eslint-parser": "^1.0.1",
-        "source-map": "^0.6.1",
+        "source-map": "0.6.1",
         "yaml-eslint-parser": "^0.3.2"
       },
       "engines": {
@@ -10500,6 +10501,28 @@
         }
       }
     },
+    "node_modules/@intlify/bundle-utils/node_modules/@intlify/message-compiler": {
+      "version": "9.2.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.0-beta.40.tgz",
+      "integrity": "sha512-6QWTSYewmkew4nsRqgkwTVuGFKzxVCOK8EXsPt15N+tN1g+OYjC3PfGA2dPB6cVkNxqA9mV/hNK02uHPWU9t0A==",
+      "dev": true,
+      "dependencies": {
+        "@intlify/shared": "9.2.0-beta.40",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/bundle-utils/node_modules/@intlify/shared": {
+      "version": "9.2.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.0-beta.40.tgz",
+      "integrity": "sha512-xWz+SFjgt/LfaSbbHVn+V7gmvX4ZNP3cIFta790GWZ/tEgwJeC3tkV7i45iUbZ4ZimOerFgKH05b7qvJlKb6RQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@intlify/bundle-utils/node_modules/acorn": {
       "version": "7.4.1",
       "dev": true,
@@ -10686,6 +10709,15 @@
         }
       }
     },
+    "node_modules/@intlify/vite-plugin-vue-i18n/node_modules/@intlify/shared": {
+      "version": "9.2.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.0-beta.40.tgz",
+      "integrity": "sha512-xWz+SFjgt/LfaSbbHVn+V7gmvX4ZNP3cIFta790GWZ/tEgwJeC3tkV7i45iUbZ4ZimOerFgKH05b7qvJlKb6RQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@intlify/vite-plugin-vue-i18n/node_modules/source-map": {
       "version": "0.6.1",
       "dev": true,
@@ -23075,16 +23107,34 @@
       }
     },
     "@intlify/bundle-utils": {
-      "version": "2.2.2",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-3.1.0.tgz",
+      "integrity": "sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==",
       "dev": true,
       "requires": {
-        "@intlify/message-compiler": "^9.1.0",
-        "@intlify/shared": "^9.1.0",
+        "@intlify/message-compiler": "next",
+        "@intlify/shared": "next",
         "jsonc-eslint-parser": "^1.0.1",
-        "source-map": "^0.6.1",
+        "source-map": "0.6.1",
         "yaml-eslint-parser": "^0.3.2"
       },
       "dependencies": {
+        "@intlify/message-compiler": {
+          "version": "9.2.0-beta.40",
+          "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.0-beta.40.tgz",
+          "integrity": "sha512-6QWTSYewmkew4nsRqgkwTVuGFKzxVCOK8EXsPt15N+tN1g+OYjC3PfGA2dPB6cVkNxqA9mV/hNK02uHPWU9t0A==",
+          "dev": true,
+          "requires": {
+            "@intlify/shared": "9.2.0-beta.40",
+            "source-map": "0.6.1"
+          }
+        },
+        "@intlify/shared": {
+          "version": "9.2.0-beta.40",
+          "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.0-beta.40.tgz",
+          "integrity": "sha512-xWz+SFjgt/LfaSbbHVn+V7gmvX4ZNP3cIFta790GWZ/tEgwJeC3tkV7i45iUbZ4ZimOerFgKH05b7qvJlKb6RQ==",
+          "dev": true
+        },
         "acorn": {
           "version": "7.4.1",
           "dev": true
@@ -23195,6 +23245,12 @@
         "source-map": "0.6.1"
       },
       "dependencies": {
+        "@intlify/shared": {
+          "version": "9.2.0-beta.40",
+          "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.0-beta.40.tgz",
+          "integrity": "sha512-xWz+SFjgt/LfaSbbHVn+V7gmvX4ZNP3cIFta790GWZ/tEgwJeC3tkV7i45iUbZ4ZimOerFgKH05b7qvJlKb6RQ==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "dev": true

From 8dee48756b2f2d3569aa16c1052cb76ddded8153 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 15:40:43 +0530
Subject: [PATCH 2/5] chore/gui-v2-date-picker-cleanup

---
 packages/nc-gui-v2/components/cell/DatePicker.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index ade1685a94..d9e8ced082 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -33,11 +33,6 @@ const localState = $computed({
     return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
   },
   set(val?: dayjs.Dayjs) {
-    if (!val && !columnMeta?.rqd) {
-      emit('update:modelValue', null)
-      return
-    }
-
     if (val?.isValid()) {
       emit('update:modelValue', val?.format('YYYY-MM-DD'))
     }

From 2c5e19782f6d00a3afc6d8266707112515a007f1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 16:02:03 +0530
Subject: [PATCH 3/5] chore/gui-v2-date-picker-fixed-clearing-issue

---
 packages/nc-gui-v2/components/cell/DatePicker.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index d9e8ced082..4f95466be0 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -33,6 +33,11 @@ const localState = $computed({
     return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
   },
   set(val?: dayjs.Dayjs) {
+    if (!val) {
+      emit('update:modelValue', null)
+      return
+    }
+
     if (val?.isValid()) {
       emit('update:modelValue', val?.format('YYYY-MM-DD'))
     }

From c7ed98e9ba757ccc208388bc6310b3288e2fb067 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 16:10:26 +0530
Subject: [PATCH 4/5] 
 chore/gui-v2-date-picker-improved-placeholder-text-in-readonly-mode

---
 packages/nc-gui-v2/components/cell/DatePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 4f95466be0..fe28acbc81 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -51,7 +51,7 @@ const localState = $computed({
     :bordered="false"
     class="!w-full px-1"
     :format="dateFormat"
-    :placeholder="isDateInvalid ? 'Invalid date' : 'Select date'"
+    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
     :open="readOnlyMode ? false : undefined"

From 4923ef7a7b4440d59b06382c4a5b0a14d9e10f11 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 30 Jul 2022 17:35:52 +0530
Subject: [PATCH 5/5] chore/gui-v2-date-picker-minor-cleanup

---
 packages/nc-gui-v2/components/cell/DatePicker.vue | 7 ++-----
 packages/nc-gui-v2/utils/dateTimeUtils.ts         | 3 +++
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index fe28acbc81..b259bdfe3e 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-
 import { ColumnInj, ReadonlyInj } from '~/context'
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-dayjs.extend(customParseFormat)
-
 interface Props {
   modelValue: string
 }
@@ -38,7 +35,7 @@ const localState = $computed({
       return
     }
 
-    if (val?.isValid()) {
+    if (val.isValid()) {
       emit('update:modelValue', val?.format('YYYY-MM-DD'))
     }
   },
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index e545ee290c..5f66d396df 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -2,8 +2,11 @@ import dayjs from 'dayjs'
 
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
+dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()