Add undo button to notification when marking a task as done

src/components/global/notification.vue

@@ -0,0 +1,39 @@
+<template>
+	<notifications position="bottom left">
+		<template slot="body" slot-scope="props">
+			<div :class="['vue-notification-template', 'vue-notification', props.item.type]">
+				<div
+						v-if="props.item.title"
+						class="notification-title"
+						v-html="props.item.title"
+				>
+				</div>
+				<div
+						class="notification-content"
+						v-html="props.item.text"
+				>
+				</div>
+				<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
+					<button
+							class="button noshadow is-small"
+							@click="action.callback"
+							v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
+						{{ action.title }}
+					</button>
+				</div>
+			</div>
+		</template>
+	</notifications>
+</template>
+
+<script>
+	export default {
+		name: 'notification'
+	}
+</script>
+
+<style scoped>
+	.buttons {
+		margin-top: .5em;
+	}
+</style>

src/components/tasks/ShowListTasks.vue

@@ -259,7 +259,14 @@
 					this.taskService.update(task)
 						.then(() => {
 							this.sortTasks()
-							this.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
+							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)

src/components/tasks/TaskDetailView.vue

@@ -414,7 +414,7 @@
 					this.taskTitle = taskTitle
 				}
 			},
-			saveTask() {
+			saveTask(undoCallback = null) {
 
 				// If no end date is being set, but a start date and due date,
 				// use the due date as the end date
@@ -425,7 +425,14 @@
 				this.taskService.update(this.task)
 					.then(r => {
 						this.$set(this, 'task', r)
-						this.success({message: 'The task was saved successfully.'}, this)
+						let actions = []
+						if (undoCallback !== null) {
+							actions = [{
+								title: 'Undo',
+								callback: undoCallback,
+							}]
+						}
+						this.success({message: 'The task was saved successfully.'}, this, actions)
 						this.setActiveFields()
 					})
 					.catch(e => {
@@ -460,7 +467,7 @@
 			},
 			toggleTaskDone() {
 				this.task.done = !this.task.done
-				this.saveTask()
+				this.saveTask(() => this.toggleTaskDone())
 			},
 			setDescriptionChanged(e) {
 				if (e.key === 'Enter' || e.key === 'Control') {