src/components/lists/ShowList.vue

@@ -32,14 +32,14 @@
 						<label v-bind:for="l.id">
 							<div class="fancycheckbox">
 								<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done" style="display: none;">
-								<label  v-bind:for="l.id" class="check">
+								<label v-bind: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">
+							<span class="tasktext" :class="{ 'done': l.done}">
 								{{l.text}}
 							</span>
 						</label>
@@ -258,6 +258,7 @@
                         }
 
                         // This adds a new elemednt "list" to our object which contains all lists
+						response.data.tasks = this.sortTasks(response.data.tasks)
                         this.$set(this, 'list', response.data)
                         if (this.list.tasks === null) {
                             this.list.tasks = []
@@ -302,7 +303,7 @@
 				if (task.ParentTask === this.taskEditTask.id) {
 					this.taskEditTask.subtasks.push(task)
 				}
-
+				this.list.tasks = this.sortTasks(this.list.tasks)
 			},
 			markAsDone(e) {
 				const cancel = message.setLoading(this)
@@ -440,6 +441,7 @@
 						}
 					}
                 }
+				this.list.tasks = this.sortTasks(this.list.tasks)
 			},
 			fixStuffComingFromAPI(task) {
 				// Make date objects from timestamps
@@ -457,6 +459,15 @@
 				}
 				return task
 			},
+			sortTasks(tasks) {
+				return tasks.sort(function(a,b) {
+					if (a.done < b.done)
+						return -1
+					if (a.done > b.done)
+						return 1
+					return 0
+				})
+			},
 			parseDateIfNessecary(dateUnix) {
 				let dateobj = (+new Date(dateUnix * 1000))
 				if (dateobj === 0 || dateUnix === 0) {

src/styles/tasks.scss

@@ -24,6 +24,11 @@
 
       .tasktext {
         vertical-align: top;
+
+        &.done{
+          text-decoration: line-through;
+          color: $grey;
+        }
       }
     }