feat: Add cell component for Date, Datetime, and Time

re #416

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

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

@@ -12,6 +12,9 @@
   <enum-cell v-else-if="isEnum" :value="value" :column="column" @click.stop="$emit('enableedit')" />
   <url-cell v-else-if="isURL" :value="value" />
   <json-cell v-else-if="isJSON" :value="value" />
+  <date-cell v-else-if="isDate" :value="value" />
+  <date-time-cell v-else-if="isDateTime" :value="value" />
+  <time-cell v-else-if="isTime" :value="value" />
   <span v-else :class="{'long-text-cell' : isTextArea}">{{ value }}</span>
 </template>
 
@@ -22,10 +25,13 @@ import cell from '@/components/project/spreadsheet/mixins/cell'
 import SetListCell from '@/components/project/spreadsheet/components/cell/setListCell'
 import EnumCell from '@/components/project/spreadsheet/components/cell/enumCell'
 import EditableAttachmentCell from '@/components/project/spreadsheet/components/editableCell/editableAttachmentCell'
+import DateCell from './cell/dateCell'
+import DateTimeCell from './cell/timeCell'
+import TimeCell from './cell/timeCell'
 
 export default {
   name: 'TableCell',
-  components: { JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell },
+  components: { TimeCell, DateTimeCell, DateCell, JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell },
   mixins: [cell],
   props: ['value', 'dbAlias', 'isLocked', 'selected'],
   computed: {}

packages/nc-gui/components/project/spreadsheet/components/cell/dateCell.vue

@@ -0,0 +1,19 @@
+<template>
+  <span>{{ date }}</span>
+</template>
+
+<script>
+export default {
+  name: 'DateCell',
+  props: ['value'],
+  computed: {
+    date() {
+      return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ').replace(/\s\d{2}:\d{2}:[\d:.]+z?$/i, '') : (this.value && new Date(this.value))
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/components/project/spreadsheet/components/cell/dateTimeCell.vue

@@ -0,0 +1,23 @@
+<template>
+  <span>{{ dateTime }}</span>
+</template>
+
+<script>
+export default {
+  name: 'DateTimeCell',
+  props: ['value'],
+  computed: {
+    dateTime() {
+      if (/^\d{6,}$/.test(this.value)) {
+        return new Date(+this.value)
+      }
+
+      return /\dT\d/.test(this.value) ? new Date(this.value.replace(/(\d)T(?=\d)/, '$1 ')) : ((this.value && new Date(this.value)))
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/components/project/spreadsheet/components/cell/timeCell.vue

@@ -0,0 +1,19 @@
+<template>
+  <span>{{ time }}</span>
+</template>
+
+<script>
+export default {
+  name: 'TimeCell',
+  props: ['value'],
+  computed: {
+    time() {
+      return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ') : this.value
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/components/project/spreadsheet/mixins/cell.js

@@ -38,10 +38,10 @@ export default {
       return this.abstractType === 'date' || this.column.uidt === 'Date'
     },
     isTime() {
-      return this.abstractType === 'time'
+      return this.abstractType === 'time' || this.column.uidt === 'Time'
     },
     isDateTime() {
-      return this.abstractType === 'datetime'
+      return this.abstractType === 'datetime' || this.column.uidt === 'DateTime'
     },
     isJSON() {
       return this.abstractType === 'json' || this.column.uidt === 'JSON'