feat: logic for flag note editing, #8499

public/.eslintrc

@@ -21,6 +21,7 @@
 		"es6": false
 	},
 	"rules": {
+		"block-scoped-var": "off",
 		"no-dupe-class-members": "off",
 		"no-var": "off",
 		"object-shorthand": "off",

public/src/client/flags/detail.js

@@ -11,6 +11,7 @@ define('forum/flags/detail', ['forum/flags/list', 'components', 'translator', 'b
 		$('#content > div').on('click', '[data-action]', function () {
 			var action = this.getAttribute('data-action');
 			var uid = $(this).parents('[data-uid]').attr('data-uid');
+			var noteEl = document.getElementById('note');
 
 			switch (action) {
 				case 'assign':
@@ -33,7 +34,8 @@ define('forum/flags/detail', ['forum/flags/list', 'components', 'translator', 'b
 				case 'appendNote':
 					socket.emit('flags.appendNote', {
 						flagId: ajaxify.data.flagId,
-						note: document.getElementById('note').value,
+						note: noteEl.value,
+						datetime: noteEl.getAttribute('data-datetime'),
 					}, function (err, payload) {
 						if (err) {
 							return app.alertError(err.message);
@@ -41,6 +43,9 @@ define('forum/flags/detail', ['forum/flags/list', 'components', 'translator', 'b
 						app.alertSuccess('[[flags:note-added]]');
 						Detail.reloadNotes(payload.notes);
 						Detail.reloadHistory(payload.history);
+
+						noteEl.setAttribute('data-action', 'appendNote');
+						noteEl.removeAttribute('data-datetime');
 					});
 					break;
 
@@ -95,6 +100,23 @@ define('forum/flags/detail', ['forum/flags/list', 'components', 'translator', 'b
 						}
 					});
 					break;
+
+				case 'prepare-edit':
+					var selectedNoteEl = this.closest('[data-index]');
+					var index = selectedNoteEl.getAttribute('data-index');
+					var textareaEl = document.getElementById('note');
+					textareaEl.value = ajaxify.data.notes[index].content;
+					textareaEl.setAttribute('data-datetime', ajaxify.data.notes[index].datetime);
+
+					var siblings = selectedNoteEl.parentElement.children;
+					for (var el in siblings) {
+						if (siblings.hasOwnProperty(el)) {
+							siblings[el].classList.remove('editing');
+						}
+					}
+					selectedNoteEl.classList.add('editing');
+					textareaEl.focus();
+					break;
 			}
 		});
 
@@ -123,6 +145,7 @@ define('forum/flags/detail', ['forum/flags/list', 'components', 'translator', 'b
 	}
 
 	Detail.reloadNotes = function (notes) {
+		ajaxify.data.notes = notes;
 		Benchpress.parse('flags/detail', 'notes', {
 			notes: notes,
 		}, function (html) {

src/flags.js

@@ -499,7 +499,11 @@ Flags.appendHistory = async function (flagId, uid, changeset) {
 };
 
 Flags.appendNote = async function (flagId, uid, note, datetime) {
+	if (datetime) {
+		await Flags.deleteNote(flagId, datetime);
+	}
 	datetime = datetime || Date.now();
+
 	const payload = JSON.stringify([uid, note]);
 	await db.sortedSetAdd('flag:' + flagId + ':notes', datetime, payload);
 	await Flags.appendHistory(flagId, uid, {

src/socket.io/flags.js

@@ -53,7 +53,7 @@ SocketFlags.appendNote = async function (socket, data) {
 	if (!allowed) {
 		throw new Error('[[no-privileges]]');
 	}
-	await flags.appendNote(data.flagId, socket.uid, data.note);
+	await flags.appendNote(data.flagId, socket.uid, data.note, data.datetime);
 
 	const [notes, history] = await Promise.all([
 		flags.getNotes(data.flagId),