Browse Source

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

re #416

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/460/head
Pranav C 3 years ago
parent
commit
74671ac8e7
  1. 8
      packages/nc-gui/components/project/spreadsheet/components/cell.vue
  2. 19
      packages/nc-gui/components/project/spreadsheet/components/cell/dateCell.vue
  3. 23
      packages/nc-gui/components/project/spreadsheet/components/cell/dateTimeCell.vue
  4. 19
      packages/nc-gui/components/project/spreadsheet/components/cell/timeCell.vue
  5. 4
      packages/nc-gui/components/project/spreadsheet/mixins/cell.js

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

19
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>

23
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>

19
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>

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

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

Loading…
Cancel
Save