kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(date): accept a null modelValue in DatepickerWithRange

This commit is contained in:
kolaente 2026-06-08 15:16:30 +02:00 committed by kolaente
parent 8839c296a2
commit e4b0a487fc
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/date/DatepickerWithRange.test.ts
View File

@ -36,4 +36,18 @@ describe('DatepickerWithRange predefined ranges', () => {
const last = wrapper.emitted('update:modelValue')?.pop()?.[0]
expect(last).toEqual({dateFrom: 'now/M-1M', dateTo: 'now/M'})
})
// A cleared range (the Custom option) comes back as null via v-model; the
// modelValue watcher must coerce it, not call null.toISOString().
it('accepts a null modelValue without crashing', async () => {
const wrapper = mountPicker()
await wrapper.setProps({modelValue: {dateFrom: 'now/w', dateTo: 'now/w+1w'}})
await wrapper.vm.$nextTick()
expect((wrapper.vm as any).from).toBe('now/w')
await wrapper.setProps({modelValue: {dateFrom: null, dateTo: null}})
await wrapper.vm.$nextTick()
expect((wrapper.vm as any).from).toBe('')
expect((wrapper.vm as any).to).toBe('')
})
})

13
frontend/src/components/date/DatepickerWithRange.vue
View File

@ -114,16 +114,17 @@ import DatemathHelp from '@/components/date/DatemathHelp.vue'
import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
const props = defineProps<{
// null for a side that's been cleared (the Custom option) — emitted, so accepted too.
modelValue: {
dateFrom: Date | string,
dateTo: Date | string,
dateFrom: Date | string | null,
dateTo: Date | string | null,
},
}>()
const emit = defineEmits<{
'update:modelValue': [value: {
dateFrom: Date | string,
dateTo: Date | string
dateFrom: Date | string | null,
dateTo: Date | string | null
}]
}>()
@ -149,8 +150,8 @@ const to = ref('')
watch(
() => props.modelValue,
newValue => {
from.value = typeof newValue.dateFrom === 'string' ? newValue.dateFrom : newValue.dateFrom.toISOString()
to.value = typeof newValue.dateTo === 'string' ? newValue.dateTo : newValue.dateTo.toISOString()
from.value = typeof newValue.dateFrom === 'string' ? newValue.dateFrom : (newValue.dateFrom?.toISOString() ?? '')
to.value = typeof newValue.dateTo === 'string' ? newValue.dateTo : (newValue.dateTo?.toISOString() ?? '')
// Only set the date back to flatpickr when it's an actual date.
// Otherwise flatpickr runs in an endless loop and slows down the browser.
const dateFrom = parseDateOrString(from.value, false)