github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): on blur save cell value of date related fields

pull/10004/head
Ramesh Mane 2 days ago
parent
62e1485143
commit
a67acccada
4 changed files with 164 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      packages/nc-gui/components/cell/DatePicker.vue
  2. 58
      packages/nc-gui/components/cell/DateTimePicker.vue
  3. 45
      packages/nc-gui/components/cell/TimePicker.vue
  4. 48
      packages/nc-gui/components/cell/YearPicker.vue

54
packages/nc-gui/components/cell/DatePicker.vue
Unescape View File

@ -68,23 +68,41 @@ const localState = computed({
set(val?: dayjs.Dayjs) {
isClearedInputMode.value = false
if (!val) {
emit('update:modelValue', null)
saveChanges(val)
open.value = false
},
})
const savingValue = ref()
function saveChanges(val?: dayjs.Dayjs, saveOnChange = true) {
if (!val) {
if (savingValue.value === val) {
return
}
if (picker.value === 'month') {
// reset day to 1st
val = dayjs(val).date(1)
}
savingValue.value = null
emit('update:modelValue', null)
return
}
if (picker.value === 'month') {
// reset day to 1st
val = dayjs(val).date(1)
}
if (val.isValid()) {
const formattedValue = val?.format('YYYY-MM-DD')
if (val.isValid()) {
emit('update:modelValue', val?.format('YYYY-MM-DD'))
if (savingValue.value === formattedValue) {
return
}
open.value = false
},
})
savingValue.value = formattedValue
emit('update:modelValue', formattedValue)
}
}
watchEffect(() => {
if (localState.value) {
@ -102,6 +120,12 @@ onClickOutside(datePickerRef, (e) => {
})
const onBlur = (e) => {
const value = (e?.target as HTMLInputElement)?.value
if (value && dayjs(value).isValid()) {
handleUpdateValue(e, true, dayjs(dayjs(value).format(dateFormat.value)))
}
if (
(e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`) ||
(e?.target as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`)
@ -263,8 +287,8 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
}
})
const handleUpdateValue = (e: Event) => {
const targetValue = (e.target as HTMLInputElement).value
const handleUpdateValue = (e: Event, save = false, valueToSave?: dayjs.Dayjs) => {
const targetValue = valueToSave || (e.target as HTMLInputElement).value
if (!targetValue) {
tempDate.value = undefined
return
@ -273,6 +297,10 @@ const handleUpdateValue = (e: Event) => {
if (value.isValid()) {
tempDate.value = value
if (save) {
saveChanges(value, false)
}
}
}

58
packages/nc-gui/components/cell/DateTimePicker.vue
Unescape View File

@ -121,20 +121,44 @@ const localState = computed({
},
set(val?: dayjs.Dayjs) {
isClearedInputMode.value = false
if (!val) {
emit('update:modelValue', null)
saveChanges(val)
},
})
const savingValue = ref()
function saveChanges(val?: dayjs.Dayjs, saveOnChange = false) {
if (!val) {
if (savingValue.value === null) {
return
}
if (val.isValid()) {
// setting localModelValue to cater NOW function in date picker
localModelValue = dayjs(val)
// send the payload in UTC format
emit('update:modelValue', dayjs(val).utc().format('YYYY-MM-DD HH:mm:ssZ'))
savingValue.value = null
emit('update:modelValue', null)
return
}
if (saveOnChange && localState.value?.isSame(val)) {
return
}
if (val.isValid()) {
// setting localModelValue to cater NOW function in date picker
localModelValue = dayjs(val)
// send the payload in UTC format
const formattedValue = dayjs(val).utc().format('YYYY-MM-DD HH:mm:ssZ')
if (savingValue.value === formattedValue) {
return
}
},
})
savingValue.value = formattedValue
emit('update:modelValue', formattedValue)
}
}
watchEffect(() => {
if (localState.value) {
@ -167,6 +191,10 @@ const onFocus = (_isDatePicker: boolean) => {
open.value = true
}
const onBlur = (e: Event, _isDatePicker: boolean) => {
handleUpdateValue(e, _isDatePicker, true)
}
watch(
open,
(next) => {
@ -324,7 +352,7 @@ watch(editable, (nextValue) => {
}
})
const handleUpdateValue = (e: Event, _isDatePicker: boolean) => {
const handleUpdateValue = (e: Event, _isDatePicker: boolean, save = false) => {
let targetValue = (e.target as HTMLInputElement).value
if (_isDatePicker) {
@ -341,6 +369,10 @@ const handleUpdateValue = (e: Event, _isDatePicker: boolean) => {
} else {
tempDate.value = date
}
if (save) {
saveChanges(tempDate.value, true)
}
}
}
@ -365,6 +397,10 @@ const handleUpdateValue = (e: Event, _isDatePicker: boolean) => {
if (parsedDate.isValid()) {
tempDate.value = dayjs(`${(tempDate.value ?? dayjs()).format('YYYY-MM-DD')} ${parsedDate.format(timeFormat.value)}`)
if (save) {
saveChanges(tempDate.value, true)
}
}
}
}
@ -460,6 +496,7 @@ const currentDate = ($event) => {
class="nc-date-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none outline-none ring-transparent)"
:readonly="!!isMobileMode || isColDisabled"
@focus="onFocus(true)"
@blur="onBlur($event, true)"
@keydown="handleKeydown($event, isOpen, true)"
@mouseup.stop
@mousedown.stop
@ -486,6 +523,7 @@ const currentDate = ($event) => {
class="nc-time-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none outline-none ring-transparent)"
:readonly="!!isMobileMode || isColDisabled"
@focus="onFocus(false)"
@blur="onBlur($event, false)"
@keydown="handleKeydown($event, open)"
@mouseup.stop
@mousedown.stop

45
packages/nc-gui/components/cell/TimePicker.vue
Unescape View File

@ -69,18 +69,39 @@ const localState = computed({
},
set(val?: dayjs.Dayjs) {
isClearedInputMode.value = false
if (!val) {
emit('update:modelValue', null)
saveChanges(val)
},
})
const savingValue = ref()
function saveChanges(val?: dayjs.Dayjs) {
if (!val) {
if (savingValue.value === val) {
return
}
if (val.isValid()) {
const time = val.format('HH:mm')
const date = dayjs(`1999-01-01 ${time}:00`)
emit('update:modelValue', date.format(dateFormat))
savingValue.value = null
emit('update:modelValue', null)
return
}
if (val.isValid()) {
const time = val.format('HH:mm')
const date = dayjs(`1999-01-01 ${time}:00`)
const formattedValue = date.format(dateFormat)
if (savingValue.value === formattedValue) {
return
}
},
})
savingValue.value = formattedValue
emit('update:modelValue', date.format(dateFormat))
}
}
watchEffect(() => {
if (localState.value) {
@ -97,6 +118,8 @@ onClickOutside(datePickerRef, (e) => {
})
const onBlur = (e) => {
handleUpdateValue(e, true)
if (
(e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`) ||
(e?.target as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`)
@ -246,7 +269,7 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
}
})
const handleUpdateValue = (e: Event) => {
const handleUpdateValue = (e: Event, save = false) => {
let targetValue = (e.target as HTMLInputElement).value
if (!targetValue) {
@ -266,6 +289,10 @@ const handleUpdateValue = (e: Event) => {
if (parsedDate.isValid()) {
tempDate.value = dayjs(`${dayjs().format('YYYY-MM-DD')} ${parsedDate.format('HH:mm')}`)
if (save) {
saveChanges(tempDate.value)
}
}
}

48
packages/nc-gui/components/cell/YearPicker.vue
Unescape View File

@ -60,18 +60,38 @@ const localState = computed({
set(val?: dayjs.Dayjs) {
isClearedInputMode.value = false
if (!val) {
emit('update:modelValue', null)
saveChanges(val)
open.value = false
},
})
const savingValue = ref()
function saveChanges(val?: dayjs.Dayjs) {
if (!val) {
if (savingValue.value === val) {
return
}
if (val?.isValid()) {
emit('update:modelValue', val.format('YYYY'))
savingValue.value = null
emit('update:modelValue', null)
return
}
if (val?.isValid()) {
const formattedValue = val.format('YYYY')
if (savingValue.value === formattedValue) {
return
}
open.value = false
},
})
savingValue.value = formattedValue
emit('update:modelValue', val.format('YYYY'))
}
}
watchEffect(() => {
if (localState.value) {
@ -88,6 +108,12 @@ onClickOutside(datePickerRef, (e) => {
})
const onBlur = (e) => {
const value = (e?.target as HTMLInputElement)?.value
if (value && dayjs(value, 'YYYY').isValid()) {
handleUpdateValue(e, true, dayjs(dayjs(value).format('YYYY')))
}
if (
(e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`) ||
(e?.target as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`)
@ -227,8 +253,8 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
}
})
const handleUpdateValue = (e: Event) => {
const targetValue = (e.target as HTMLInputElement).value
const handleUpdateValue = (e: Event, save = false, valueToSave?: dayjs.Dayjs) => {
const targetValue = valueToSave || (e.target as HTMLInputElement).value
if (!targetValue) {
tempDate.value = undefined
return
@ -237,6 +263,10 @@ const handleUpdateValue = (e: Event) => {
if (value.isValid()) {
tempDate.value = value
if (save) {
saveChanges(value)
}
}
}

Write Preview
Loading…
Cancel
Save