chore: cleanup and reorganize the date selection

# Conflicts:
#	src/views/tasks/ShowTasks.vue

@@ -0,0 +1,12 @@
+export function parseDateOrString(rawValue: string, fallback: any) {

@@ -0,0 +3,4 @@
+		<popup>
+			<template #trigger="{toggle}">
+				<slot name="trigger" :toggle="toggle">
+					<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">

@@ -0,0 +11,4 @@
+			<template #content="{isOpen}">
+				<div class="datepicker-with-range" :class="{'is-open': isOpen}">
+					<div class="selections">
+						<button @click="setDateRange(null)" :class="{'is-active': customRangeActive}">

@@ -0,0 +14,4 @@
+						<button @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
+							{{ $t('misc.custom') }}
+						</button>
+						<button

@@ -0,0 +27,4 @@
+							{{ $t('input.datepickerRange.from') }}
+							<div class="field has-addons">
+								<div class="control is-fullwidth">
+									<input class="input" type="text" v-model="from" @change="inputChanged"/>

@@ -0,0 +52,4 @@
+
+						<p>
+							{{ $t('input.datepickerRange.math.canuse') }}
+							<a @click="showHowItWorks = true">{{ $t('input.datepickerRange.math.learnhow') }}</a>.

@@ -0,0 +73,4 @@
+									</i18n-t>
+								</p>
+								<p>
+									<i18n-t keypath="input.datepickerRange.math.similar">

@@ -0,0 +62,4 @@
+							:overflow="true"
+							variant="hint-modal"
+						>
+							<card class="has-no-shadow how-it-works-modal" :title="$t('input.datepickerRange.math.title')">

@@ -0,0 +173,4 @@
+</template>
+
+<script lang="ts" setup>
+import flatPickr from 'vue-flatpickr-component'

@@ -0,0 +177,4 @@
+import 'flatpickr/dist/flatpickr.css'
+import {computed, ref, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {store} from '@/store'

@@ -0,0 +1,21 @@
+export const dateRanges = {

@@ -0,0 +213,4 @@
+
+const flatpickrRange = ref('')
+
+const from = ref('')

@@ -0,0 +263,4 @@
+	inputChanged()
+}
+
+const customRangeActive = computed<Boolean>(() => {

@@ -0,0 +283,4 @@
+.datepicker-with-range-container {
+	position: relative;
+
+	:deep(.popup) {

@@ -0,0 +304,4 @@
+	height: 100%;
+	position: absolute;
+
+	:deep(.flatpickr-calendar) {

@@ -0,0 +370,4 @@
+	font-size: 1rem;
+	
+	p {
+		display: inline-block !important;

@@ -87,4 +68,3 @@
 		}
 	},
 	props: {
-		startDate: Date,

@@ -123,2 +86,2 @@
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
-				},
+		dateFrom() {
+			return parseDateOrString(this.$route.query.from, new Date())

@@ -125,1 +112,4 @@
+					})
 			}
+
+			this.setTitle(title)

@@ -213,3 +212,1 @@
-					? b.id - a.id
-					: sortByDueDate
-			})
+			this.tasks = await this.$store.dispatch('tasks/loadTasks', params)

@@ -0,0 +194,4 @@
+	},
+})
+
+// FIXME: This seems to always contain the default value - that breaks the picker

@@ -175,15 +151,14 @@
 </template>
 
 <script>

@@ -0,0 +2,4 @@
+	<div class="datepicker-with-range-container">
+		<popup>
+			<template #trigger="{toggle}">
+				<slot name="trigger" :toggle="toggle">

@@ -0,0 +188,4 @@
+const emit = defineEmits(['dateChanged'])
+
+const props = defineProps({
+	showSelectedOnButton: {

@@ -0,0 +217,4 @@
+const to = ref('')
+
+function emitChanged() {
+	emit('dateChanged', {

@@ -0,0 +13,4 @@
+		</p>
+		<p>
+			<i18n-t keypath="input.datepickerRange.math.similar">
+				<a

@@ -0,0 +18,4 @@
+					rel="noreferrer noopener nofollow" target="_blank">
+					Grafana
+				</a>
+				<a

@@ -0,0 +116,4 @@
+}
+
+function inputChanged() {
+	flatpickrRange.value = ''

@@ -0,0 +117,4 @@
+
+function inputChanged() {
+	flatpickrRange.value = ''
+	emitChanged()

@@ -0,0 +136,4 @@
+		from.value = fromDate
+		to.value = toDate
+
+		emitChanged()

@@ -0,0 +155,4 @@
+}
+
+const customRangeActive = computed<boolean>(() => {
+	return !Object.values(DATE_RANGES).some(el => from.value === el[0] && to.value === el[1])

@@ -0,0 +257,4 @@
+	}
+}
+
+.how-it-works-modal {

@@ -46,2 +46,4 @@
 export function objectToSnakeCase(object) {
 
+	if (object instanceof Date) {
+		return object.toISOString()

@@ -0,0 +15,4 @@
+			<i18n-t keypath="input.datepickerRange.math.similar">
+				<BaseButton
+					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
+					rel="noreferrer noopener nofollow" target="_blank">

@@ -0,0 +3,4 @@
+		class="has-no-shadow how-it-works-modal"
+		:title="$t('input.datepickerRange.math.title')">
+		<p>
+			{{ $t('input.datepickerRange.math.intro') }}

@@ -530,3 +500,2 @@
 		},
-		setReminderFilter() {
-			this.setDateFilter('reminders')
+		setDueDateFilter(values) {

@@ -142,0 +72,4 @@
+
+setTimeout(() => showNothingToDo.value = true, 100)
+
+// NOTE: You MUST provide either dateFrom and dateTo OR showAll for the component to actually show tasks.

@@ -142,0 +94,4 @@
+
+	// 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(DATE_RANGES).find(([key, value]) => dateFrom === value[0] && dateTo === value[1])

@@ -142,0 +95,4 @@
+	// 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(DATE_RANGES).find(([key, value]) => dateFrom === value[0] && dateTo === value[1])
+	if (typeof predefinedRange !== 'undefined') {

@@ -216,0 +145,4 @@
+		query: {
+			from: dates.dateFrom ?? dateFrom,
+			to: dates.dateTo ?? dateTo,
+			showOverdue: showOverdue ? 'true' : 'false',

@@ -245,3 +174,1 @@
-			this.showOverdue = false
-			this.setDate()
-		},
+async function loadPendingTasks(from: string, to: string) {