chore: cleanup and reorganize the date selection

This commit is contained in:
kolaente 2021-12-28 23:50:04 +01:00
parent 7e8e26679c
commit 7408c37dec
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 77 additions and 66 deletions

View file

@ -532,9 +532,8 @@
"titleCurrent": "Current Tasks", "titleCurrent": "Current Tasks",
"titleDates": "Tasks from {from} until {to}", "titleDates": "Tasks from {from} until {to}",
"noDates": "Show tasks without dates", "noDates": "Show tasks without dates",
"current": "Current tasks", "fromuntil": "Tasks from {from} until {until}",
"from": "Tasks from", "select": "Select a range:",
"until": "until",
"today": "Today", "today": "Today",
"nextWeek": "Next Week", "nextWeek": "Next Week",
"nextMonth": "Next Month", "nextMonth": "Next Month",

View file

@ -8,33 +8,30 @@
> >
{{ $t('task.show.noDates') }} {{ $t('task.show.noDates') }}
</fancycheckbox> </fancycheckbox>
<h3 v-if="showAll && tasks.length > 0"> <h3 class="mb-2">
{{ $t('task.show.current') }} {{ pageTitle }}
</h3> </h3>
<h3 v-else-if="!showAll" class="mb-2"> <!-- FIXME: Styling, maybe in combination with the buttons? -->
{{ $t('task.show.from') }} <p class="is-flex" v-if="!showAll">
{{ $t('task.show.select') }}
<flat-pickr <flat-pickr
:class="{ 'disabled': loading}" :class="{ 'disabled': loading}"
:config="flatPickerConfig" :config="flatPickerConfig"
:disabled="loading" :disabled="loading"
@on-close="setDate" @on-close="setDate"
class="input" v-model="dateRange"
v-model="cStartDate"
/> />
{{ $t('task.show.until') }} </p>
<flat-pickr <div v-if="!showAll" class="mb-4 mt-2">
:class="{ 'disabled': loading}" <x-button type="secondary" @click="showTodaysTasks()" class="mr-2">
:config="flatPickerConfig" {{ $t('task.show.today') }}
:disabled="loading" </x-button>
@on-close="setDate" <x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">
class="input" {{ $t('task.show.nextWeek') }}
v-model="cEndDate" </x-button>
/> <x-button type="secondary" @click="setDatesToNextMonth()">
</h3> {{ $t('task.show.nextMonth') }}
<div v-if="!showAll" class="mb-4"> </x-button>
<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
</div> </div>
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo"> <template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3> <h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
@ -56,16 +53,20 @@
</div> </div>
</template> </template>
<script> <script>
import SingleTaskInList from '../../components/tasks/partials/singleTaskInList' import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
import {mapState} from 'vuex' import {mapState} from 'vuex'
import flatPickr from 'vue-flatpickr-component' import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
import Fancycheckbox from '../../components/input/fancycheckbox' import Fancycheckbox from '@/components/input/fancycheckbox'
import {LOADING, LOADING_MODULE} from '../../store/mutation-types' import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
import LlamaCool from '@/assets/llama-cool.svg?component' import LlamaCool from '@/assets/llama-cool.svg?component'
function formatDate(date) {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
export default { export default {
name: 'ShowTasks', name: 'ShowTasks',
components: { components: {
@ -80,8 +81,7 @@ export default {
showNulls: true, showNulls: true,
showOverdue: false, showOverdue: false,
cStartDate: null, dateRange: null,
cEndDate: null,
showNothingToDo: false, showNothingToDo: false,
} }
@ -92,11 +92,10 @@ export default {
showAll: Boolean, showAll: Boolean,
}, },
created() { created() {
this.cStartDate = this.startDate
this.cEndDate = this.endDate
this.loadPendingTasks() this.loadPendingTasks()
}, },
mounted() { mounted() {
// FIXME
setTimeout(() => this.showNothingToDo = true, 100) setTimeout(() => this.showNothingToDo = true, 100)
}, },
watch: { watch: {
@ -104,12 +103,6 @@ export default {
handler: 'loadPendingTasks', handler: 'loadPendingTasks',
deep: true, deep: true,
}, },
startDate(newVal) {
this.cStartDate = newVal
},
endDate(newVal) {
this.cEndDate = newVal
},
}, },
computed: { computed: {
flatPickerConfig() { flatPickerConfig() {
@ -119,11 +112,38 @@ export default {
dateFormat: 'Y-m-d H:i', dateFormat: 'Y-m-d H:i',
enableTime: true, enableTime: true,
time_24hr: true, time_24hr: true,
mode: 'range',
locale: { locale: {
firstDayOfWeek: this.$store.state.auth.settings.weekStart, firstDayOfWeek: this.$store.state.auth.settings.weekStart,
}, },
} }
}, },
dateFrom() {
const d = new Date(Number(this.$route.query.from))
return !isNaN(d)
? d
: this.startDate
},
dateTo() {
const d = new Date(Number(this.$route.query.to))
return !isNaN(d)
? d
: this.endDate
},
pageTitle() {
const title = this.showAll
? this.$t('task.show.titleCurrent')
: this.$t('task.show.fromuntil', {
from: this.formatDateShort(this.dateFrom),
until: this.formatDateShort(this.dateTo)
})
this.setTitle(title)
return title
},
...mapState({ ...mapState({
userAuthenticated: state => state.auth.authenticated, userAuthenticated: state => state.auth.authenticated,
loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks', loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
@ -131,11 +151,17 @@ export default {
}, },
methods: { methods: {
setDate() { setDate() {
if (this.dateRange === null) {
return
}
const [fromDate, toDate] = this.dateRange.split(' to ')
this.$router.push({ this.$router.push({
name: this.$route.name, name: this.$route.name,
query: { query: {
from: +new Date(this.cStartDate), from: +new Date(fromDate),
to: +new Date(this.cEndDate), to: +new Date(toDate),
showOverdue: this.showOverdue, showOverdue: this.showOverdue,
showNulls: this.showNulls, showNulls: this.showNulls,
}, },
@ -149,26 +175,9 @@ export default {
return return
} }
// Make sure all dates are date objects
if (typeof this.$route.query.from !== 'undefined' && typeof this.$route.query.to !== 'undefined') {
this.cStartDate = new Date(Number(this.$route.query.from))
this.cEndDate = new Date(Number(this.$route.query.to))
} else {
this.cStartDate = new Date(this.cStartDate)
this.cEndDate = new Date(this.cEndDate)
}
this.showOverdue = this.$route.query.showOverdue this.showOverdue = this.$route.query.showOverdue
this.showNulls = this.$route.query.showNulls this.showNulls = this.$route.query.showNulls
if (this.showAll) {
this.setTitle(this.$t('task.show.titleCurrent'))
} else {
this.setTitle(this.$t('task.show.titleDates', {
from: this.cStartDate.toLocaleDateString(),
to: this.cEndDate.toLocaleDateString(),
}))
}
const params = { const params = {
sort_by: ['due_date', 'id'], sort_by: ['due_date', 'id'],
order_by: ['desc', 'desc'], order_by: ['desc', 'desc'],
@ -181,21 +190,21 @@ export default {
if (!this.showAll) { if (!this.showAll) {
if (this.showNulls) { if (this.showNulls) {
params.filter_by.push('start_date') params.filter_by.push('start_date')
params.filter_value.push(this.cStartDate) params.filter_value.push(this.dateFrom)
params.filter_comparator.push('greater') params.filter_comparator.push('greater')
params.filter_by.push('end_date') params.filter_by.push('end_date')
params.filter_value.push(this.cEndDate) params.filter_value.push(this.dateTo)
params.filter_comparator.push('less') params.filter_comparator.push('less')
} }
params.filter_by.push('due_date') params.filter_by.push('due_date')
params.filter_value.push(this.cEndDate) params.filter_value.push(this.dateFrom)
params.filter_comparator.push('less') params.filter_comparator.push('less')
if (!this.showOverdue) { if (!this.showOverdue) {
params.filter_by.push('due_date') params.filter_by.push('due_date')
params.filter_value.push(this.cStartDate) params.filter_value.push(this.dateTo)
params.filter_comparator.push('greater') params.filter_comparator.push('greater')
} }
} }
@ -231,23 +240,26 @@ export default {
}, },
setDatesToNextWeek() { setDatesToNextWeek() {
this.cStartDate = new Date() const startDate = new Date()
this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000) const endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
this.dateRange = `${formatDate(startDate)} to ${formatDate(endDate)}`
this.showOverdue = false this.showOverdue = false
this.setDate() this.setDate()
}, },
setDatesToNextMonth() { setDatesToNextMonth() {
this.cStartDate = new Date() const startDate = new Date()
this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1)) const endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
this.dateRange = `${formatDate(startDate)} to ${formatDate(endDate)}`
this.showOverdue = false this.showOverdue = false
this.setDate() this.setDate()
}, },
showTodaysTasks() { showTodaysTasks() {
const d = new Date() const d = new Date()
this.cStartDate = new Date() const startDate = new Date()
this.cEndDate = new Date(d.setDate(d.getDate() + 1)) const endDate = new Date(d.setDate(d.getDate() + 1))
this.dateRange = `${formatDate(startDate)} to ${formatDate(endDate)}`
this.showOverdue = true this.showOverdue = true
this.setDate() this.setDate()
}, },