Enable marking tasks as done from the task overview

src/components/tasks/ShowListTasks.vue

@@ -57,42 +57,9 @@
 		<div class="columns">
 			<div class="column">
 				<div class="tasks" v-if="tasks && tasks.length > 0" :class="{'short': isTaskEdit}">
-					<div class="task" v-for="l in tasks" :key="l.id">
+					<div class="task" v-for="t in tasks" :key="t.id">
-						<span>
+						<single-task-in-list :the-task="t" @taskUpdated="updateTasks"/>
-							<div class="fancycheckbox" :class="{'is-disabled': list.is_archived}">
+						<div @click="editTask(t.id)" class="icon settings" v-if="!list.is_archived">
-								<input @change="markAsDone" type="checkbox" :id="l.id" :checked="l.done" style="display: none;" :disabled="list.is_archived">
-								<label :for="l.id" class="check">
-									<svg width="18px" height="18px" viewBox="0 0 18 18">
-										<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
-										<polyline points="1 9 7 14 15 4"></polyline>
-									</svg>
-								</label>
-							</div>
-							<router-link :to="{ name: 'taskDetailView', params: { id: l.id } }" class="tasktext" :class="{ 'done': l.done}">
-								<!-- Show any parent tasks to make it clear this task is a sub task of something -->
-								<span class="parent-tasks" v-if="typeof l.related_tasks.parenttask !== 'undefined'">
-									<template v-for="(pt, i) in l.related_tasks.parenttask">
-										{{ pt.text }}<template v-if="(i + 1) < l.related_tasks.parenttask.length">,&nbsp;</template>
-									</template>
-									>
-								</span>
-								{{l.text}}
-								<span class="tag" v-for="label in l.labels" :style="{'background': label.hex_color, 'color': label.textColor}" :key="label.id">
-									<span>{{ label.title }}</span>
-								</span>
-								<img
-										:src="a.getAvatarUrl(27)"
-										:alt="a.username"
-										class="avatar"
-										width="27"
-										height="27"
-										v-for="(a, i) in l.assignees"
-										:key="l.id + 'assignee' + a.id + i"/>
-								<i v-if="l.dueDate > 0" :class="{'overdue': l.dueDate <= new Date() && !l.done}" v-tooltip="formatDate(l.dueDate)"> - Due {{formatDateSince(l.dueDate)}}</i>
-								<priority-label :priority="l.priority"/>
-							</router-link>
-						</span>
-						<div @click="editTask(l.id)" class="icon settings" v-if="!list.is_archived">
 							<icon icon="pencil-alt"/>
 						</div>
 					</div>
@@ -140,8 +107,8 @@
 	import ListModel from '../../models/list'
 	import EditTask from './edit-task'
 	import TaskModel from '../../models/task'
-	import PriorityLabel from './reusable/priorityLabel'
 	import TaskCollectionService from '../../services/taskCollection'
+	import SingleTaskInList from './reusable/singleTaskInList'
 
 	export default {
 		data() {
@@ -165,7 +132,7 @@
 			}
 		},
 		components: {
-			PriorityLabel,
+			SingleTaskInList,
 			EditTask,
 		},
 		props: {
@@ -267,34 +234,6 @@
 				}
 				this.initTasks(page, search)
 			},
-			markAsDone(e) {
-				let updateFunc = () => {
-					// We get the task, update the 'done' property and then push it to the api.
-					let task = this.getTaskByID(e.target.id)
-					task.done = e.target.checked
-					this.taskService.update(task)
-						.then(() => {
-							this.sortTasks()
-							this.success(
-								{message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'},
-								this,
-								[{
-									title: 'Undo',
-									callback: () => this.markAsDone({target: {id: e.target.id, checked: !e.target.checked}}),
-								}]
-							)
-						})
-						.catch(e => {
-							this.error(e, this)
-						})
-				}
-
-				if (e.target.checked) {
-					setTimeout(updateFunc(), 300); // Delay it to show the animation when marking a task as done
-				} else {
-					updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
-				}
-			},
 			editTask(id) {
 				// Find the selected task and set it to the current object
 				let theTask = this.getTaskByID(id) // Somehow this does not work if we directly assign this to this.taskEditTask
@@ -326,6 +265,15 @@
 					return 0
 				})
 			},
+			updateTasks(updatedTask) {
+				for (const t in this.tasks) {
+					if (this.tasks[t].id === updatedTask.id) {
+						this.$set(this.tasks, t, updatedTask)
+						break
+					}
+				}
+				this.sortTasks()
+			},
 			searchTasks() {
 				if (this.searchTerm === '') {
 					return

src/components/tasks/ShowTasks.vue

@@ -8,36 +8,20 @@
 		</template>
 		<div class="spinner" :class="{ 'is-loading': taskService.loading}"></div>
 		<div class="tasks" v-if="tasks && tasks.length > 0">
-			<div @click="gotoTask(l)" class="task" v-for="l in undoneTasks" :key="l.id">
+			<div class="task" v-for="t in tasks" :key="t.id">
-				<label :for="l.id">
+				<single-task-in-list :the-task="t" @taskUpdated="updateTasks"/>
-					<div class="fancycheckbox">
-						<input type="checkbox" :id="l.id" :checked="l.done" style="display: none;" disabled>
-						<label  :for="l.id" class="check">
-							<svg width="18px" height="18px" viewBox="0 0 18 18">
-								<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
-								<polyline points="1 9 7 14 15 4"></polyline>
-							</svg>
-						</label>
-					</div>
-					<span class="tasktext">
-						{{l.text}}
-						<i v-if="l.dueDate > 0" :class="{'overdue': l.dueDate <= new Date()}" v-tooltip="formatDate(l.dueDate)"> - Due {{formatDateSince(l.dueDate)}}</i>
-						<priority-label :priority="l.priority"/>
-					</span>
-				</label>
 			</div>
 		</div>
 	</div>
 </template>
 <script>
-	import router from '../../router'
 	import TaskService from '../../services/task'
-	import PriorityLabel from './reusable/priorityLabel'
+	import SingleTaskInList from "./reusable/singleTaskInList";
 
 	export default {
 		name: 'ShowTasks',
 		components: {
-			PriorityLabel
+			SingleTaskInList,
 		},
 		data() {
 			return {
@@ -78,13 +62,37 @@
 							}
 						}
 						this.$set(this, 'tasks', r)
+						this.sortTasks()
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
 			},
-			gotoTask(task) {
+			sortTasks() {
-				router.push({name: 'taskDetailView', params: {id: task.id}})
+				if (this.tasks === null || this.tasks === []) {
+					return
+				}
+				return this.tasks.sort(function(a,b) {
+					if (a.done < b.done)
+						return -1
+					if (a.done > b.done)
+						return 1
+
+					if (a.id > b.id)
+						return -1
+					if (a.id < b.id)
+						return 1
+					return 0
+				})
+			},
+			updateTasks(updatedTask) {
+				for (const t in this.tasks) {
+					if (this.tasks[t].id === updatedTask.id) {
+						this.$set(this.tasks, t, updatedTask)
+						break
+					}
+				}
+				this.sortTasks()
 			},
 		},
 	}

src/components/tasks/reusable/singleTaskInList.vue

@@ -0,0 +1,118 @@
+<template>
+	<span>
+		<div class="fancycheckbox" :class="{'is-disabled': isArchived}">
+			<input @change="markAsDone" type="checkbox" :id="task.id" :checked="task.done"
+				style="display: none;" :disabled="isArchived">
+			<label :for="task.id" class="check">
+				<svg width="18px" height="18px" viewBox="0 0 18 18">
+					<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+					<polyline points="1 9 7 14 15 4"></polyline>
+				</svg>
+			</label>
+		</div>
+		<router-link :to="{ name: 'taskDetailView', params: { id: task.id } }" class="tasktext"  :class="{ 'done': task.done}">
+			<!-- Show any parent tasks to make it clear this task is a sub task of something -->
+			<span class="parent-tasks" v-if="typeof task.related_tasks.parenttask !== 'undefined'">
+				<template v-for="(pt, i) in task.related_tasks.parenttask">
+					{{ pt.text }}<template v-if="(i + 1) < task.related_tasks.parenttask.length">,&nbsp;</template>
+				</template>
+				>
+			</span>
+			{{ task.text }}
+			<span class="tag" v-for="label in task.labels" :style="{'background': label.hex_color, 'color': label.textColor}"
+				:key="label.id">
+				<span>{{ label.title }}</span>
+			</span>
+			<img
+					:src="a.getAvatarUrl(27)"
+					:alt="a.username"
+					class="avatar"
+					width="27"
+					height="27"
+					v-for="(a, i) in task.assignees"
+					:key="task.id + 'assignee' + a.id + i"/>
+			<i v-if="task.dueDate > 0"
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				v-tooltip="formatDate(task.dueDate)"> - Due {{formatDateSince(task.dueDate)}}</i>
+			<priority-label :priority="task.priority"/>
+		</router-link>
+	</span>
+</template>
+
+<script>
+	import TaskModel from '../../../models/task'
+	import PriorityLabel from './priorityLabel'
+	import TaskService from '../../../services/task'
+
+	export default {
+		name: 'singleTaskInList',
+		data() {
+			return {
+				taskService: TaskService,
+				task: TaskModel,
+			}
+		},
+		components: {
+			PriorityLabel,
+		},
+		props: {
+			theTask: {
+				type: TaskModel,
+				required: true,
+			},
+			isArchived: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		watch: {
+			theTask(newVal) {
+				this.task = newVal
+			},
+		},
+		mounted() {
+			this.task = this.theTask
+		},
+		created() {
+			this.task = new TaskModel()
+			this.taskService = new TaskService()
+		},
+		methods: {
+			markAsDone(e) {
+				let updateFunc = () => {
+					// We get the task, update the 'done' property and then push it to the api.
+					this.task.done = e.target.checked
+					let task = new TaskModel(this.task)
+					task.done = e.target.checked
+					this.taskService.update(task)
+						.then(t => {
+							this.task = t
+							this.$emit('taskUpdated', t)
+							this.success(
+								{message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'},
+								this,
+								[{
+									title: 'Undo',
+									callback: () => this.markAsDone({
+										target: {
+											id: e.target.id,
+											checked: !e.target.checked
+										}
+									}),
+								}]
+							)
+						})
+						.catch(e => {
+							this.error(e, this)
+						})
+				}
+
+				if (e.target.checked) {
+					setTimeout(updateFunc(), 300); // Delay it to show the animation when marking a task as done
+				} else {
+					updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
+				}
+			},
+		},
+	}
+</script>