Add buttons to defer by 1/3/7 days

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

@@ -1,5 +1,11 @@
 <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"
@@ -56,14 +62,14 @@
 			// 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) {
+			if (this.changeInterval) {
 				clearInterval(this.changeInterval)
 			}
 
 			this.changeInterval = setInterval(this.updateDueDate, 1000)
 		},
 		beforeDestroy() {
-			if(this.changeInterval) {
+			if (this.changeInterval) {
 				clearInterval(this.changeInterval)
 			}
 			this.updateDueDate()
@@ -76,12 +82,17 @@
 			},
 		},
 		methods: {
+			deferDays(days) {
+				this.dueDate = new Date(this.dueDate)
+				this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
+				this.updateDueDate()
+			},
 			updateDueDate() {
-				if(!this.dueDate) {
+				if (!this.dueDate) {
 					return
 				}
 
-				if(+new Date(this.dueDate) === +this.lastValue) {
+				if (+new Date(this.dueDate) === +this.lastValue) {
 					return
 				}
 

src/styles/components/tasks.scss

@@ -199,7 +199,7 @@
   max-width: 350px;
   border-radius: $radius;
   border: 1px solid $grey-lighter;
-  padding: .5rem;
+  padding: 1rem;
   margin: 1rem;
   background: $white;
   color: $text;
@@ -217,4 +217,10 @@
       width: auto !important;
     }
   }
+
+  .defer-days {
+    justify-content: space-between;
+    display: flex;
+    margin: .5rem 0;
+  }
 }

src/styles/theme/form.scss

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