From 5d995a275874c1a39d0a0afa044948ac5b32b461 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 22 Nov 2020 18:05:25 +0100
Subject: [PATCH] Move next week/next month task overview pages into a single
 "Upcoming" page and allow toggle

---
 src/components/home/navigation.vue   | 12 ++----------
 src/router/index.js                  |  2 +-
 src/views/tasks/ShowTasks.vue        | 14 ++++++++++++++
 src/views/tasks/ShowTasksInRange.vue | 19 +++++--------------
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index ae8c8ef71..314c194f6 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -14,19 +14,11 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range', params: {type: 'week'}}">
-						<span class="icon">
-							<icon icon="calendar-week"/>
-						</span>
-						Next Week
-					</router-link>
-				</li>
-				<li>
-					<router-link :to="{ name: 'tasks.range', params: {type: 'month'}}">
+					<router-link :to="{ name: 'tasks.range'}">
 						<span class="icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
-						Next Month
+						Upcoming
 					</router-link>
 				</li>
 				<li>
diff --git a/src/router/index.js b/src/router/index.js
index 981bd97f8..ed6e63fcf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -181,7 +181,7 @@ export default new Router({
 			component: TaskDetailView,
 		},
 		{
-			path: '/tasks/by/:type',
+			path: '/tasks/by/upcoming',
 			name: 'tasks.range',
 			component: ShowTasksInRangeComponent,
 		},
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 42855b006..ee18d08b9 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -29,6 +29,10 @@
 				v-model="cEndDate"
 			/>
 		</h3>
+		<div>
+			<a @click="setDatesToNextWeek()" class="button is-primary is-outlined noshadow mr-2">Next Week</a>
+			<a @click="setDatesToNextMonth()" class="button is-primary is-outlined noshadow">Next Month</a>
+		</div>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
 			<h3 class="nothing">Nothing to do - Have a nice day!</h3>
 			<img alt="" src="/images/cool.svg"/>
@@ -181,6 +185,16 @@ export default {
 				}
 			}
 		},
+		setDatesToNextWeek() {
+			this.cStartDate = new Date()
+			this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+			this.loadPendingTasks()
+		},
+		setDatesToNextMonth() {
+			this.cStartDate = new Date()
+			this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
+			this.loadPendingTasks()
+		},
 	},
 }
 </script>
diff --git a/src/views/tasks/ShowTasksInRange.vue b/src/views/tasks/ShowTasksInRange.vue
index 1ed278717..e24e1b454 100644
--- a/src/views/tasks/ShowTasksInRange.vue
+++ b/src/views/tasks/ShowTasksInRange.vue
@@ -22,24 +22,15 @@ export default {
 		}
 	},
 	watch: {
-		// call again the method if the route changes
-		'$route': 'setDates',
+		'$route': 'setDatesToNextWeek',
 	},
 	created() {
-		this.setDates()
+		this.setDatesToNextWeek()
 	},
 	methods: {
-		setDates() {
-			switch (this.$route.params.type) {
-				case 'week':
-					this.startDate = new Date()
-					this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
-					break
-				case 'month':
-					this.startDate = new Date()
-					this.endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
-					break
-			}
+		setDatesToNextWeek() {
+			this.startDate = new Date()
+			this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
 		},
 	},
 }