auto refresh current note

lib/Controller/NotesController.php

@@ -128,7 +128,11 @@ public function get(int $id) : JSONResponse {
 				strval($id)
 			);
 
-			return $note->getData();
+			$result = $note->getData();
+			$etag = md5(json_encode($result));
+			return (new JSONResponse($result))
+				->setETag($etag)
+			;
 		});
 	}
 

src/NotesService.js

@@ -96,6 +96,35 @@ export const fetchNote = noteId => {
 		})
 }
 
+export const refreshNote = (noteId, lastETag) => {
+	const headers = {}
+	if (lastETag) {
+		headers['If-None-Match'] = lastETag
+	}
+	const oldContent = store.getters.getNote(noteId).content
+	return axios
+		.get(
+			url('/notes/' + noteId),
+			{ headers }
+		)
+		.then(response => {
+			const currentContent = store.getters.getNote(noteId).content
+			// only update if local content has not changed
+			if (oldContent === currentContent) {
+				store.commit('updateNote', response.data)
+				return response.headers['etag']
+			}
+			return null
+		})
+		.catch(err => {
+			if (err.response.status !== 304) {
+				console.error(err)
+				handleSyncError(t('notes', 'Refreshing note {id} has failed.', { id: noteId }))
+			}
+			return null
+		})
+}
+
 export const setTitle = (noteId, title) => {
 	return axios
 		.put(url('/notes/' + noteId + '/title'), { title: title })

src/components/EditorEasyMDE.vue

@@ -33,7 +33,9 @@ export default {
 	watch: {
 		value(val) {
 			if (val !== this.mde.value()) {
+				const position = this.mde.codemirror.getCursor()
 				this.mde.value(val)
+				this.mde.codemirror.setCursor(position)
 			}
 		},
 	},

src/components/Note.vue

@@ -61,7 +61,7 @@ import {
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
-import { fetchNote, saveNote, saveNoteManually, routeIsNewNote } from '../NotesService'
+import { fetchNote, refreshNote, saveNote, saveNoteManually, routeIsNewNote } from '../NotesService'
 import TheEditor from './EditorEasyMDE'
 import ThePreview from './EditorMarkdownIt'
 import store from '../store'
@@ -97,6 +97,8 @@ export default {
 			preview: false,
 			actionsOpen: false,
 			autosaveTimer: null,
+			refreshTimer: null,
+			etag: null,
 		}
 	},
 
@@ -133,6 +135,7 @@ export default {
 	},
 
 	destroyed() {
+		this.stopRefreshTimer()
 		document.removeEventListener('webkitfullscreenchange', this.onDetectFullscreen)
 		document.removeEventListener('mozfullscreenchange', this.onDetectFullscreen)
 		document.removeEventListener('fullscreenchange', this.onDetectFullscreen)
@@ -144,6 +147,8 @@ export default {
 	methods: {
 		fetchData() {
 			store.commit('setSidebarOpen', false)
+			this.etag = null
+			this.stopRefreshTimer()
 
 			if (this.isMobile) {
 				emit('toggle-navigation', { open: false })
@@ -152,11 +157,12 @@ export default {
 			this.onUpdateTitle(this.title)
 			this.loading = true
 			this.preview = false
-			fetchNote(this.noteId)
+			fetchNote(parseInt(this.noteId))
 				.then((note) => {
 					if (note.errorMessage) {
 						showError(note.errorMessage)
 					}
+					this.startRefreshTimer()
 				})
 				.catch(() => {
 					// note not found
@@ -220,21 +226,50 @@ export default {
 			this.actionsOpen = false
 		},
 
+		stopRefreshTimer() {
+			if (this.refreshTimer !== null) {
+				clearTimeout(this.refreshTimer)
+				this.refreshTimer = null
+			}
+		},
+
+		startRefreshTimer() {
+			this.stopRefreshTimer()
+			this.refreshTimer = setTimeout(() => {
+				this.refreshTimer = null
+				this.refreshNote()
+			}, 10000)
+		},
+
+		refreshNote() {
+			refreshNote(parseInt(this.noteId), this.etag).then(etag => {
+				if (etag) {
+					this.etag = etag
+					this.$forceUpdate()
+				}
+				this.startRefreshTimer()
+			})
+		},
+
 		onEdit(newContent) {
 			if (this.note.content !== newContent) {
+				this.stopRefreshTimer()
 				const note = {
 					...this.note,
 					content: newContent,
 					unsaved: true,
 					autotitle: routeIsNewNote(this.$route),
 				}
 				store.commit('updateNote', note)
+				this.$forceUpdate()
 				if (this.autosaveTimer === null) {
 					this.autosaveTimer = setTimeout(() => {
 						this.autosaveTimer = null
 						saveNote(note.id)
 					}, 2000)
 				}
+				// TODO should be after save is finished
+				this.startRefreshTimer()
 			}
 		},
 

src/store/notes.js

@@ -76,13 +76,13 @@ const mutations = {
 	updateNote(state, updated) {
 		const note = state.notesIds[updated.id]
 		if (note) {
+			note.title = updated.title
+			note.modified = updated.modified
+			note.favorite = updated.favorite
+			note.category = updated.category
 			// don't update meta-data over full data
 			if (updated.content !== undefined || note.content === undefined) {
-				note.title = updated.title
-				note.modified = updated.modified
 				note.content = updated.content
-				note.favorite = updated.favorite
-				note.category = updated.category
 				Vue.set(note, 'autotitle', updated.autotitle)
 				Vue.set(note, 'unsaved', updated.unsaved)
 				Vue.set(note, 'error', updated.error)