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

chore: use flatpickr range instead of two datepickers

Browse source
This commit is contained in:
kolaente 2022-07-20 19:00:15 +02:00
parent b6c776592b
commit ed338cefcd
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/i18n/lang/en.json
View file

@ -286,8 +286,7 @@
"month": "Month",
"day": "Day",
"hour": "Hour",
"from": "From",
"to": "To",
"range": "Range",
"noDates": "This task has no dates set."
},
"table": {

30
src/views/list/ListGantt.vue
View file

@ -16,26 +16,14 @@
</div>
</div>
<div class="field">
<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
<label class="label" for="range">{{ $t('list.gantt.range') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="fromDate"
:placeholder="$t('list.gantt.from')"
v-model="dateFrom"
/>
</div>
</div>
<div class="field">
<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
class="input"
id="toDate"
:placeholder="$t('list.gantt.to')"
v-model="dateTo"
id="range"
:placeholder="$t('list.gantt.range')"
v-model="range"
/>
</div>
</div>
@ -87,8 +75,13 @@ const showTaskswithoutDates = ref(false)
const precision = ref('day')
const now = ref(new Date())
const dateFrom = ref(format(new Date((new Date()).setDate(now.value.getDate() - 15)), 'yyyy-LL-dd'))
const dateTo = ref(format(new Date((new Date()).setDate(now.value.getDate() + 30)), 'yyyy-LL-dd'))
const defaultFrom = format(new Date((new Date()).setDate(now.value.getDate() - 15)), 'yyyy-LL-dd')
const defaultTo = format(new Date((new Date()).setDate(now.value.getDate() + 30)), 'yyyy-LL-dd')
const range = ref(`${defaultFrom} to ${defaultTo}`)
// TODO: only update once both dates are available (maybe use a watcher + refs instead?)
const dateFrom = computed(() => range.value?.split(' to ')[0] ?? defaultFrom)
const dateTo = computed(() => range.value?.split(' to ')[1] ?? defaultTo)
const {t} = useI18n({useScope: 'global'})
const store = useStore()
@ -97,6 +90,7 @@ const flatPickerConfig = computed(() => ({
altInput: true,
dateFormat: 'Y-m-d',
enableTime: false,
mode: 'range',
locale: {
firstDayOfWeek: store.state.auth.settings.weekStart,
},