From a4f380e18759861fb23ae3280b0c4a517468789b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 19:14:56 +0530
Subject: [PATCH] refactor/gui v2 added Date column

---
 .../smartsheet-column/DateOptions.vue         | 25 +++++++++++++++++++
 .../smartsheet-column/EditOrAdd.vue           |  1 +
 packages/nc-gui-v2/utils/dateTimeUtils.ts     | 12 +++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
new file mode 100644
index 0000000000..d8f3b9143c
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { dateFormats } from '~/utils/dateTimeUtils'
+
+const { formState } = $(useColumnCreateStoreOrThrow())
+
+if (!formState.meta?.date_format) {
+  if (!formState.meta) formState.meta = {}
+  formState.meta.date_format = dateFormats[0]
+}
+</script>
+
+<template>
+  <a-form-item label="Date Format">
+    <a-select v-model:value="formState.meta.date_format" size="small">
+      <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
+        <div class="flex flex-row items-center">
+          <div class="text-xs">
+            {{ format }}
+          </div>
+        </div>
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 638d081e5f..4cd8369692 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -92,6 +92,7 @@ watchEffect(() => {
       <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
       <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
       <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
+      <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
 
       <div>
         <div
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 2becbb5bca..8184774d19 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -4,6 +4,18 @@ export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()
 }
 
+export const dateFormats = [
+  'DD-MM-YYYY',
+  'MM-DD-YYYY',
+  'YYYY-MM-DD',
+  'DD/MM/YYYY',
+  'MM/DD/YYYY',
+  'YYYY/MM/DD',
+  'DD MM YYYY',
+  'MM DD YYYY',
+  'YYYY MM DD',
+]
+
 export const handleTZ = (val: any) => {
   if (!val) {
     return