Restructure components

src/views/tasks/ShowTasksInRange.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="content has-text-centered">
+		<ShowTasks
+			:start-date="startDate"
+			:end-date="endDate"
+		/>
+	</div>
+</template>
+
+<script>
+	import ShowTasks from './ShowTasks'
+
+	export default {
+		name: 'ShowTasksInRange',
+		components: {
+			ShowTasks,
+		},
+		data() {
+			return {
+				startDate: new Date(this.$route.params.startDateUnix),
+				endDate: new Date(this.$route.params.endDateUnix),
+			}
+		},
+		watch: {
+			// call again the method if the route changes
+			'$route': 'setDates'
+		},
+		created() {
+			this.setDates();
+		},
+		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;
+				}
+			}
+		}
+	}
+</script>