Add options to show tasks in range on the overview pages

src/styles/components/tasks.scss

@@ -167,3 +167,28 @@
     }
   }
 }
+
+.show-tasks {
+  h3 {
+    text-align: left;
+
+    &.nothing {
+      text-align: center;
+      margin-top: 3em;
+    }
+
+    .input {
+      width: 190px;
+      vertical-align: middle;
+      margin: .5rem 0;
+    }
+  }
+
+  img {
+    margin-top: 2em;
+  }
+
+  .spinner.is-loading:after {
+    margin-left: calc(40% - 1em);
+  }
+}

src/views/tasks/ShowTasks.vue

@@ -1,7 +1,26 @@
 <template>
-	<div class="is-max-width-desktop">
+	<div class="is-max-width-desktop show-tasks">
 		<h3 v-if="showAll">Current tasks</h3>
-		<h3 v-else>Tasks from {{startDate.toLocaleDateString()}} until {{endDate.toLocaleDateString()}}</h3>
+		<h3 v-else>
+			Tasks from
+			<flat-pickr
+					:class="{ 'disabled': taskService.loading}"
+					class="input"
+					:disabled="taskService.loading"
+					v-model="cStartDate"
+					:config="flatPickerConfig"
+					@on-close="loadPendingTasks"
+			/>
+			until
+			<flat-pickr
+					:class="{ 'disabled': taskService.loading}"
+					class="input"
+					:disabled="taskService.loading"
+					v-model="cEndDate"
+					:config="flatPickerConfig"
+					@on-close="loadPendingTasks"
+			/>
+		</h3>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks)">
 			<h3 class="nothing">Nothing to do - Have a nice day!</h3>
 			<img src="/images/cool.svg" alt=""/>
@@ -20,16 +39,31 @@
 	import {HAS_TASKS} from '../../store/mutation-types'
 	import {mapState} from 'vuex'
 
+	import flatPickr from 'vue-flatpickr-component'
+	import 'flatpickr/dist/flatpickr.css'
+
 	export default {
 		name: 'ShowTasks',
 		components: {
 			SingleTaskInList,
+			flatPickr,
 		},
 		data() {
 			return {
 				tasks: [],
 				hasUndoneTasks: false,
 				taskService: TaskService,
+
+				cStartDate: null,
+				cEndDate: null,
+
+				flatPickerConfig: {
+					altFormat: 'j M Y H:i',
+					altInput: true,
+					dateFormat: 'Y-m-d H:i',
+					enableTime: true,
+					time_24hr: true,
+				},
 			}
 		},
 		props: {
@@ -39,10 +73,18 @@
 		},
 		created() {
 			this.taskService = new TaskService()
+			this.cStartDate = this.startDate
+			this.cEndDate = this.endDate
 			this.loadPendingTasks()
 		},
 		watch: {
 			'$route': 'loadPendingTasks',
+			startDate(newVal) {
+				this.cStartDate = newVal
+			},
+			endDate(newVal) {
+				this.cEndDate = newVal
+			},
 		},
 		computed: mapState({
 			userAuthenticated: state => state.auth.authenticated,
@@ -56,10 +98,14 @@
 					return
 				}
 
+				// Make sure all dates are date objects
+				this.cStartDate = new Date(this.cStartDate)
+				this.cEndDate = new Date(this.cEndDate)
+
 				if (this.showAll) {
 					this.setTitle('Current Tasks')
 				} else {
-					this.setTitle(`Tasks from ${this.startDate.toLocaleDateString()} until ${this.endDate.toLocaleDateString()}`)
+					this.setTitle(`Tasks from ${this.cStartDate.toLocaleDateString()} until ${this.cEndDate.toLocaleDateString()}`)
 				}
 
 				const params = {
@@ -73,16 +119,20 @@
 				}
 				if (!this.showAll) {
 					params.filter_by.push('start_date')
-					params.filter_value.push(this.startDate)
+					params.filter_value.push(this.cStartDate)
 					params.filter_comparator.push('greater')
 
 					params.filter_by.push('end_date')
-					params.filter_value.push(this.endDate)
+					params.filter_value.push(this.cEndDate)
 					params.filter_comparator.push('less')
 
 					params.filter_by.push('due_date')
-					params.filter_value.push(this.endDate)
+					params.filter_value.push(this.cEndDate)
 					params.filter_comparator.push('less')
+
+					params.filter_by.push('due_date')
+					params.filter_value.push(this.cStartDate)
+					params.filter_comparator.push('greater')
 				}
 
 				this.taskService.getAll({}, params)
@@ -130,22 +180,3 @@
 		},
 	}
 </script>
-
-<style scoped>
-	h3 {
-		text-align: left;
-	}
-
-	h3.nothing {
-		text-align: center;
-		margin-top: 3em;
-	}
-
-	img {
-		margin-top: 2em;
-	}
-
-	.spinner.is-loading:after {
-		margin-left: calc(40% - 1em);
-	}
-</style>