feat: add new component for a datepicker with range

src/components/date/datepickerWithRange.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="datepicker-with-range">
+		<div class="selections">
+			<a @click="setDatesToToday">Today</a>
+			<a @click="setDatesToNextWeek">Next Week</a>
+			<a @click="setDatesToNextMonth">Next Month</a>
+			<a>Custom</a>
+		</div>
+		<div class="flatpickr-container">
+			<flat-pickr
+				:config="flatPickerConfig"
+				v-model="dateRange"
+			/>
+			{{ dateRange }}
+		</div>
+	</div>
+</template>
+
+<script setup>
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+import {computed, ref, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {store} from '@/store'
+import {format} from 'date-fns'
+
+const {t} = useI18n()
+
+const emit = defineEmits(['dateChanged'])
+
+const weekStart = computed(() => store.state.auth.settings.weekStart)
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: true,
+	time_24hr: true,
+	inline: true,
+	mode: 'range',
+	locale: {
+		// FIXME: This seems to always contain the default value
+		firstDayOfWeek: weekStart,
+	},
+}))
+
+const dateRange = ref('')
+
+watch(
+	() => dateRange.value,
+	newVal => {
+		const [fromDate, toDate] = newVal.split(' to ')
+		
+		if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
+			return
+		}
+		
+		emit('dateChanged', {
+			dateFrom: new Date(fromDate),
+			dateTo: new Date(toDate),
+		})
+	}
+)
+
+function formatDate(date) {
+	return format(date, 'yyyy-MM-dd HH:mm')
+}
+
+function setDatesToToday() {
+	const startDate = new Date()
+	const endDate = new Date((new Date()).setDate((new Date()).getDate() + 1))
+	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+}
+
+function setDatesToNextWeek() {
+	const startDate = new Date()
+	const endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+}
+
+function setDatesToNextMonth() {
+	const startDate = new Date()
+	const endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
+	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+}
+</script>
+
+<style lang="scss" scoped>
+.datepicker-with-range {
+	border-radius: $radius;
+	border: 1px solid var(--grey-200);
+	background-color: var(--white);
+	box-shadow: $shadow;
+	display: flex;
+	width: 500px;
+
+	:deep(.flatpickr-calendar) {
+		margin: 0 auto 8px;
+		box-shadow: none;
+	}
+}
+
+.flatpickr-container {
+	width: 70%;
+	border-left: 1px solid var(--grey-200);
+
+	:deep(input.input) {
+		display: none;
+	}
+}
+
+.selections {
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+
+	a {
+		display: block;
+		width: 100%;
+		text-align: left;
+		padding: .5rem 1rem;
+		transition: $transition;
+		font-size: .9rem;
+		color: var(--text);
+
+		&.active {
+			color: var(--primary);
+		}
+
+		&:hover, &.active {
+			background-color: var(--grey-100);
+		}
+	}
+}
+</style>

src/views/tasks/ShowTasks.vue

@@ -12,7 +12,7 @@
 			{{ pageTitle }}
 		</h3>
 		<!-- FIXME: Styling, maybe in combination with the buttons? -->
-		<p class="is-flex" v-if="!showAll">
+		<p v-if="!showAll">
 			{{ $t('task.show.select') }}
 			<flat-pickr
 				:class="{ 'disabled': loading}"
@@ -21,6 +21,7 @@
 				@on-close="setDate"
 				v-model="dateRange"
 			/>
+			<datepicker-with-range @dateChanged="setDate"/>
 		</p>
 		<div v-if="!showAll" class="mb-4 mt-2">
 			<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">
@@ -62,6 +63,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 import LlamaCool from '@/assets/llama-cool.svg?component'
+import DatepickerWithRange from '@/components/date/datepickerWithRange'
 
 function formatDate(date) {
 	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
@@ -70,6 +72,7 @@ function formatDate(date) {
 export default {
 	name: 'ShowTasks',
 	components: {
+		DatepickerWithRange,
 		Fancycheckbox,
 		SingleTaskInList,
 		flatPickr,
@@ -81,6 +84,7 @@ export default {
 			showNulls: true,
 			showOverdue: false,
 
+			// TODO: Set the date range based on the default (to make sure it shows up in the picker)  -> maybe also use a computed which depends on dateFrom and dateTo?
 			dateRange: null,
 
 			showNothingToDo: false,
@@ -150,18 +154,12 @@ export default {
 		}),
 	},
 	methods: {
-		setDate() {
+		setDate({dateFrom, dateTo}) {
-			if (this.dateRange === null) {
-				return
-			}
-
-			const [fromDate, toDate] = this.dateRange.split(' to ')
-
 			this.$router.push({
 				name: this.$route.name,
 				query: {
-					from: +new Date(fromDate),
+					from: +new Date(dateFrom),
-					to: +new Date(toDate),
+					to: +new Date(dateTo),
 					showOverdue: this.showOverdue,
 					showNulls: this.showNulls,
 				},