Browse Source

Merge pull request #2890 from nocodb/refactor/gui-v2-year-selector

refactor(gui-v2): Added YearPicker
pull/2908/head
navi 2 years ago committed by GitHub
parent
commit
99735fb560
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 59
      packages/nc-gui-v2/components/cell/YearPicker.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  3. 2
      packages/nc-gui-v2/composables/useColumn.ts

59
packages/nc-gui-v2/components/cell/YearPicker.vue

@ -0,0 +1,59 @@
<script setup lang="ts">
import dayjs from 'dayjs'
import { ReadonlyInj } from '~/context'
const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
interface Props {
modelValue: number
}
const readOnlyMode = inject(ReadonlyInj, false)
let isYearInvalid = $ref(false)
const localState = $computed({
get() {
if (!modelValue) {
return undefined
}
const yearDate = dayjs(modelValue.toString(), 'YYYY')
if (!yearDate.isValid()) {
isYearInvalid = true
return undefined
}
return yearDate
},
set(val?: dayjs.Dayjs) {
if (!val) {
emit('update:modelValue', null)
return
}
if (val?.isValid()) {
emit('update:modelValue', Number(val.format('YYYY')))
}
},
})
</script>
<template>
<a-date-picker
v-model:value="localState"
picker="year"
:bordered="false"
class="!w-full px-1"
:placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
:allow-clear="!readOnlyMode"
:input-read-only="true"
:open="readOnlyMode ? false : undefined"
>
<template v-if="readOnlyMode" #suffixIcon></template>
</a-date-picker>
</template>
<style scoped></style>

2
packages/nc-gui-v2/components/smartsheet/Cell.vue

@ -32,6 +32,7 @@ const {
isEmail, isEmail,
isJSON, isJSON,
isDate, isDate,
isYear,
isDateTime, isDateTime,
isTime, isTime,
isBoolean, isBoolean,
@ -175,6 +176,7 @@ todo :
<CellSingleSelect v-else-if="isSingleSelect" v-model="localState" /> <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
<CellMultiSelect v-else-if="isMultiSelect" v-model="localState" /> <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
<CellDatePicker v-else-if="isDate" v-model="localState" /> <CellDatePicker v-else-if="isDate" v-model="localState" />
<CellYearPicker v-else-if="isYear" v-model="localState" />
<CellDateTimePicker v-else-if="isDateTime" v-model="localState" /> <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
<CellDateTimePicker v-else-if="isTime" v-model="localState" /> <CellDateTimePicker v-else-if="isTime" v-model="localState" />
<CellRating v-else-if="isRating" v-model="localState" /> <CellRating v-else-if="isRating" v-model="localState" />

2
packages/nc-gui-v2/composables/useColumn.ts

@ -17,6 +17,7 @@ export default (column: ColumnType) => {
const isInt = abstractType === 'integer' const isInt = abstractType === 'integer'
const isFloat = abstractType === 'float' const isFloat = abstractType === 'float'
const isDate = abstractType === 'date' || uiDatatype === 'Date' const isDate = abstractType === 'date' || uiDatatype === 'Date'
const isYear = abstractType === 'year' || uiDatatype === 'Year'
const isTime = abstractType === 'time' || uiDatatype === 'Time' const isTime = abstractType === 'time' || uiDatatype === 'Time'
const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime' const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime'
const isJSON = uiDatatype === 'JSON' const isJSON = uiDatatype === 'JSON'
@ -55,6 +56,7 @@ export default (column: ColumnType) => {
isInt, isInt,
isFloat, isFloat,
isDate, isDate,
isYear,
isTime, isTime,
isDateTime, isDateTime,
isJSON, isJSON,

Loading…
Cancel
Save