feat: add date math for filters #1342
|
@ -47,6 +47,10 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||||
import LlamaCool from '@/assets/llama-cool.svg?component'
|
import LlamaCool from '@/assets/llama-cool.svg?component'
|
||||||
import DatepickerWithRange from '@/components/date/datepickerWithRange'
|
import DatepickerWithRange from '@/components/date/datepickerWithRange'
|
||||||
|
|
||||||
|
function getNextWeekDate() {
|
||||||
|
return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ShowTasks',
|
name: 'ShowTasks',
|
||||||
components: {
|
components: {
|
||||||
|
@ -62,8 +66,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
startDate: Date,
|
|
||||||
endDate: Date,
|
|
||||||
showAll: Boolean,
|
showAll: Boolean,
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -84,14 +86,14 @@ export default {
|
||||||
|
|
||||||
return !isNaN(d)
|
return !isNaN(d)
|
||||||
konrad marked this conversation as resolved
Outdated
|
|||||||
? d
|
? d
|
||||||
: this.startDate
|
: new Date()
|
||||||
},
|
},
|
||||||
dateTo() {
|
dateTo() {
|
||||||
const d = new Date(Number(this.$route.query.to))
|
const d = new Date(Number(this.$route.query.to))
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Readd route props Readd route props
konrad
commented
Changed it to route props. However, we still have a dependency on the router: every time when seleting a date in ShowTasks it will push the change to the route. I don't know how to change that without massively overengeneering everything so I'd say we leave it at that. Changed it to route props.
However, we still have a dependency on the router: every time when seleting a date in ShowTasks it will push the change to the route. I don't know how to change that without massively overengeneering everything so I'd say we leave it at that.
dpschen
commented
I think it's fine for now. I thought a while about this but also don't have a better soltion for this at the moment (except the v-model version) I think it's fine for now. I thought a while about this but also don't have a better soltion for this at the moment (except the v-model version)
|
|||||||
|
|
||||||
return !isNaN(d)
|
return !isNaN(d)
|
||||||
? d
|
? d
|
||||||
: this.endDate
|
: getNextWeekDate()
|
||||||
},
|
},
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Unsure: I think eslint doesn't complain here if you use underscore ( Unsure: I think eslint doesn't complain here if you use underscore (`_`) to spread the unused variable.
dpschen
commented
Add Add `?.[0]` so we return the key, which is what we actually want to use and adjust variable name.
konrad
commented
Nope, does not seem to have an effect. > Unsure: I think eslint doesn't complain here if you use underscore (_) to spread the unused variable.
Nope, does not seem to have an effect.
konrad
commented
Done. > Add ?.[0] so we return the key, which is what we actually want to use and adjust variable name.
Done.
dpschen
commented
Interesting! > Nope, does not seem to have an effect.
Interesting!
|
|||||||
showNulls() {
|
showNulls() {
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Remove title var and return directly:
Remove title var and return directly:
```js
if (typeof predefinedRange !== 'undefined') {
return t(`input.datepickerRange.ranges.${predefinedRangeKey}`)
} else {
return showAll
? t('task.show.titleCurrent')
: t('task.show.fromuntil', {
from: formatDate(dateFrom, 'PPP'),
until: formatDate(dateTo, 'PPP'),
})
}
konrad
commented
Done. Done.
|
|||||||
return this.$route.query.showNulls === 'true'
|
return this.$route.query.showNulls === 'true'
|
||||||
|
|
|
@ -1,20 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="content has-text-centered">
|
|
||||||
<ShowTasks
|
|
||||||
:end-date="endDate"
|
|
||||||
:start-date="startDate"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import ShowTasks from './ShowTasks.vue'
|
|
||||||
|
|
||||||
function getNextWeekDate() {
|
|
||||||
return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
const startDate = ref(new Date())
|
|
||||||
const endDate = ref(getNextWeekDate())
|
|
||||||
</script>
|
|
9
src/views/tasks/UpcomingTasks.vue
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<ShowTasks/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ShowTasks from './ShowTasks.vue'
|
||||||
|
</script>
|
get value from props to remove dependency on route. Removing dependency from router makes the components easier reusable nested inside another view (which is what we do).