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

fix: always sort tasks the same order in chrome and firefox

Browse source 
Discussion at https://community.vikunja.io/t/custom-sorting-tasks-on-overview/392
This commit is contained in:
kolaente 2021-10-16 21:37:21 +02:00
parent 515300d43a
commit df32893ce6
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/views/tasks/ShowTasks.vue
View file

@ -33,12 +33,15 @@
</h3> </h3>
<div v-if="!showAll" class="mb-4"> <div v-if="!showAll" class="mb-4">
<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</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="setDatesToNextWeek()" class="mr-2">{{
$t('task.show.nextWeek')
}}
</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</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>
<img alt="" :src="llamaCoolUrl" /> <img alt="" :src="llamaCoolUrl"/>
</template> </template>
<div :class="{ 'is-loading': loading}" class="spinner"></div> <div :class="{ 'is-loading': loading}" class="spinner"></div>
@ -163,7 +166,10 @@ export default {
if (this.showAll) { if (this.showAll) {
this.setTitle(this.$t('task.show.titleCurrent')) this.setTitle(this.$t('task.show.titleCurrent'))
} else { } else {
this.setTitle(this.$t('task.show.titleDates', { from: this.cStartDate.toLocaleDateString(), to: this.cEndDate.toLocaleDateString()})) this.setTitle(this.$t('task.show.titleDates', {
from: this.cStartDate.toLocaleDateString(),
to: this.cEndDate.toLocaleDateString(),
}))
} }
const params = { const params = {
@ -200,14 +206,17 @@ export default {
this.$store.dispatch('tasks/loadTasks', params) this.$store.dispatch('tasks/loadTasks', params)
.then(r => { .then(r => {
// Sort all tasks to put those with a due date before the ones without a due date, the // Sorting tasks with a due date so that the soonest or overdue are displayed at the top of the list.
// soonest before the later ones. const tasksWithDueDates = r
// We can't use the api sorting here because that sorts tasks with a due date after .filter(t => t.dueDate !== null)
// ones without a due date. .sort((a, b) => a.dueDate > b.dueDate ? 1 : -1)
r.sort((a, b) => {
return a.dueDate === null && b.dueDate === null ? -1 : 1 const tasksWithoutDueDates = r.filter(t => t.dueDate === null)
})
const tasks = r.filter(t => t.dueDate !== null).concat(r.filter(t => t.dueDate === null)) const tasks = [
...tasksWithDueDates,
...tasksWithoutDueDates,
]
this.$set(this, 'tasks', tasks) this.$set(this, 'tasks', tasks)
}) })