2018-12-25 23:41:55 +01:00
|
|
|
<template>
|
2021-12-29 20:36:53 +01:00
|
|
|
<div class="is-max-width-desktop has-text-left ">
|
2022-02-05 21:14:40 +01:00
|
|
|
<h3 class="mb-2 title">
|
2021-12-28 23:50:04 +01:00
|
|
|
{{ pageTitle }}
|
2021-06-24 01:24:57 +02:00
|
|
|
</h3>
|
2021-12-29 20:36:53 +01:00
|
|
|
<p v-if="!showAll" class="show-tasks-options">
|
2022-02-06 18:46:53 +01:00
|
|
|
<datepicker-with-range @dateChanged="setDate">
|
|
|
|
<template #trigger="{toggle, buttonText}">
|
|
|
|
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
|
|
|
{{ $t('task.show.select') }}
|
|
|
|
</x-button>
|
|
|
|
</template>
|
|
|
|
</datepicker-with-range>
|
2021-12-29 20:36:53 +01:00
|
|
|
<fancycheckbox @change="setShowNulls" class="mr-2">
|
2021-12-29 18:06:12 +01:00
|
|
|
{{ $t('task.show.noDates') }}
|
|
|
|
</fancycheckbox>
|
2021-12-29 18:12:43 +01:00
|
|
|
<fancycheckbox @change="setShowOverdue">
|
2021-12-29 18:06:12 +01:00
|
|
|
{{ $t('task.show.overdue') }}
|
|
|
|
</fancycheckbox>
|
2021-12-28 23:50:04 +01:00
|
|
|
</p>
|
2021-08-06 19:25:17 +02:00
|
|
|
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
|
2021-12-29 20:36:53 +01:00
|
|
|
<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
|
2022-01-09 16:47:21 +01:00
|
|
|
<LlamaCool class="llama-cool"/>
|
2018-12-25 23:41:55 +01:00
|
|
|
</template>
|
2021-01-24 14:00:21 +01:00
|
|
|
|
2021-12-29 20:59:30 +01:00
|
|
|
<card
|
|
|
|
v-if="hasTasks"
|
|
|
|
:padding="false"
|
|
|
|
class="has-overflow"
|
|
|
|
:has-content="false"
|
|
|
|
:loading="loading"
|
|
|
|
>
|
2021-12-29 20:36:53 +01:00
|
|
|
<div class="p-2">
|
2021-01-24 14:00:21 +01:00
|
|
|
<single-task-in-list
|
2021-12-29 17:24:56 +01:00
|
|
|
v-for="t in tasksSorted"
|
2021-01-24 14:00:21 +01:00
|
|
|
:key="t.id"
|
|
|
|
class="task"
|
|
|
|
:show-list="true"
|
|
|
|
:the-task="t"
|
|
|
|
@taskUpdated="updateTasks"/>
|
|
|
|
</div>
|
|
|
|
</card>
|
2022-02-05 20:17:34 +01:00
|
|
|
<div v-else :class="{ 'is-loading': loading}" class="spinner"></div>
|
2018-12-25 23:41:55 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-02-06 16:04:49 +01:00
|
|
|
|
|
|
|
<script setup lang="ts">
|
2022-01-09 14:21:33 +01:00
|
|
|
import {dateRanges} from '@/components/date/dateRanges'
|
2022-02-06 16:04:49 +01:00
|
|
|
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
|
2022-01-09 17:27:28 +01:00
|
|
|
import {parseDateOrString} from '@/helpers/time/parseDateOrString'
|
2022-02-06 16:04:49 +01:00
|
|
|
import {mapState, useStore} from 'vuex'
|
|
|
|
import {computed, ref, watchEffect} from 'vue'
|
2018-12-25 23:41:55 +01:00
|
|
|
|
2022-02-06 16:04:49 +01:00
|
|
|
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
2021-12-28 23:50:04 +01:00
|
|
|
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
2020-07-22 12:29:03 +02:00
|
|
|
|
2021-11-13 15:16:14 +01:00
|
|
|
import LlamaCool from '@/assets/llama-cool.svg?component'
|
2022-02-06 16:04:49 +01:00
|
|
|
import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
|
|
|
|
import TaskModel from '@/models/task'
|
|
|
|
import {useRoute, useRouter} from 'vue-router'
|
|
|
|
import {formatDate} from '@/helpers/time/formatDate'
|
|
|
|
import {useI18n} from 'vue-i18n'
|
2022-02-06 16:36:12 +01:00
|
|
|
import {setTitle} from '@/helpers/setTitle'
|
2021-10-03 20:48:02 +02:00
|
|
|
|
2022-02-05 21:12:35 +01:00
|
|
|
function getNextWeekDate() {
|
|
|
|
return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
|
|
|
|
}
|
|
|
|
|
2022-02-06 16:04:49 +01:00
|
|
|
const store = useStore()
|
|
|
|
const route = useRoute()
|
|
|
|
const router = useRouter()
|
|
|
|
const {t} = useI18n()
|
|
|
|
|
|
|
|
const tasks = ref<TaskModel[]>([])
|
|
|
|
const showNothingToDo = ref<boolean>(false)
|
|
|
|
|
|
|
|
setTimeout(() => showNothingToDo.value = true, 100)
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
showAll: Boolean,
|
|
|
|
})
|
|
|
|
|
|
|
|
const dateFrom = computed<Date | string>(() => parseDateOrString(route.query.from as string, new Date()))
|
|
|
|
const dateTo = computed<Date | string>(() => parseDateOrString(route.query.to as string, getNextWeekDate()))
|
|
|
|
const showNulls = computed(() => route.query.showNulls === 'true')
|
|
|
|
const showOverdue = computed(() => route.query.showOverdue === 'true')
|
|
|
|
const pageTitle = computed(() => {
|
|
|
|
let title = ''
|
|
|
|
|
|
|
|
// We need to define "key" because it is the first parameter in the array and we need the second
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
|
const predefinedRange = Object.entries(dateRanges).find(([key, value]) => dateFrom.value === value[0] && dateTo.value === value[1])
|
|
|
|
if (typeof predefinedRange !== 'undefined') {
|
|
|
|
title = t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
|
|
|
|
} else {
|
|
|
|
title = props.showAll
|
|
|
|
? t('task.show.titleCurrent')
|
|
|
|
: t('task.show.fromuntil', {
|
|
|
|
from: formatDate(dateFrom.value, 'PPP'),
|
|
|
|
until: formatDate(dateTo.value, 'PPP'),
|
2021-12-29 18:12:43 +01:00
|
|
|
})
|
2022-02-06 16:04:49 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return title
|
|
|
|
})
|
|
|
|
const tasksSorted = computed(() => {
|
|
|
|
// Sort all tasks to put those with a due date before the ones without a due date, the
|
|
|
|
// soonest before the later ones.
|
|
|
|
// We can't use the api sorting here because that sorts tasks with a due date after
|
|
|
|
// ones without a due date.
|
|
|
|
|
|
|
|
const tasksWithDueDate = [...tasks.value]
|
|
|
|
.filter(t => t.dueDate !== null)
|
|
|
|
.sort((a, b) => {
|
|
|
|
const sortByDueDate = a.dueDate - b.dueDate
|
|
|
|
return sortByDueDate === 0
|
|
|
|
? b.id - a.id
|
|
|
|
: sortByDueDate
|
|
|
|
})
|
|
|
|
const tasksWithoutDueDate = [...tasks.value]
|
|
|
|
.filter(t => t.dueDate === null)
|
|
|
|
|
|
|
|
return [
|
|
|
|
...tasksWithDueDate,
|
|
|
|
...tasksWithoutDueDate,
|
|
|
|
]
|
|
|
|
})
|
|
|
|
const hasTasks = computed(() => tasks && tasks.value.length > 0)
|
|
|
|
const userAuthenticated = computed(() => store.state.auth.authenticated)
|
|
|
|
const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
|
|
|
|
|
|
|
|
interface dateStrings {
|
2022-02-06 16:58:23 +01:00
|
|
|
dateFrom: string,
|
|
|
|
dateTo: string,
|
2022-02-06 16:04:49 +01:00
|
|
|
}
|
2020-07-22 12:29:03 +02:00
|
|
|
|
2022-02-06 16:58:23 +01:00
|
|
|
function setDate(dates: dateStrings) {
|
2022-02-06 16:04:49 +01:00
|
|
|
router.push({
|
|
|
|
name: route.name as string,
|
|
|
|
query: {
|
2022-02-06 16:58:23 +01:00
|
|
|
from: dates.dateFrom ?? dateFrom,
|
|
|
|
to: dates.dateTo ?? dateTo,
|
2022-02-06 16:04:49 +01:00
|
|
|
showOverdue: showOverdue.value ? 'true' : 'false',
|
|
|
|
showNulls: showNulls.value ? 'true' : 'false',
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
2021-12-29 17:24:56 +01:00
|
|
|
|
2022-02-06 16:04:49 +01:00
|
|
|
function setShowOverdue(show: boolean) {
|
|
|
|
router.push({
|
|
|
|
name: route.name as string,
|
|
|
|
query: {
|
|
|
|
...route.query,
|
|
|
|
showOverdue: show ? 'true' : 'false',
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
2022-01-09 13:02:16 +01:00
|
|
|
|
2022-02-06 16:04:49 +01:00
|
|
|
function setShowNulls(show: boolean) {
|
|
|
|
router.push({
|
|
|
|
name: route.name as string,
|
|
|
|
query: {
|
|
|
|
...route.query,
|
|
|
|
showNulls: show ? 'true' : 'false',
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
2020-09-05 22:35:52 +02:00
|
|
|
|
2022-02-06 16:58:23 +01:00
|
|
|
async function loadPendingTasks(from: string, to: string) {
|
2022-02-06 16:04:49 +01:00
|
|
|
// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
|
|
|
|
// Since this component is mounted as the home page before unauthenticated users get redirected
|
|
|
|
// to the login page, they will almost always see the error message.
|
|
|
|
if (!userAuthenticated) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
sort_by: ['due_date', 'id'],
|
|
|
|
order_by: ['desc', 'desc'],
|
|
|
|
filter_by: ['done'],
|
|
|
|
filter_value: ['false'],
|
|
|
|
filter_comparator: ['equals'],
|
|
|
|
filter_concat: 'and',
|
|
|
|
filter_include_nulls: showNulls.value,
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!props.showAll) {
|
|
|
|
params.filter_by.push('due_date')
|
|
|
|
params.filter_value.push(to)
|
|
|
|
params.filter_comparator.push('less')
|
|
|
|
|
|
|
|
// NOTE: Ideally we could also show tasks with a start or end date in the specified range, but the api
|
|
|
|
// is not capable (yet) of combining multiple filters with 'and' and 'or'.
|
|
|
|
|
|
|
|
if (!showOverdue.value) {
|
|
|
|
params.filter_by.push('due_date')
|
|
|
|
params.filter_value.push(from)
|
|
|
|
params.filter_comparator.push('greater')
|
|
|
|
}
|
|
|
|
}
|
2020-09-05 22:35:52 +02:00
|
|
|
|
2022-02-06 16:04:49 +01:00
|
|
|
tasks.value = await store.dispatch('tasks/loadTasks', params)
|
|
|
|
}
|
2021-10-11 19:37:20 +02:00
|
|
|
|
2022-02-06 16:04:49 +01:00
|
|
|
// FIXME: this modification should happen in the store
|
|
|
|
function updateTasks(updatedTask) {
|
|
|
|
for (const t in tasks.value) {
|
|
|
|
if (tasks.value[t].id === updatedTask.id) {
|
|
|
|
tasks.value[t] = updatedTask
|
|
|
|
// Move the task to the end of the done tasks if it is now done
|
|
|
|
if (updatedTask.done) {
|
|
|
|
tasks.value.splice(t, 1)
|
|
|
|
tasks.value.push(updatedTask)
|
2020-09-05 22:35:52 +02:00
|
|
|
}
|
2022-02-06 16:04:49 +01:00
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
2020-09-05 22:35:52 +02:00
|
|
|
}
|
2022-02-06 16:04:49 +01:00
|
|
|
|
|
|
|
watchEffect(() => loadPendingTasks(dateFrom.value as string, dateTo.value as string))
|
2022-02-06 16:48:28 +01:00
|
|
|
watchEffect(() => setTitle(pageTitle.value))
|
2018-12-25 23:41:55 +01:00
|
|
|
</script>
|
2021-10-18 14:22:47 +02:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2021-12-29 20:36:53 +01:00
|
|
|
.show-tasks-options {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-11-13 15:16:14 +01:00
|
|
|
}
|
2022-01-09 16:47:21 +01:00
|
|
|
|
|
|
|
.llama-cool {
|
|
|
|
margin: 3rem auto 0;
|
|
|
|
display: block;
|
|
|
|
}
|
2021-10-18 14:22:47 +02:00
|
|
|
</style>
|