Add repeating tasks from current date setting

src/components/tasks/TaskDetailView.vue

@@ -142,7 +142,10 @@
 								<icon :icon="['far', 'clock']"/>
 								Repeat
 							</div>
-							<repeat-after v-model="task.repeatAfter" @change="saveTask" ref="repeatAfter"/>
+							<repeat-after
+									v-model="task"
+									@change="saveTask"
+									ref="repeatAfter"/>
 						</div>
 					</div>
 
@@ -393,14 +396,14 @@
 		},
 		computed: {
 			parent() {
-				if(!this.task.listId) {
+				if (!this.task.listId) {
 					return {
 						namespace: null,
 						list: null,
 					}
 				}
 
-				if(!this.$store.getters["namespaces/getListAndNamespaceById"]) {
+				if (!this.$store.getters["namespaces/getListAndNamespaceById"]) {
 					return null
 				}
 

src/components/tasks/reusable/repeatAfter.vue

@@ -1,61 +1,93 @@
 <template>
 	<div class="control repeat-after-input columns">
-		<div class="column">
+		<p class="column is-1">
-			<p>
+			Each
-				Each
+		</p>
-			</p>
+		<div class="column is-7 field has-addons">
-		</div>
+			<div class="control">
-		<div class="column is-two-fifths">
+				<input
-			<input class="input" placeholder="Specify an amount..." v-model="repeatAfter.amount" @change="updateData"/>
+						class="input"
-		</div>
+						placeholder="Specify an amount..."
-		<div class="column is-two-fifths">
+						v-model="repeatAfter.amount"
-			<div class="select">
+						@change="updateData"/>
-				<select v-model="repeatAfter.type" @change="updateData">
+			</div>
-					<option value="hours">Hours</option>
+			<div class="control">
-					<option value="days">Days</option>
+				<div class="select">
-					<option value="weeks">Weeks</option>
+					<select v-model="repeatAfter.type" @change="updateData">
-					<option value="months">Months</option>
+						<option value="hours">Hours</option>
-					<option value="years">Years</option>
+						<option value="days">Days</option>
-				</select>
+						<option value="weeks">Weeks</option>
+						<option value="months">Months</option>
+						<option value="years">Years</option>
+					</select>
+				</div>
 			</div>
 		</div>
+		<fancycheckbox
+				class="column"
+				@change="updateData"
+				v-model="task.repeatFromCurrentDate"
+				v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
+		>
+			Repeat from current date
+		</fancycheckbox>
 	</div>
-
 </template>
 
 <script>
+	import Fancycheckbox from '../../global/fancycheckbox'
+
 	export default {
 		name: 'repeatAfter',
+		components: {Fancycheckbox},
 		data() {
 			return {
+				task: {},
 				repeatAfter: {},
 			}
 		},
 		props: {
 			value: {
-				default: () => {},
+				default: () => {
+				},
 				required: true,
 			}
 		},
 		watch: {
 			value(newVal) {
-				this.repeatAfter = newVal
+				this.task = newVal
+				this.repeatAfter = newVal.repeatAfter
 			},
 		},
 		mounted() {
-			this.repeatAfter = this.value
+			this.task = this.value
+			this.repeatAfter = this.value.repeatAfter
 		},
 		methods: {
 			updateData() {
-				this.$emit('input', this.repeatAfter)
+				this.task.repeatAfter = this.repeatAfter
+				this.$emit('input', this.task)
 				this.$emit('change')
 			}
 		},
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	p {
 		padding-top: 6px;
 	}
+
+	.field.has-addons {
+
+		margin-bottom: .5rem;
+
+		.control .select select {
+			height: 2.5em;
+		}
+	}
+
+	.columns {
+		align-items: center;
+	}
 </style>

src/models/task.js

@@ -86,6 +86,7 @@ export default class TaskModel extends AbstractModel {
 			startDate: 0,
 			endDate: 0,
 			repeatAfter: 0,
+			repeatFromCurrentDate: false,
 			reminderDates: [],
 			parentTaskId: 0,
 			hexColor: '',