Add undo button to notification when marking a task as done

src/App.vue

@@ -184,7 +184,7 @@
 					</div>
 				</div>
 			</div>
-			<notifications position="bottom left"/>
+			<notification/>
 		</div>
 		<div class="app offline" v-else>
 			<div class="offline-message">
@@ -203,10 +203,11 @@
 	import authTypes from './models/authTypes'
 
 	import swEvents from './ServiceWorker/events'
+	import Notification from "./components/global/notification";
 
 	export default {
 		name: 'app',
-
+		components: {Notification},
 		data() {
 			return {
 				user: auth.user,

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') {

src/main.js

@@ -138,8 +138,8 @@ Vue.mixin({
 	methods: {
 		formatDateSince: date => moment(date).fromNow(),
 		formatDate: date => moment(date).format('LLL'),
-		error: (e, context) => message.error(e, context),
+		error: (e, context, actions = []) => message.error(e, context, actions),
-		success: (s, context) => message.success(s, context),
+		success: (s, context, actions = []) => message.success(s, context, actions),
 	}
 })
 

src/message/index.js

@@ -8,36 +8,40 @@ export default {
 			context.loading = false
 		};
 	},
-    error(e, context) {
+	error(e, context, actions = []) {
-        // Build the notification text from error response
+		// Build the notification text from error response
-        let err = e.message
+		let err = e.message
-        if (e.response && e.response.data && e.response.data.message) {
+		if (e.response && e.response.data && e.response.data.message) {
-            err += '<br/>' + e.response.data.message
+			err += '<br/>' + e.response.data.message
-        }
+		}
 
-        // Fire a notification
+		// Fire a notification
-        context.$notify({
+		context.$notify({
-            type: 'error',
+			type: 'error',
-            title: 'Error',
+			title: 'Error',
-            text: err
+			text: err,
-        })
+			actions: actions,
+		})
 
 		context.loading = false
-    },
+	},
-    success(e, context) {
+	success(e, context, actions = []) {
-        // Build the notification text from error response
+		// Build the notification text from error response
-        let err = e.message
+		let err = e.message
-        if (e.response && e.response.data && e.response.data.message) {
+		if (e.response && e.response.data && e.response.data.message) {
-            err += '<br/>' + e.response.data.message
+			err += '<br/>' + e.response.data.message
-        }
+		}
 
-        // Fire a notification
+		// Fire a notification
-        context.$notify({
+		context.$notify({
-            type: 'success',
+			type: 'success',
-            title: 'Success',
+			title: 'Success',
-            text: err
+			text: err,
-        })
+			data: {
+				actions: actions,
+			},
+		})
 
 		context.loading = false
-    },
+	},
 }