chore: convert ShowTasks component to script setup and ts

src/helpers/time/parseDateOrString.ts

@@ -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
 	}

src/views/tasks/ShowTasks.vue

@@ -37,92 +37,73 @@
 		<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 {
+const store = useStore()
-	name: 'ShowTasks',
+const route = useRoute()
-	components: {
+const router = useRouter()
-		DatepickerWithRange,
+const {t} = useI18n()
-		Fancycheckbox,
+
-		SingleTaskInList,
+const tasks = ref<TaskModel[]>([])
-		LlamaCool,
+const showNothingToDo = ref<boolean>(false)
-	},
+
-	data() {
+setTimeout(() => showNothingToDo.value = true, 100)
-		return {
+
-			tasks: [],
+const props = defineProps({
-			showNothingToDo: false,
-		}
-	},
-	props: {
 	showAll: Boolean,
-	},
+})
-	created() {
+
-		this.loadPendingTasks()
+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()))
-	mounted() {
+const showNulls = computed(() => route.query.showNulls === 'true')
-		setTimeout(() => this.showNothingToDo = true, 100)
+const showOverdue = computed(() => route.query.showOverdue === 'true')
-	},
+const pageTitle = computed(() => {
-	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 = ''
 
 	// 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])
+	const predefinedRange = Object.entries(dateRanges).find(([key, value]) => dateFrom.value === value[0] && dateTo.value === value[1])
 	if (typeof predefinedRange !== 'undefined') {
-				title = this.$t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
+		title = t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
 	} else {
-				title = this.showAll
+		title = props.showAll
-					? this.$t('task.show.titleCurrent')
+			? t('task.show.titleCurrent')
-					: this.$t('task.show.fromuntil', {
+			: t('task.show.fromuntil', {
-						from: this.format(this.dateFrom, 'PPP'),
+				from: formatDate(dateFrom.value, 'PPP'),
-						until: this.format(this.dateTo, 'PPP'),
+				until: formatDate(dateTo.value, 'PPP'),
 			})
 	}
 
-			this.setTitle(title)
-
 	return title
-		},
+})
-		tasksSorted() {
+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 = [...this.tasks]
+	const tasksWithDueDate = [...tasks.value]
 		.filter(t => t.dueDate !== null)
 		.sort((a, b) => {
 			const sortByDueDate = a.dueDate - b.dueDate
@@ -130,57 +111,60 @@ export default {
 				? b.id - a.id
 				: sortByDueDate
 		})
-			const tasksWithoutDueDate = [...this.tasks]
+	const tasksWithoutDueDate = [...tasks.value]
 		.filter(t => t.dueDate === null)
 
 	return [
 		...tasksWithDueDate,
 		...tasksWithoutDueDate,
 	]
-		},
+})
-		hasTasks() {
+const hasTasks = computed(() => tasks && tasks.value.length > 0)
-			return this.tasks && this.tasks.length > 0
+const userAuthenticated = computed(() => store.state.auth.authenticated)
-		},
+const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
-		...mapState({
+
-			userAuthenticated: state => state.auth.authenticated,
+interface dateStrings {
-			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
+	from: string,
-		}),
+	to: string,
-	},
+}
-	methods: {
+
-		setDate({dateFrom, dateTo}) {
+function setDate({from, to}: dateStrings) {
-			this.$router.push({
+	router.push({
-				name: this.$route.name,
+		name: route.name as string,
 		query: {
-					from: dateFrom ?? this.dateFrom,
+			from: from ?? dateFrom,
-					to: dateTo ?? this.dateTo,
+			to: to ?? dateTo,
-					showOverdue: this.showOverdue,
+			showOverdue: showOverdue.value ? 'true' : 'false',
-					showNulls: this.showNulls,
+			showNulls: showNulls.value ? 'true' : 'false',
 		},
 	})
-		},
+}
-		setShowOverdue(show) {
+
-			this.$router.push({
+function setShowOverdue(show: boolean) {
-				name: this.$route.name,
+	router.push({
+		name: route.name as string,
 		query: {
-					...this.$route.query,
+			...route.query,
-					showOverdue: show,
+			showOverdue: show ? 'true' : 'false',
 		},
 	})
-		},
+}
-		setShowNulls(show) {
+
-			this.$router.push({
+function setShowNulls(show: boolean) {
-				name: this.$route.name,
+	router.push({
+		name: route.name as string,
 		query: {
-					...this.$route.query,
+			...route.query,
-					showNulls: show,
+			showNulls: show ? 'true' : 'false',
 		},
 	})
-		},
+}
-		async loadPendingTasks() {
+
+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 (!this.userAuthenticated) {
+	if (!userAuthenticated) {
 		return
 	}
 
@@ -188,46 +172,48 @@ export default {
 		sort_by: ['due_date', 'id'],
 		order_by: ['desc', 'desc'],
 		filter_by: ['done'],
-				filter_value: [false],
+		filter_value: ['false'],
 		filter_comparator: ['equals'],
 		filter_concat: 'and',
-				filter_include_nulls: this.showNulls,
+		filter_include_nulls: showNulls.value,
 	}
 
-			if (!this.showAll) {
+	if (!props.showAll) {
 		params.filter_by.push('due_date')
-				params.filter_value.push(this.dateTo)
+		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 (!this.showOverdue) {
+		if (!showOverdue.value) {
 			params.filter_by.push('due_date')
-					params.filter_value.push(this.dateFrom)
+			params.filter_value.push(from)
 			params.filter_comparator.push('greater')
 		}
 	}
 
-			this.tasks = await this.$store.dispatch('tasks/loadTasks', params)
+	tasks.value = await store.dispatch('tasks/loadTasks', params)
-		},
+}
 
-		// FIXME: this modification should happen in the store
+// FIXME: this modification should happen in the store
-		updateTasks(updatedTask) {
+function updateTasks(updatedTask) {
-			for (const t in this.tasks) {
+	for (const t in tasks.value) {
-				if (this.tasks[t].id === updatedTask.id) {
+		if (tasks.value[t].id === updatedTask.id) {
-					this.tasks[t] = updatedTask
+			tasks.value[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)
+				tasks.value.splice(t, 1)
-						this.tasks.push(updatedTask)
+				tasks.value.push(updatedTask)
 			}
 			break
 		}
 	}
-		},
-	},
 }
+
+watchEffect(() => loadPendingTasks(dateFrom.value as string, dateTo.value as string))
+// loadPendingTasks()
+watchEffect(() => setTitle(pageTitle))
 </script>
 
 <style lang="scss" scoped>