chore: convert ShowTasks component to script setup and ts
This commit is contained in:
kolaente
parent
6c0d091e36
commit
bcd34efe91
2 changed files with 158 additions and 172 deletions
|
|
@ -1,4 +1,4 @@
|
|||
export function parseDateOrString(rawValue: string, fallback: any) {
|
||||
export function parseDateOrString(rawValue: string, fallback: any): string | Date {
|
||||
if (typeof rawValue === 'undefined') {
|
||||
return fallback
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,197 +37,183 @@
|
|||
<div v-else :class="{ 'is-loading': loading}" class="spinner"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {dateRanges} from '@/components/date/dateRanges'
|
||||
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
|
||||
import {parseDateOrString} from '@/helpers/time/parseDateOrString'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox'
|
||||
<script setup lang="ts">
|
||||
import {dateRanges} from '@/components/date/dateRanges'
|
||||
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
|
||||
import {parseDateOrString} from '@/helpers/time/parseDateOrString'
|
||||
import {mapState, useStore} from 'vuex'
|
||||
import {computed, ref, watchEffect} from 'vue'
|
||||
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
||||
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||
|
||||
import LlamaCool from '@/assets/llama-cool.svg?component'
|
||||
import DatepickerWithRange from '@/components/date/datepickerWithRange'
|
||||
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'
|
||||
import {setTitle} from './helpers/setTitle'
|
||||
|
||||
function getNextWeekDate() {
|
||||
return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ShowTasks',
|
||||
components: {
|
||||
DatepickerWithRange,
|
||||
Fancycheckbox,
|
||||
SingleTaskInList,
|
||||
LlamaCool,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tasks: [],
|
||||
showNothingToDo: false,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
showAll: Boolean,
|
||||
},
|
||||
created() {
|
||||
this.loadPendingTasks()
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => this.showNothingToDo = true, 100)
|
||||
},
|
||||
watch: {
|
||||
'$route': {
|
||||
handler: 'loadPendingTasks',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dateFrom() {
|
||||
return parseDateOrString(this.$route.query.from, new Date())
|
||||
},
|
||||
dateTo() {
|
||||
return parseDateOrString(this.$route.query.to, getNextWeekDate())
|
||||
},
|
||||
showNulls() {
|
||||
return this.$route.query.showNulls === 'true'
|
||||
},
|
||||
showOverdue() {
|
||||
return this.$route.query.showOverdue === 'true'
|
||||
},
|
||||
pageTitle() {
|
||||
let title = ''
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const {t} = useI18n()
|
||||
|
||||
// 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]) => this.dateFrom === value[0] && this.dateTo === value[1])
|
||||
if (typeof predefinedRange !== 'undefined') {
|
||||
title = this.$t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
|
||||
} else {
|
||||
title = this.showAll
|
||||
? this.$t('task.show.titleCurrent')
|
||||
: this.$t('task.show.fromuntil', {
|
||||
from: this.format(this.dateFrom, 'PPP'),
|
||||
until: this.format(this.dateTo, 'PPP'),
|
||||
})
|
||||
}
|
||||
const tasks = ref<TaskModel[]>([])
|
||||
const showNothingToDo = ref<boolean>(false)
|
||||
|
||||
this.setTitle(title)
|
||||
setTimeout(() => showNothingToDo.value = true, 100)
|
||||
|
||||
return title
|
||||
},
|
||||
tasksSorted() {
|
||||
// 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 props = defineProps({
|
||||
showAll: Boolean,
|
||||
})
|
||||
|
||||
const tasksWithDueDate = [...this.tasks]
|
||||
.filter(t => t.dueDate !== null)
|
||||
.sort((a, b) => {
|
||||
const sortByDueDate = a.dueDate - b.dueDate
|
||||
return sortByDueDate === 0
|
||||
? b.id - a.id
|
||||
: sortByDueDate
|
||||
})
|
||||
const tasksWithoutDueDate = [...this.tasks]
|
||||
.filter(t => t.dueDate === null)
|
||||
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 = ''
|
||||
|
||||
return [
|
||||
...tasksWithDueDate,
|
||||
...tasksWithoutDueDate,
|
||||
]
|
||||
},
|
||||
hasTasks() {
|
||||
return this.tasks && this.tasks.length > 0
|
||||
},
|
||||
...mapState({
|
||||
userAuthenticated: state => state.auth.authenticated,
|
||||
loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
setDate({dateFrom, dateTo}) {
|
||||
this.$router.push({
|
||||
name: this.$route.name,
|
||||
query: {
|
||||
from: dateFrom ?? this.dateFrom,
|
||||
to: dateTo ?? this.dateTo,
|
||||
showOverdue: this.showOverdue,
|
||||
showNulls: this.showNulls,
|
||||
},
|
||||
// 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'),
|
||||
})
|
||||
},
|
||||
setShowOverdue(show) {
|
||||
this.$router.push({
|
||||
name: this.$route.name,
|
||||
query: {
|
||||
...this.$route.query,
|
||||
showOverdue: show,
|
||||
},
|
||||
})
|
||||
},
|
||||
setShowNulls(show) {
|
||||
this.$router.push({
|
||||
name: this.$route.name,
|
||||
query: {
|
||||
...this.$route.query,
|
||||
showNulls: show,
|
||||
},
|
||||
})
|
||||
},
|
||||
async loadPendingTasks() {
|
||||
// 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 (!this.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: this.showNulls,
|
||||
}
|
||||
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.
|
||||
|
||||
if (!this.showAll) {
|
||||
params.filter_by.push('due_date')
|
||||
params.filter_value.push(this.dateTo)
|
||||
params.filter_comparator.push('less')
|
||||
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)
|
||||
|
||||
// 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'.
|
||||
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')
|
||||
|
||||
if (!this.showOverdue) {
|
||||
params.filter_by.push('due_date')
|
||||
params.filter_value.push(this.dateFrom)
|
||||
params.filter_comparator.push('greater')
|
||||
}
|
||||
}
|
||||
|
||||
this.tasks = await this.$store.dispatch('tasks/loadTasks', params)
|
||||
},
|
||||
|
||||
// FIXME: this modification should happen in the store
|
||||
updateTasks(updatedTask) {
|
||||
for (const t in this.tasks) {
|
||||
if (this.tasks[t].id === updatedTask.id) {
|
||||
this.tasks[t] = updatedTask
|
||||
// Move the task to the end of the done tasks if it is now done
|
||||
if (updatedTask.done) {
|
||||
this.tasks.splice(t, 1)
|
||||
this.tasks.push(updatedTask)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
interface dateStrings {
|
||||
from: string,
|
||||
to: string,
|
||||
}
|
||||
|
||||
function setDate({from, to}: dateStrings) {
|
||||
router.push({
|
||||
name: route.name as string,
|
||||
query: {
|
||||
from: from ?? dateFrom,
|
||||
to: to ?? dateTo,
|
||||
showOverdue: showOverdue.value ? 'true' : 'false',
|
||||
showNulls: showNulls.value ? 'true' : 'false',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function setShowOverdue(show: boolean) {
|
||||
router.push({
|
||||
name: route.name as string,
|
||||
query: {
|
||||
...route.query,
|
||||
showOverdue: show ? 'true' : 'false',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function setShowNulls(show: boolean) {
|
||||
router.push({
|
||||
name: route.name as string,
|
||||
query: {
|
||||
...route.query,
|
||||
showNulls: show ? 'true' : 'false',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function loadPendingTasks(from:string, to:string) {
|
||||
// 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')
|
||||
}
|
||||
}
|
||||
|
||||
tasks.value = await store.dispatch('tasks/loadTasks', params)
|
||||
}
|
||||
|
||||
// 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)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => loadPendingTasks(dateFrom.value as string, dateTo.value as string))
|
||||
// loadPendingTasks()
|
||||
watchEffect(() => setTitle(pageTitle))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in a new issue