Add deferring task's due dates directly from the overview (#199)

Make the defer popup responsible

Add buttons to defer by 1/3/7 days

Add updating due date

Add update method

Add component to defer the due date from the task overview

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/199

src/components/tasks/partials/defer-task.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="defer-task loading-container" :class="{'is-loading': taskService.loading}">
+		<label class="label">Defer due date</label>
+		<div class="defer-days">
+			<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(1)">1 day</button>
+			<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(3)">3 days</button>
+			<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(7)">1 week</button>
+		</div>
+		<flat-pickr
+				:class="{ 'disabled': taskService.loading}"
+				class="input"
+				:disabled="taskService.loading"
+				v-model="dueDate"
+				:config="flatPickerConfig"
+		/>
+	</div>
+</template>
+
+<script>
+	import TaskService from '../../../services/task'
+	import flatPickr from 'vue-flatpickr-component'
+
+	export default {
+		name: 'defer-task',
+		data() {
+			return {
+				taskService: TaskService,
+				task: null,
+				// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
+				dueDate: null,
+				lastValue: null,
+				changeInterval: null,
+
+				flatPickerConfig: {
+					altFormat: 'j M Y H:i',
+					altInput: true,
+					dateFormat: 'Y-m-d H:i',
+					enableTime: true,
+					time_24hr: true,
+					inline: true,
+				},
+			}
+		},
+		components: {
+			flatPickr,
+		},
+		props: {
+			value: {
+				required: true,
+			}
+		},
+		created() {
+			this.taskService = new TaskService()
+		},
+		mounted() {
+			this.task = this.value
+			this.dueDate = this.task.dueDate
+			this.lastValue = this.dueDate
+
+			// Because we don't really have other ways of handling change since if we let flatpickr
+			// change events trigger updates, it would trigger a flatpickr change event which would trigger
+			// an update which would trigger a change event and so on...
+			// This is either a bug in flatpickr or in the vue component of it.
+			// To work around that, we're only updating if something changed and check each second and when closing the popup.
+			if (this.changeInterval) {
+				clearInterval(this.changeInterval)
+			}
+
+			this.changeInterval = setInterval(this.updateDueDate, 1000)
+		},
+		beforeDestroy() {
+			if (this.changeInterval) {
+				clearInterval(this.changeInterval)
+			}
+			this.updateDueDate()
+		},
+		watch: {
+			value(newVal) {
+				this.task = newVal
+				this.dueDate = this.task.dueDate
+				this.lastValue = this.dueDate
+			},
+		},
+		methods: {
+			deferDays(days) {
+				this.dueDate = new Date(this.dueDate)
+				this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
+				this.updateDueDate()
+			},
+			updateDueDate() {
+				if (!this.dueDate) {
+					return
+				}
+
+				if (+new Date(this.dueDate) === +this.lastValue) {
+					return
+				}
+
+				this.task.dueDate = new Date(this.dueDate)
+				this.taskService.update(this.task)
+					.then(r => {
+						this.lastValue = r.dueDate
+						this.task = r
+						this.$emit('input', r)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+		},
+	}
+</script>

src/components/tasks/partials/singleTaskInList.vue

@@ -1,8 +1,8 @@
 <template>
 	<span>
 		<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived"/>
-		<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }" class="tasktext"  :class="{ 'done': task.done}">
-
+		<span class="tasktext" :class="{ 'done': task.done}">
+			<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
 				<router-link
 						v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
 						v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
@@ -19,6 +19,8 @@
 					>
 				</span>
 				{{ task.title }}
+			</router-link>
+
 			<labels :labels="task.labels"/>
 			<user
 					:user="a"
@@ -28,11 +30,19 @@
 					v-for="(a, i) in task.assignees"
 					:key="task.id + 'assignee' + a.id + i"
 			/>
-			<i v-if="task.dueDate > 0"
+			<i
+					v-if="+new Date(task.dueDate) > 0"
 					:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				v-tooltip="formatDate(task.dueDate)"> - Due {{formatDateSince(task.dueDate)}}</i>
+					v-tooltip="formatDate(task.dueDate)"
+					@click.stop="showDefer = !showDefer"
+			>
+				- Due {{formatDateSince(task.dueDate)}}
+			</i>
+			<transition name="fade">
+				<defer-task v-model="task" v-if="+new Date(task.dueDate) > 0 && showDefer"/>
+			</transition>
 			<priority-label :priority="task.priority"/>
-		</router-link>
+		</span>
 	</span>
 </template>
 
@@ -43,6 +53,7 @@
 	import Labels from './labels'
 	import User from '../../misc/user'
 	import Fancycheckbox from '../../input/fancycheckbox'
+	import DeferTask from './defer-task'
 
 	export default {
 		name: 'singleTaskInList',
@@ -50,9 +61,11 @@
 			return {
 				taskService: TaskService,
 				task: TaskModel,
+				showDefer: false,
 			}
 		},
 		components: {
+			DeferTask,
 			Fancycheckbox,
 			User,
 			Labels,

src/styles/components/tasks.scss

@@ -192,3 +192,53 @@
     margin-left: calc(40% - 1em);
   }
 }
+
+.defer-task {
+  $defer-task-max-width: 350px;
+
+  position: absolute;
+  width: 100%;
+  max-width: $defer-task-max-width;
+  border-radius: $radius;
+  border: 1px solid $grey-lighter;
+  padding: 1rem;
+  margin: 1rem;
+  background: $white;
+  color: $text;
+  cursor: default;
+  z-index: 10;
+
+  input.input {
+    display: none;
+  }
+
+  .flatpickr-calendar {
+    margin: 0 auto;
+    box-shadow: none;
+
+    span {
+      width: auto !important;
+    }
+  }
+
+  .defer-days {
+    justify-content: space-between;
+    display: flex;
+    margin: .5rem 0;
+  }
+
+  @media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
+    left: .5rem;
+    right: .5rem;
+    max-width: 100%;
+    width: calc(100vw - 1rem - 2rem);
+
+    .flatpickr-calendar {
+      max-width: 100%;
+
+      .flatpickr-innerContainer {
+        overflow: scroll;
+      }
+    }
+  }
+}

src/styles/theme/form.scss

@@ -54,6 +54,10 @@
     }
   }
 
+  &.is-primary.is-outlined:hover {
+    color: $white;
+  }
+
   &.noshadow{
     &,
     &.is-hovered,