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", "month": "Month",
"day": "Day", "day": "Day",
"hour": "Hour", "hour": "Hour",
"from": "From", "range": "Range",
"to": "To",
"noDates": "This task has no dates set." "noDates": "This task has no dates set."
}, },
"table": { "table": {

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

@ -16,26 +16,14 @@
</div> </div>
</div> </div>
<div class="field"> <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"> <div class="control">
<flat-pickr <flat-pickr
:config="flatPickerConfig" :config="flatPickerConfig"
class="input" class="input"
id="fromDate" id="range"
:placeholder="$t('list.gantt.from')" :placeholder="$t('list.gantt.range')"
v-model="dateFrom" v-model="range"
/>
</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"
/> />
</div> </div>
</div> </div>
@ -87,8 +75,13 @@ const showTaskswithoutDates = ref(false)
const precision = ref('day') const precision = ref('day')
const now = ref(new Date()) const now = ref(new Date())
const dateFrom = ref(format(new Date((new Date()).setDate(now.value.getDate() - 15)), 'yyyy-LL-dd')) const defaultFrom = 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 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 {t} = useI18n({useScope: 'global'})
const store = useStore() const store = useStore()
@ -97,6 +90,7 @@ const flatPickerConfig = computed(() => ({
altInput: true, altInput: true,
dateFormat: 'Y-m-d', dateFormat: 'Y-m-d',
enableTime: false, enableTime: false,
mode: 'range',
locale: { locale: {
firstDayOfWeek: store.state.auth.settings.weekStart, firstDayOfWeek: store.state.auth.settings.weekStart,
}, },