src/components/date/datemathHelp.vue

@@ -1,6 +1,7 @@
 <template>
-	<card class="has-no-shadow how-it-works-modal"
-		  :title="$t('input.datepickerRange.math.title')">
+	<card
+		class="has-no-shadow how-it-works-modal"
+		:title="$t('input.datepickerRange.math.title')">
 		<p>
 			{{ $t('input.datepickerRange.math.intro') }}
 		</p>
@@ -12,12 +13,14 @@
 		</p>
 		<p>
 			<i18n-t keypath="input.datepickerRange.math.similar">
-				<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
-				   rel="noreferrer noopener nofollow" target="_blank">
+				<a
+					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
+					rel="noreferrer noopener nofollow" target="_blank">
 					Grafana
 				</a>
-				<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
-				   rel="noreferrer noopener nofollow" target="_blank">
+				<a
+					href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
+					rel="noreferrer noopener nofollow" target="_blank">
 					Elasticsearch
 				</a>
 			</i18n-t>

src/router/index.ts

@@ -256,7 +256,7 @@ const router = createRouter({
 				dateTo: parseDateOrString(route.query.to, getNextWeekDate()),
 				showNulls: route.query.showNulls === 'true',
 				showOverdue: route.query.showOverdue === 'true',
-			})
+			}),
 		},
 		{
 			path: '/lists/new/:namespaceId/',

src/views/tasks/ShowTasks.vue

@@ -5,7 +5,7 @@
 		</h3>
 		<p v-if="!showAll" class="show-tasks-options">
 			<datepicker-with-range @dateChanged="setDate">
-				<template #trigger="{toggle, buttonText}">
+				<template #trigger="{toggle}">
 					<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
 						{{ $t('task.show.select') }}
 					</x-button>
@@ -46,8 +46,7 @@
 
 <script setup lang="ts">
 import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
-import {parseDateOrString} from '@/helpers/time/parseDateOrString'
-import {mapState, useStore} from 'vuex'
+import {useStore} from 'vuex'
 import {computed, ref, watchEffect} from 'vue'
 
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
@@ -73,6 +72,8 @@ const showNothingToDo = ref<boolean>(false)
 setTimeout(() => showNothingToDo.value = true, 100)
 
 // NOTE: You MUST provide either dateFrom and dateTo OR showAll for the component to actually show tasks.
+// Linting disabled because we explicitely enabled destructuring in vite's config, this will work.
+// eslint-disable-next-line vue/no-setup-props-destructure
 const {
 	dateFrom,
 	dateTo,
@@ -128,7 +129,7 @@ const tasksSorted = computed(() => {
 		...tasksWithoutDueDate,
 	]
 })
-const hasTasks = computed(() => tasks && tasks.value.length > 0)
+const hasTasks = computed(() => tasks.value && tasks.value.length > 0)
 const userAuthenticated = computed(() => store.state.auth.authenticated)
 const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
 
@@ -173,7 +174,7 @@ 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) {
+	if (!userAuthenticated.value) {
 		return
 	}