Add a button to the task detail page to mark a task as done

src/components/tasks/TaskDetailView.vue

@@ -192,6 +192,15 @@
 					</div>
 				</div>
 				<div class="column is-one-fifth action-buttons">
+					<a class="button is-outlined noshadow has-no-border" :class="{'is-success': !task.done}" @click="toggleTaskDone()">
+						<span class="icon is-small"><icon icon="check-double"/></span>
+						<template v-if="task.done">
+							Mark as undone
+						</template>
+						<template v-else>
+							Done!
+						</template>
+					</a>
 					<a class="button" @click="setFieldActive('assignees')">
 						<span class="icon is-small"><icon icon="users"/></span>
 						Assign this task to a user
@@ -425,6 +434,10 @@
 						this.error(e, this)
 					})
 			},
+			toggleTaskDone() {
+				this.task.done = !this.task.done
+				this.saveTask()
+			},
 		},
 	}
 </script>

src/main.js

@@ -63,6 +63,7 @@ import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { faHistory } from '@fortawesome/free-solid-svg-icons'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faSignOutAlt)
@@ -100,6 +101,7 @@ library.add(faPaperclip)
 library.add(faClock)
 library.add(faHistory)
 library.add(faSearch)
+library.add(faCheckDouble)
 
 Vue.component('icon', FontAwesomeIcon)