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 +28 -19
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6c55411f71 - Show all commits

10
src/components/date/dateRanges.ts Normal file
View File

@ -0,0 +1,10 @@
// TODO: more ranges!
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:22:14 +00:00
Outdated
Review
Copy Link

Use UPPER_SNAKE_CASE for constants

Use UPPER_SNAKE_CASE for constants
konrad commented 2022-02-06 18:33:58 +00:00
Outdated
Review
Copy Link

Done.

Done.
export const dateRanges = {
'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'],
'task.show.next30Days': ['now', 'now+30d'],
}

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

@ -59,11 +59,12 @@
<script lang="ts" setup>
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import {computed, Ref, ref, watch} from 'vue'
import {computed, ref, watch} from 'vue'
import {useI18n} from 'vue-i18n'
import {store} from '@/store'
import {format} from 'date-fns'
import Popup from '@/components/misc/popup'
import Popup from '@/components/misc/popup.vue'
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:16:24 +00:00
Outdated
Review
Copy Link

The whole explanation card should be its own component.

The whole explanation card should be its own component.
konrad commented 2022-02-06 18:29:32 +00:00
Outdated
Review
Copy Link

Done!

Done!
import {dateRanges} from '@/components/date/dateRanges'
const {t} = useI18n()
@ -135,16 +136,6 @@ function setDateRange(range: string[] | null) {
inputChanged()
}
const dateRanges = {
'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'],
'task.show.next30Days': ['now', 'now+30d'],
}
const customRangeActive = computed<Boolean>(() => {
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?
return !Object.values(dateRanges).some(el => from.value === el[0] && to.value === el[1])
})

20
src/views/tasks/ShowTasks.vue
View File

@ -38,6 +38,7 @@
</div>
</template>
<script>
import {dateRanges} from '@/components/date/dateRanges'
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
import {mapState} from 'vuex'
@ -106,12 +107,19 @@ export default {
return this.$route.query.showOverdue === 'true'
},
pageTitle() {
const title = this.showAll
? this.$t('task.show.titleCurrent')
: this.$t('task.show.fromuntil', {
from: this.format(this.dateFrom, 'PPP'),
until: this.format(this.dateTo, 'PPP'),
})
let title = ''
const predefinedRange = Object.entries(dateRanges).find(([key, value]) => this.dateFrom === value[0] && this.dateTo === value[1])
if (typeof predefinedRange !== 'undefined') {
title = this.$t(predefinedRange[0])
} else {
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:35:46 +00:00
Outdated
Review
Copy Link

This is a sideeffect inside a computed. Remove this.
Better watch the computed and react to that:

watchEffect(() => setTitle(pageTitle.value))
This is a sideeffect inside a computed. Remove this. Better watch the computed and react to that: ```js watchEffect(() => setTitle(pageTitle.value)) ```
konrad commented 2022-02-06 17:50:25 +00:00
Outdated
Review
Copy Link

Done.

Done.
title = this.showAll
? this.$t('task.show.titleCurrent')
: this.$t('task.show.fromuntil', {
from: this.format(this.dateFrom, 'PPP'),
until: this.format(this.dateTo, 'PPP'),
})
}
this.setTitle(title)