mirror of https://github.com/nocodb/nocodb
Browse Source
* feat(nc-gui): new date picker setup * feat(nc-gui): new date picker * fix(nc-gui): date cell form view validation issue * fix(nc-gui): disable date cell type support in mobile view * fix(nc-gui): small changes * feat(nc-gui): new cell year and month picker * fix(nc-gui): add updated date time picker setup * feat: update date time cell picker * fix(nc-gui): add now option in time picker * fix(nc-gui): small changes * fix(nc-gui): add support to update month, year from date picker * fix(nc-gui): update date picker select mont/year flow * fix(test): date selector test case * fix(nc-gui): update dateTime cell time picker * fix(test): update time picker test case * chore(nc-gui): lint * fix(nc-gui): invalid date issue * fix(nc-gui): date time picker tab issue * fix(nc-gui): year cell test fail issue * fix(nc-gui): date picker filter test fail issue * fix(test): survey form test fail issue * fix(test): update year field fill handler test case * fix(test): update bulk update test * fix(nc-gui): datetime multiple api call issue * fix(test): update timezone related test * fix(test): timezone related test update * fix(nc-gui): tab focus issue * fix(test): filter datetime test udpate * fix(test): ai review changes * fix(nc-gui): date picker font weight issue * fix(nc-gui): update year picker font weight * fix(nc-gui): show full date from date time cell instead of truncate * fix(nc-gui): date time picker ui changes * fix(nc-gui): date time cell width issue * fix(nc-gui): update datetime time option width according to time format * fix(nc-gui): disable datetime input if cell is readonly * fic(nc-gui): add new time picker * feat(nc-gui): update time picker * chore(nc-gui): cleanup unwanted code * fix(test): update time cell test cases * fix(nc-gui): multiple api calls * fix(test): update time cell filter & bulk update test cases * fix(test): revert unrelated changes * fix(nc-gui): pr review changes * fix(nc-gui): add clear datetime cell icon in non grid viewpull/8559/head
Ramesh Mane
4 months ago
committed by
GitHub
21 changed files with 1194 additions and 282 deletions
@ -0,0 +1,150 @@
|
||||
<script lang="ts" setup> |
||||
import dayjs from 'dayjs' |
||||
|
||||
interface Props { |
||||
size?: 'medium' |
||||
selectedDate?: dayjs.Dayjs | null |
||||
pageDate?: dayjs.Dayjs |
||||
isCellInputField?: boolean |
||||
type: 'date' | 'time' | 'year' | 'month' |
||||
isOpen: boolean |
||||
} |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
size: 'medium', |
||||
selectedDate: null, |
||||
pageDate: () => dayjs(), |
||||
isCellInputField: false, |
||||
type: 'date', |
||||
isOpen: false, |
||||
}) |
||||
const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek']) |
||||
// Page date is the date we use to manage which month/date that is currently being displayed |
||||
const pageDate = useVModel(props, 'pageDate', emit) |
||||
|
||||
const selectedDate = useVModel(props, 'selectedDate', emit) |
||||
|
||||
const { type, isOpen } = toRefs(props) |
||||
|
||||
const localPageDate = ref() |
||||
|
||||
const localSelectedDate = ref() |
||||
|
||||
const pickerType = ref<Props['type'] | undefined>() |
||||
|
||||
const pickerStack = ref<Props['type'][]>([]) |
||||
|
||||
const tempPickerType = computed(() => pickerType.value || type.value) |
||||
|
||||
const handleUpdatePickerType = (value?: Props['type']) => { |
||||
if (value) { |
||||
pickerType.value = value |
||||
pickerStack.value.push(value) |
||||
} else { |
||||
if (pickerStack.value.length > 1) { |
||||
pickerStack.value.pop() |
||||
const lastPicker = pickerStack.value.pop() |
||||
pickerType.value = lastPicker |
||||
} else { |
||||
pickerStack.value = [] |
||||
pickerType.value = type.value |
||||
} |
||||
} |
||||
} |
||||
|
||||
const localStatePageDate = computed({ |
||||
get: () => { |
||||
if (localPageDate.value) { |
||||
return localPageDate.value |
||||
} |
||||
return pageDate.value |
||||
}, |
||||
set: (value) => { |
||||
pageDate.value = value |
||||
localPageDate.value = value |
||||
emit('update:pageDate', value) |
||||
}, |
||||
}) |
||||
|
||||
const localStateSelectedDate = computed({ |
||||
get: () => { |
||||
if (localSelectedDate.value) { |
||||
return localSelectedDate.value |
||||
} |
||||
return pageDate.value |
||||
}, |
||||
set: (value: dayjs.Dayjs) => { |
||||
if (!value.isValid()) return |
||||
|
||||
if (pickerType.value === type.value) { |
||||
localPageDate.value = value |
||||
emit('update:selectedDate', value) |
||||
localSelectedDate.value = undefined |
||||
return |
||||
} |
||||
|
||||
if (['date', 'month'].includes(type.value)) { |
||||
if (pickerType.value === 'year') { |
||||
localSelectedDate.value = dayjs(localPageDate.value ?? localSelectedDate.value ?? selectedDate.value ?? dayjs()).year( |
||||
+value.format('YYYY'), |
||||
) |
||||
} |
||||
if (type.value !== 'month' && pickerType.value === 'month') { |
||||
localSelectedDate.value = dayjs(localPageDate.value ?? localSelectedDate.value ?? selectedDate.value ?? dayjs()).month( |
||||
+value.format('MM') - 1, |
||||
) |
||||
} |
||||
|
||||
localPageDate.value = localSelectedDate.value |
||||
|
||||
handleUpdatePickerType() |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
watch(isOpen, (next) => { |
||||
if (!next) { |
||||
pickerType.value = type.value |
||||
localPageDate.value = undefined |
||||
localSelectedDate.value = undefined |
||||
pickerStack.value = [] |
||||
} |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
pickerType.value = type.value |
||||
localPageDate.value = undefined |
||||
localSelectedDate.value = undefined |
||||
pickerStack.value = [] |
||||
}) |
||||
onMounted(() => { |
||||
localPageDate.value = undefined |
||||
localSelectedDate.value = undefined |
||||
pickerStack.value = [] |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDateWeekSelector |
||||
v-if="tempPickerType === 'date'" |
||||
v-model:page-date="localStatePageDate" |
||||
v-model:selected-date="localStateSelectedDate" |
||||
:picker-type="pickerType" |
||||
:is-monday-first="false" |
||||
is-cell-input-field |
||||
size="medium" |
||||
@update:picker-type="handleUpdatePickerType" |
||||
/> |
||||
<NcMonthYearSelector |
||||
v-if="['month', 'year'].includes(tempPickerType)" |
||||
v-model:page-date="localStatePageDate" |
||||
v-model:selected-date="localStateSelectedDate" |
||||
:picker-type="pickerType" |
||||
:is-year-picker="tempPickerType === 'year'" |
||||
is-cell-input-field |
||||
size="medium" |
||||
@update:picker-type="handleUpdatePickerType" |
||||
/> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,104 @@
|
||||
<script lang="ts" setup> |
||||
import dayjs from 'dayjs' |
||||
|
||||
interface Props { |
||||
selectedDate: dayjs.Dayjs | null |
||||
is12hrFormat?: boolean |
||||
isMinGranularityPicker?: boolean |
||||
minGranularity?: number |
||||
isOpen?: boolean |
||||
} |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
selectedDate: null, |
||||
is12hrFormat: false, |
||||
isMinGranularityPicker: false, |
||||
minGranularity: 30, |
||||
isOpen: false, |
||||
}) |
||||
const emit = defineEmits(['update:selectedDate']) |
||||
|
||||
const pageDate = ref<dayjs.Dayjs>(dayjs()) |
||||
|
||||
const selectedDate = useVModel(props, 'selectedDate', emit) |
||||
|
||||
const { is12hrFormat, isMinGranularityPicker, minGranularity, isOpen } = toRefs(props) |
||||
|
||||
const timeOptionsWrapperRef = ref<HTMLDivElement>() |
||||
|
||||
const compareTime = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => { |
||||
if (!date1 || !date2) return false |
||||
|
||||
return date1.format('HH:mm') === date2.format('HH:mm') |
||||
} |
||||
|
||||
const handleSelectTime = (time: dayjs.Dayjs) => { |
||||
pageDate.value = dayjs().set('hour', time.get('hour')).set('minute', time.get('minute')) |
||||
|
||||
selectedDate.value = pageDate.value |
||||
|
||||
// emit('update:selectedDate', pageDate.value) |
||||
} |
||||
|
||||
// TODO: 12hr time format & regular time picker |
||||
const timeOptions = computed(() => { |
||||
return Array.from({ length: is12hrFormat.value ? 12 : 24 }).flatMap((_, h) => { |
||||
return (isMinGranularityPicker.value ? [0, minGranularity.value] : Array.from({ length: 60 })).map((_m, m) => { |
||||
const time = dayjs() |
||||
.set('hour', h) |
||||
.set('minute', isMinGranularityPicker.value ? (_m as number) : m) |
||||
|
||||
return time |
||||
}) |
||||
}) |
||||
}) |
||||
|
||||
const handleAutoScroll = (behavior: ScrollBehavior = 'instant') => { |
||||
if (!timeOptionsWrapperRef.value || !selectedDate.value) return |
||||
|
||||
setTimeout(() => { |
||||
const timeEl = timeOptionsWrapperRef.value?.querySelector( |
||||
`[data-testid="time-option-${selectedDate.value?.format('HH:mm')}"]`, |
||||
) |
||||
|
||||
timeEl?.scrollIntoView({ behavior, block: 'center' }) |
||||
}, 50) |
||||
} |
||||
|
||||
watch([selectedDate, isOpen], () => { |
||||
if (timeOptionsWrapperRef.value && isOpen.value && selectedDate.value) { |
||||
handleAutoScroll() |
||||
} |
||||
}) |
||||
|
||||
onMounted(() => { |
||||
handleAutoScroll() |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="flex flex-col max-w-[350px]"> |
||||
<div v-if="isMinGranularityPicker" ref="timeOptionsWrapperRef" class="h-[180px] overflow-y-auto nc-scrollbar-thin"> |
||||
<div |
||||
v-for="time of timeOptions" |
||||
:key="time.format('HH:mm')" |
||||
class="hover:bg-gray-100 py-1 px-3 text-sm text-gray-600 font-weight-500 text-center cursor-pointer" |
||||
:class="{ |
||||
'nc-selected bg-gray-100': selectedDate && compareTime(time, selectedDate), |
||||
}" |
||||
:data-testid="`time-option-${time.format('HH:mm')}`" |
||||
@click="handleSelectTime(time)" |
||||
> |
||||
{{ time.format('HH:mm') }} |
||||
</div> |
||||
</div> |
||||
<div v-else></div> |
||||
<div class="px-2 py-1 box-border flex items-center justify-center"> |
||||
<NcButton :tabindex="-1" class="!h-7" size="small" type="secondary" @click="handleSelectTime(dayjs())"> |
||||
<span class="text-small"> {{ $t('general.now') }} </span> |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue