Move next week/next month task overview pages into a single "Upcoming" page and allow toggle

src/components/home/navigation.vue

@@ -14,19 +14,11 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range', params: {type: 'week'}}">
+					<router-link :to="{ name: 'tasks.range'}">
-						<span class="icon">
-							<icon icon="calendar-week"/>
-						</span>
-						Next Week
-					</router-link>
-				</li>
-				<li>
-					<router-link :to="{ name: 'tasks.range', params: {type: 'month'}}">
 						<span class="icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
-						Next Month
+						Upcoming
 					</router-link>
 				</li>
 				<li>

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,
 		},

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>

src/views/tasks/ShowTasksInRange.vue

@@ -22,24 +22,15 @@ export default {
 		}
 	},
 	watch: {
-		// call again the method if the route changes
+		'$route': 'setDatesToNextWeek',
-		'$route': 'setDates',
 	},
 	created() {
-		this.setDates()
+		this.setDatesToNextWeek()
 	},
 	methods: {
-		setDates() {
+		setDatesToNextWeek() {
-			switch (this.$route.params.type) {
+			this.startDate = new Date()
-				case 'week':
+			this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
-					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
-			}
 		},
 	},
 }