From 2a884dfd4539deba556e2c8dd0728d77fcf4d524 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 9 Jan 2022 14:21:33 +0100
Subject: [PATCH] fix: now correctly showing the title of predefined ranges

---
 src/components/date/dateRanges.ts           | 10 ++++++++++
 src/components/date/datepickerWithRange.vue | 17 ++++-------------
 src/views/tasks/ShowTasks.vue               | 20 ++++++++++++++------
 3 files changed, 28 insertions(+), 19 deletions(-)
 create mode 100644 src/components/date/dateRanges.ts

diff --git a/src/components/date/dateRanges.ts b/src/components/date/dateRanges.ts
new file mode 100644
index 000000000..c33d04262
--- /dev/null
+++ b/src/components/date/dateRanges.ts
@@ -0,0 +1,10 @@
+// TODO: more ranges!
+export const dateRanges = {
+	'task.show.today': ['now/d', 'now/d+1d'],
+	'task.show.thisWeek': ['now/w', 'now/w+1w'],
+	'task.show.nextWeek': ['now/w+1w', 'now/w+2w'],
+	'task.show.next7Days': ['now', 'now+7d'],
+	'task.show.thisMonth': ['now/M', 'now/M+1M'],
+	'task.show.nextMonth': ['now/M+1M', 'now/M+2M'],
+	'task.show.next30Days': ['now', 'now+30d'],
+}
diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index a5aec3f98..d81d02c54 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -57,11 +57,12 @@
 <script lang="ts" setup>
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
-import {computed, Ref, ref, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {store} from '@/store'
-import {format} from 'date-fns'
-import Popup from '@/components/misc/popup'
+import Popup from '@/components/misc/popup.vue'
+
+import {dateRanges} from '@/components/date/dateRanges'
 
 const {t} = useI18n()
 
@@ -133,16 +134,6 @@ function setDateRange(range: string[] | null) {
 	inputChanged()
 }
 
-const dateRanges = {
-	'task.show.today': ['now/d', 'now/d+1d'],
-	'task.show.thisWeek': ['now/w', 'now/w+1w'],
-	'task.show.nextWeek': ['now/w+1w', 'now/w+2w'],
-	'task.show.next7Days': ['now', 'now+7d'],
-	'task.show.thisMonth': ['now/M', 'now/M+1M'],
-	'task.show.nextMonth': ['now/M+1M', 'now/M+2M'],
-	'task.show.next30Days': ['now', 'now+30d'],
-}
-
 const customRangeActive = computed<Boolean>(() => {
 	return !Object.values(dateRanges).some(el => from.value === el[0] && to.value === el[1])
 })
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index a70d9744e..17e7dcb38 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -38,6 +38,7 @@
 	</div>
 </template>
 <script>
+import {dateRanges} from '@/components/date/dateRanges'
 import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
 import {mapState} from 'vuex'
 
@@ -104,12 +105,19 @@ export default {
 			return this.$route.query.showOverdue === 'true'
 		},
 		pageTitle() {
-			const 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'),
-				})
+			let title = ''
+
+			const predefinedRange = Object.entries(dateRanges).find(([key, value]) => this.dateFrom === value[0] && this.dateTo === value[1])
+			if (typeof predefinedRange !== 'undefined') {
+				title = this.$t(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'),
+					})
+			}
 
 			this.setTitle(title)