local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: use object and loop to set date options

Browse source
This commit is contained in:
kolaente 2022-01-09 12:03:35 +01:00
parent 210a78be86
commit 32bdf16892
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,32 +11,12 @@
<template #content="{isOpen}"> <template #content="{isOpen}">
<div class="datepicker-with-range" :class="{'is-open': isOpen}"> <div class="datepicker-with-range" :class="{'is-open': isOpen}">
<div class="selections"> <div class="selections">
<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}"> <button
{{ $t('task.show.today') }} v-for="(value, text) in dateRanges"
</button> :key="text"
<button @click="setDateRange(datesThisWeek)" @click="setDateRange(value)"
:class="{'is-active': dateRange === datesThisWeek}"> :class="{'is-active': dateRange === value}">
{{ $t('task.show.thisWeek') }} {{ $t(text) }}
</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> </button>
<button @click="setDateRange('')" :class="{'is-active': customRangeActive}"> <button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
{{ $t('misc.custom') }} {{ $t('misc.custom') }}
@ -57,7 +37,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import flatPickr from 'vue-flatpickr-component' import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
import {computed, ref, watch} from 'vue' import {computed, Ref, ref, watch} from 'vue'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import {store} from '@/store' import {store} from '@/store'
import {format} from 'date-fns' import {format} from 'date-fns'
@ -193,8 +173,8 @@ const datesNext30Days = computed<string>(() => {
return `${formatDate(startDate)} to ${formatDate(endDate)}` return `${formatDate(startDate)} to ${formatDate(endDate)}`
}) })
function setDateRange(range: string) { function setDateRange(range: Ref<string>) {
dateRange.value = range dateRange.value = range.value
} }
const customRangeActive = computed<Boolean>(() => { const customRangeActive = computed<Boolean>(() => {
@ -206,6 +186,16 @@ const customRangeActive = computed<Boolean>(() => {
dateRange.value !== datesNextMonth.value && dateRange.value !== datesNextMonth.value &&
dateRange.value !== datesNext30Days.value dateRange.value !== datesNext30Days.value
}) })
const dateRanges = {
'task.show.today': datesToday,
'task.show.thisWeek': datesThisWeek,
'task.show.nextWeek': datesNextWeek,
'task.show.next7Days': datesNext7Days,
'task.show.thisMonth': datesThisMonth,
'task.show.nextMonth': datesNextMonth,
'task.show.next30Days': datesNext30Days,
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>