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 +19 -29
1 changed files with 19 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 32bdf16892 - Show all commits

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

@ -11,32 +11,12 @@
<template #content="{isOpen}">
<div class="datepicker-with-range" :class="{'is-open': isOpen}">
<div class="selections">
<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
{{ $t('task.show.today') }}
</button>
<button @click="setDateRange(datesThisWeek)"
:class="{'is-active': dateRange === datesThisWeek}">
{{ $t('task.show.thisWeek') }}
</button>
<button @click="setDateRange(datesNextWeek)"
:class="{'is-active': dateRange === datesNextWeek}">
{{ $t('task.show.nextWeek') }}
</button>
<button @click="setDateRange(datesNext7Days)"
:class="{'is-active': dateRange === datesNext7Days}">
{{ $t('task.show.next7Days') }}
</button>
<button @click="setDateRange(datesThisMonth)"
:class="{'is-active': dateRange === datesThisMonth}">
{{ $t('task.show.thisMonth') }}
</button>
<button @click="setDateRange(datesNextMonth)"
:class="{'is-active': dateRange === datesNextMonth}">
{{ $t('task.show.nextMonth') }}
</button>
<button @click="setDateRange(datesNext30Days)"
:class="{'is-active': dateRange === datesNext30Days}">
{{ $t('task.show.next30Days') }}
<button
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:10:52 +00:00
Outdated
Review
Copy Link

Use BaseButton

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

Done.

Done.
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}">
{{ $t(text) }}
</button>
<button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
{{ $t('misc.custom') }}
@ -57,7 +37,7 @@
<script lang="ts" setup>
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import {computed, ref, watch} from 'vue'
import {computed, Ref, ref, watch} from 'vue'
import {useI18n} from 'vue-i18n'
import {store} from '@/store'
import {format} from 'date-fns'
@ -193,8 +173,8 @@ const datesNext30Days = computed<string>(() => {
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
function setDateRange(range: string) {
dateRange.value = range
function setDateRange(range: Ref<string>) {
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:20:27 +00:00
Outdated
Review
Copy Link

Picky:

I like to group imports from external packages and from internal stuff.
Usally I follow this order (but not strict):

  • external packages beginning with vue libs

  • external packages other libs and css

  • internal instances like store, message, etc

  • services and models

  • component imports

  • helpers

As you can see this is more or less random, so happy to discuss this.
Or we can simple keep it random :D

Picky: I like to group imports from external packages and from internal stuff. Usally I follow this order (but not strict): - external packages beginning with vue libs - external packages other libs and css - internal instances like store, message, etc - services and models - component imports - helpers As you can see this is more or less random, so happy to discuss this. Or we can simple keep it random :D
konrad commented 2022-02-06 18:31:29 +00:00
Outdated
Review
Copy Link

Oh I think it absolutely makes sense to have something like that, even if not strictly enforced. Do you think we could put this in a linter?

Oh I think it absolutely makes sense to have something like that, even if not strictly enforced. Do you think we could put this in a linter?
dpschen commented 2022-02-06 19:20:09 +00:00
Outdated
Review
Copy Link

I think I encountered at least something like external stuff first in a linter already.

I think I encountered at least something like external stuff first in a linter already.
👍 1
dateRange.value = range.value
}
const customRangeActive = computed<Boolean>(() => {
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:21:28 +00:00
Outdated
Review
Copy Link

After using it a while I prefer now to use the useStore method to get the current store instance.
The reason is that it makes it easier to refactor in composables later because useStore will always give you the store.

After using it a while I prefer now to use the `useStore` method to get the current store instance. The reason is that it makes it easier to refactor in composables later because `useStore` will always give you the store.
konrad commented 2022-02-06 18:31:57 +00:00
Outdated
Review
Copy Link

Makes sense! Changed it.

Makes sense! Changed it.
@ -206,6 +186,16 @@ const customRangeActive = computed<Boolean>(() => {
dateRange.value !== datesNextMonth.value &&
dateRange.value !== datesNext30Days.value
})
const dateRanges = {
'task.show.today': datesToday,
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:50:28 +00:00
Outdated
Review
Copy Link

We could remove this prop if we would only expose the slot for the trigger.

We could remove this prop if we would only expose the slot for the trigger.
konrad commented 2022-02-06 17:51:26 +00:00
Outdated
Review
Copy Link

Done.

Done.
'task.show.thisWeek': datesThisWeek,
'task.show.nextWeek': datesNextWeek,
'task.show.next7Days': datesNext7Days,
'task.show.thisMonth': datesThisMonth,
'task.show.nextMonth': datesNextMonth,
'task.show.next30Days': datesNext30Days,
dpschen commented 2022-02-06 13:43:30 +00:00
Outdated
Review
Copy Link

Continuing from #1261 (comment)

With default value you mean the value of store.state.auth.settings.weekStart?

Continuing from https://kolaente.dev/vikunja/frontend/pulls/1261#issuecomment-22675 With default value you mean the value of store.state.auth.settings.weekStart?
konrad commented 2022-02-06 19:14:46 +00:00
Outdated
Review
Copy Link

As said in #1261:

It's not reflected in the flatpicker config (below). That always contains 0 as week start, no matter what is set in store.

As said in #1261: > It's not reflected in the flatpicker config (below). That always contains `0` as week start, no matter what is set in store.
}
</script>
<style lang="scss" scoped>