Task sorting (#39)

src/components/tasks/ShowListTasks.vue

@@ -125,7 +125,6 @@
 		watch: {
 			theList() {
 				this.list = this.theList
-				this.loadTasks(1)
 			},
 			'$route.query': 'loadTasksForPage', // Only listen for query path changes
 		},
@@ -135,13 +134,15 @@
 			this.taskCollectionService = new TaskCollectionService()
 			this.taskEditTask = null
 			this.isTaskEdit = false
+			this.loadTasks(1)
 		},
 		methods: {
 			addTask() {
 				let task = new TaskModel({text: this.newTaskText, listID: this.$route.params.id})
 				this.taskService.create(task)
 					.then(r => {
-						this.list.addTaskToList(r)
+						this.tasks.push(r)
+						this.sortTasks()
 						this.newTaskText = ''
 						message.success({message: 'The task was successfully created.'}, this)
 					})
@@ -150,7 +151,8 @@
 					})
 			},
 			loadTasks(page) {
-				this.taskCollectionService.getAll({listID: this.$route.params.id}, {}, page)
+				const params = {sort_by: ['done', 'id'], order_by: ['asc', 'desc']}
+				this.taskCollectionService.getAll({listID: this.$route.params.id}, params, page)
 					.then(r => {
 						this.$set(this, 'tasks', r)
 						this.$set(this, 'pages', [])
@@ -194,11 +196,11 @@
 			markAsDone(e) {
 				let updateFunc = () => {
 					// We get the task, update the 'done' property and then push it to the api.
-					let task = this.list.getTaskByID(e.target.id)
+					let task = this.getTaskByID(e.target.id)
 					task.done = e.target.checked
 					this.taskService.update(task)
 						.then(() => {
-							this.list.sortTasks()
+							this.sortTasks()
 							message.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
 						})
 						.catch(e => {
@@ -214,13 +216,38 @@
 			},
 			editTask(id) {
 				// Find the selected task and set it to the current object
-				let theTask = this.list.getTaskByID(id) // Somehow this does not work if we directly assign this to this.taskEditTask
+				let theTask = this.getTaskByID(id) // Somehow this does not work if we directly assign this to this.taskEditTask
 				this.taskEditTask = theTask
 				this.isTaskEdit = true
 			},
 			gravatar(user) {
 				return 'https://www.gravatar.com/avatar/' + user.avatarUrl + '?s=27'
 			},
+			getTaskByID(id) {
+				for (const t in this.tasks) {
+					if (this.tasks[t].id === parseInt(id)) {
+						return this.tasks[t]
+					}
+				}
+				return {} // FIXME: This should probably throw something to make it clear to the user noting was found
+			},
+			sortTasks() {
+				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
+				})
+			},
 		}
 	}
 </script>

src/components/tasks/ShowTasks.vue

@@ -36,7 +36,7 @@
 	import PriorityLabel from './reusable/priorityLabel'
 
 	export default {
-		name: "ShowTasks",
+		name: 'ShowTasks',
 		components: {
 			PriorityLabel
 		},
@@ -58,7 +58,7 @@
 		},
 		methods: {
 			loadPendingTasks() {
-				let params = {'sort': 'duedate'}
+				let params = {sort_by: 'due_date_unix', order_by: 'desc'}
 				if (!this.showAll) {
 					params.startdate = Math.round(+ this.startDate / 1000)
 					params.enddate = Math.round(+ this.endDate / 1000)
@@ -72,7 +72,6 @@
 									this.hasUndoneTasks = true
 								}
 							}
-							r.sort(this.sortyByDeadline)
 						}
 						this.$set(this, 'tasks', r)
 					})
@@ -83,9 +82,6 @@
 			formatUnixDate(dateUnix) {
 				return (new Date(dateUnix * 1000)).toLocaleString()
 			},
-			sortyByDeadline(a, b) {
-				return ((a.dueDate > b.dueDate) ? -1 : ((a.dueDate < b.dueDate) ? 1 : 0));
-			},
 			gotoList(lid) {
 				router.push({name: 'showList', params: {id: lid}})
 			},

src/models/list.js

@@ -13,7 +13,6 @@ export default class ListModel extends AbstractModel {
 		})
 		
 		this.owner = new UserModel(this.owner)
-		this.sortTasks()
 	}
 	
 	// Default attributes that define the "empty" state.
@@ -30,68 +29,4 @@ export default class ListModel extends AbstractModel {
 			updated: 0,
 		}
 	}
-
-	////////
-	// Helpers
-	//////
-	
-	/**
-	 * Sorts all tasks according to their due date
-	 * @returns {this}
-	 */
-	sortTasks() {
-		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
-		})
-	}
-	
-	/**
-	 * Adds a task to the task array of this list. Usually only used when creating a new task
-	 * @param task
-	 */
-	addTaskToList(task) {
-		this.tasks.push(task)
-		this.sortTasks()
-	}
-	
-	/**
-	 * Gets a task by its ID by looping through all tasks.
-	 * @param id
-	 * @returns {TaskModel}
-	 */
-	getTaskByID(id) {
-		// TODO: Binary search?
-		for (const t in this.tasks) {
-			if (this.tasks[t].id === parseInt(id)) {
-				return this.tasks[t]
-			}
-		}
-		return {} // FIXME: This should probably throw something to make it clear to the user noting was found
-	}
-
-	/**
-	 * Loops through all tasks and updates the one with the id it has
-	 * @param task
-	 */
-	updateTaskByID(task) {
-		for (const t in this.tasks) {
-			if (this.tasks[t].id === task.id) {
-				this.tasks[t] = task
-				break
-			}
-		}
-		this.sortTasks()
-	}
 }

src/models/task.js

@@ -81,7 +81,6 @@ export default class TaskModel extends AbstractModel {
 			updated: 0,
 			
 			listID: 0, // Meta, only used when creating a new task
-			sortBy: 'duedate', // Meta, only used when listing all tasks
 		}
 	}