add undo for deleted notes

src/App.vue

@@ -71,12 +71,15 @@ export default {
 			const search = this.filter.search.toLowerCase()
 
 			const notes = this.notes.filter(note => {
-				const searchFields = [ 'title', 'category' ]
+				if (note.deleting === 'deleting') {
+					return false
+				}
 				if (this.filter.category !== null
 					&& this.filter.category !== note.category
 					&& !note.category.startsWith(this.filter.category + '/')) {
 					return false
 				}
+				const searchFields = [ 'title', 'category' ]
 				if (search !== '') {
 					return searchFields.some(
 						searchField => note[searchField].toLowerCase().indexOf(search) !== -1
@@ -144,7 +147,7 @@ export default {
 		},
 
 		routeFirst() {
-			const availableNotes = this.filteredNotes.filter(note => !note.error)
+			const availableNotes = this.filteredNotes.filter(note => !note.error && !note.deleting)
 			if (availableNotes.length > 0) {
 				this.routeToNote(availableNotes[0].id)
 			} else {

src/NotesService.js

@@ -107,8 +107,16 @@ export default {
 			})
 	},
 
+	prepareDeleteNote(noteId) {
+		store.commit('setNoteAttribute', { noteId: noteId, attribute: 'deleting', value: 'prepare' })
+	},
+
+	undoDeleteNote(noteId) {
+		store.commit('setNoteAttribute', { noteId: noteId, attribute: 'deleting', value: null })
+	},
+
 	deleteNote(noteId) {
-		store.commit('setNoteAttribute', { noteId: noteId, attribute: 'deleting', value: true })
+		store.commit('setNoteAttribute', { noteId: noteId, attribute: 'deleting', value: 'deleting' })
 		return axios
 			.delete(this.url('/notes/' + noteId))
 			.then(() => {
@@ -117,6 +125,7 @@ export default {
 			.catch(err => {
 				console.error(err)
 				this.handleSyncError(this.t('notes', 'Deleting note {id} has failed.', { id: noteId }))
+				this.undoDeleteNote(noteId)
 				throw err
 			})
 	},

src/components/NavigationNoteItem.vue

@@ -5,8 +5,10 @@
 		:menu-open.sync="actionsOpen"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
 		:class="{ actionsOpen }"
+		:undo="isPrepareDeleting"
+		@undo="onUndoDeleteNote"
 	>
-		<template slot="actions">
+		<template v-if="!note.deleting" slot="actions">
 			<ActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
 				{{ actionFavoriteText }}
 			</ActionButton>
@@ -49,6 +51,7 @@ export default {
 				delete: false,
 			},
 			actionsOpen: false,
+			undoTimer: null,
 		}
 	},
 
@@ -63,8 +66,16 @@ export default {
 			return icon
 		},
 
+		isPrepareDeleting() {
+			return this.note.deleting === 'prepare'
+		},
+
 		title() {
-			return this.note.title + (this.note.unsaved ? ' *' : '')
+			if (this.isPrepareDeleting) {
+				return this.t('notes', 'Deleted {title}', { title: this.note.title })
+			} else {
+				return this.note.title + (this.note.unsaved ? ' *' : '')
+			}
 		},
 
 		actionFavoriteText() {
@@ -106,18 +117,27 @@ export default {
 		},
 
 		onDeleteNote() {
+			this.actionsOpen = false
+			NotesService.prepareDeleteNote(this.note.id)
+			this.undoTimer = setTimeout(this.onDeleteNoteFinally, 7000)
+			this.$emit('note-deleted')
+		},
+
+		onUndoDeleteNote() {
+			clearTimeout(this.undoTimer)
+			NotesService.undoDeleteNote(this.note.id)
+		},
+
+		onDeleteNoteFinally() {
 			this.loading.delete = true
 			NotesService.deleteNote(this.note.id)
 				.then(() => {
-					this.$emit('note-deleted')
 				})
 				.catch(() => {
 				})
 				.finally(() => {
 					this.loading.delete = false
-					this.actionsOpen = false
 				})
-			// TODO implement undo
 		},
 	},
 }