vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: add date math for filters #1342

Merged
konrad merged 88 commits from feature/date-math into main 2022-03-28 17:30:43 +00:00
Conversation 2 Commits 88 Files Changed 18 +45 -25
1 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1e46849c78 - Show all commits

64
src/components/date/datepickerWithRange.vue
View File

@ -15,10 +15,10 @@
v-for="(value, text) in dateRanges"
:key="text"
@click="setDateRange(value)"
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:11:05 +00:00
Outdated
Review
Copy Link

Use BaseButton

Use BaseButton
konrad commented 2022-02-06 17:52:08 +00:00
Outdated
Review
Copy Link

Done.

Done.
:class="{'is-active': dateRange === value}">
:class="{'is-active': from === value[0] && to === value[1]}">
{{ $t(text) }}
</button>
<button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
<button @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
{{ $t('misc.custom') }}
</button>
</div>
@ -27,7 +27,7 @@
{{ $t('input.datepickerRange.from') }}
<div class="field has-addons">
<div class="control is-fullwidth">
<input class="input" type="text"/>
<input class="input" type="text" v-model="from" @change="emitChanged"/>
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:12:57 +00:00
Outdated
Review
Copy Link

Instead of calling inputChanged from here better watch the from and below the to value.
This prevents future mistakes

Instead of calling `inputChanged` from here better watch the `from` and below the `to` value. This prevents future mistakes
konrad commented 2022-02-06 17:57:10 +00:00
Outdated
Review
Copy Link

Changed. I kept inputChanged though because I need to watchers.

Changed. I kept `inputChanged` though because I need to watchers.
</div>
<div class="control">
<x-button icon="calendar" variant="secondary" data-toggle/>
@ -38,7 +38,7 @@
{{ $t('input.datepickerRange.to') }}
<div class="field has-addons">
<div class="control is-fullwidth">
<input class="input" type="text"/>
<input class="input" type="text" v-model="to" @change="emitChanged"/>
</div>
<div class="control">
<x-button icon="calendar" variant="secondary" data-toggle/>
@ -47,7 +47,7 @@
</label>
<flat-pickr
:config="flatPickerConfig"
v-model="dateRange"
v-model="flatpickrRange"
/>
</div>
</div>
@ -83,10 +83,20 @@ const flatPickerConfig = computed(() => ({
},
}))
const dateRange = ref('')
const flatpickrRange = ref('')
const from = ref('')
const to = ref('')
function emitChanged() {
emit('dateChanged', {
dateFrom: from.value,
dateTo: to.value,
})
}
watch(
() => dateRange.value,
() => flatpickrRange.value,
(newVal: string | null) => {
if (newVal === null) {
return
@ -98,30 +108,40 @@ watch(
return
}
emit('dateChanged', {
dateFrom: fromDate,
dateTo: toDate,
})
from.value = fromDate
to.value = toDate
emitChanged()
},
)
function setDateRange(range: string) {
dateRange.value = range
function setDateRange(range: string[] | null) {
if (range === null) {
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 21:52:41 +00:00
Outdated
Review
Copy Link

Why do we need to reset this every time?

Why do we need to reset this every time?
konrad commented 2022-02-06 22:11:26 +00:00
Outdated
Review
Copy Link

I don't think we have to. I've checked and it looks like this doesn't really break anything so I've removed it. Lets us get rid of inputChanged.

I don't think we have to. I've checked and it looks like this doesn't really break anything so I've removed it. Lets us get rid of `inputChanged`.
from.value = ''
dpschen commented 2022-02-06 21:55:18 +00:00
Outdated
Review
Copy Link

Called here!

Called here!
to.value = ''
emitChanged()
return
}
from.value = range[0]
to.value = range[1]
emitChanged()
}
const dateRanges = {
// Still using strings for the range instead of an array or object to keep it compatible with the dates from flatpickr
'task.show.today': 'now/d to now/d+1d',
'task.show.thisWeek': 'now/w to now/w+1w',
'task.show.nextWeek': 'now/w+1w to now/w+2w',
'task.show.next7Days': 'now to now+7d',
'task.show.thisMonth': 'now/M to now/M+1M',
'task.show.nextMonth': 'now/M+1M to now/M+2M',
'task.show.next30Days': 'now to now+30d',
'task.show.today': ['now/d', 'now/d+1d'],
'task.show.thisWeek': ['now/w', 'now/w+1w'],
'task.show.nextWeek': ['now/w+1w', 'now/w+2w'],
'task.show.next7Days': ['now', 'now+7d'],
'task.show.thisMonth': ['now/M', 'now/M+1M'],
'task.show.nextMonth': ['now/M+1M', 'now/M+2M'],
dpschen commented 2022-02-06 21:55:58 +00:00
Outdated
Review
Copy Link

This is triggered three times!

Once for each of these lines:

from.value = fromDate
to.value = toDate

in the called function inputChanged of the watcher.
And then here again.

This is triggered three times! Once for each of these lines: ```js from.value = fromDate to.value = toDate ``` in the called function inputChanged of the watcher. And then here again.
konrad commented 2022-02-06 22:14:30 +00:00
Outdated
Review
Copy Link

mhh how can we fix this? Using a debounce to prevent it getting called three times if it changed all values at once? Or removing the watchers again?

It looks like the tasks are only loaded once, not three times. Maybe that's already enough?

mhh how can we fix this? Using a debounce to prevent it getting called three times if it changed all values at once? Or removing the watchers again? It looks like the tasks are only loaded once, not three times. Maybe that's already enough?
'task.show.next30Days': ['now', 'now+30d'],
}
const customRangeActive = computed<Boolean>(() => {
return !Object.values(dateRanges).includes(dateRange.value)
return !Object.values(dateRanges).some(el => from.value === el[0] && to.value === el[1])
})
</script>