feat: add more pre-defined ranges

src/components/date/dateRanges.ts

@@ -1,10 +1,21 @@
-// 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'],
+	// Format: 
+	// Key is the title, as a translation string, the first entry of the value array 
+	// is the "from" date, the second one is the "to" date.
+	'today': ['now/d', 'now/d+1d'],
+
+	'lastWeek': ['now/w-1w', 'now/w-2w'],
+	'thisWeek': ['now/w', 'now/w+1w'],
+	'restOfThisWeek': ['now', 'now/w+1w'],
+	'nextWeek': ['now/w+1w', 'now/w+2w'],
+	'next7Days': ['now', 'now+7d'],
+
+	'lastMonth': ['now/M-1M', 'now/M-2M'],
+	'thisMonth': ['now/M', 'now/M+1M'],
+	'restOfThisMonth': ['now', 'now/M+1M'],
+	'nextMonth': ['now/M+1M', 'now/M+2M'],
+	'next30Days': ['now', 'now+30d'],
+	
+	'thisYear': ['now/y', 'now/y+1y'],
+	'restOfThisYear': ['now', 'now/y+1y'],
 }

src/components/date/datepickerWithRange.vue

@@ -9,15 +9,15 @@
 			<template #content="{isOpen}">
 				<div class="datepicker-with-range" :class="{'is-open': isOpen}">
 					<div class="selections">
+						<button @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
+							{{ $t('misc.custom') }}
+						</button>
 						<button
 							v-for="(value, text) in dateRanges"
 							:key="text"
 							@click="setDateRange(value)"
 							:class="{'is-active': from === value[0] && to === value[1]}">
-							{{ $t(text) }}
-						</button>
-						<button @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
-							{{ $t('misc.custom') }}
+							{{ $t(`input.datepickerRange.ranges.${text}`) }}
 						</button>
 					</div>
 					<div class="flatpickr-container input-group">
@@ -322,6 +322,7 @@ const customRangeActive = computed<Boolean>(() => {
 	display: flex;
 	flex-direction: column;
 	padding-top: .5rem;
+	overflow-y: scroll;
 
 	button {
 		display: block;

src/i18n/lang/en.json

@@ -550,6 +550,24 @@
           "in30Days": "In 30 days",
           "datePlusMonth": "{0} plus one month at 00:00 of that day"
         }
+      },
+      "ranges": {
+        "today": "Today",
+        
+        "thisWeek": "This Week",
+        "restOfThisWeek": "The Rest of This Week",
+        "nextWeek": "Next Week",
+        "next7Days": "Next 7 Days",
+        "lastWeek": "Last Week",
+        
+        "thisMonth": "This Month",
+        "restOfThisMonth": "The Rest of This Month",
+        "nextMonth": "Next Month",
+        "next30Days": "Next 30 Days",
+        "lastMonth": "Last Month",
+        
+        "thisYear": "This Year",
+        "restOfThisYear": "The Rest of This Year"
       }
     }
   },
@@ -571,13 +589,6 @@
       "overdue": "Show overdue tasks",
       "fromuntil": "Tasks from {from} until {until}",
       "select": "Select a date range",
-      "today": "Today",
-      "thisWeek": "This Week",
-      "nextWeek": "Next Week",
-      "next7Days": "Next 7 Days",
-      "thisMonth": "This Month",
-      "nextMonth": "Next Month",
-      "next30Days": "Next 30 Days",
       "noTasks": "Nothing to do — Have a nice day!"
     },
     "detail": {

src/views/tasks/ShowTasks.vue

@@ -109,7 +109,7 @@ export default {
 
 			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])
+				title = this.$t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
 			} else {
 				title = this.showAll
 					? this.$t('task.show.titleCurrent')