diff --git a/opentech/static_src/src/javascript/apply/edit-comment.js b/opentech/static_src/src/javascript/apply/edit-comment.js index d38492f25a78607cba738ea2bdf3bf3f0d8733e9..39f5043ae4cde96b9b7873efbd245894245c3943 100644 --- a/opentech/static_src/src/javascript/apply/edit-comment.js +++ b/opentech/static_src/src/javascript/apply/edit-comment.js @@ -9,6 +9,7 @@ const lastEdited = '.js-last-edited'; const editButton = '.js-edit-comment'; const feedContent = '.js-feed-content'; + const commentError = '.js-comment-error'; const cancelEditButton = '.js-cancel-edit'; const submitEditButton = '.js-submit-edit'; @@ -50,6 +51,9 @@ showComment(this); showEditButton(this); hidePageDownEditor(this); + if ((commentError).length) { + hideError(); + } }); // handle submit @@ -58,7 +62,6 @@ const id = $(commentContainer).attr('data-id'); const editedComment = $(this).closest(pageDown).find('.wmd-preview').html(); const commentMD = $(this).closest(editBlock).find('textarea').val(); - $(commentContainer).attr('data-comment', commentMD); // TODO - get correct URL const url = `${window.location.origin}/apply/api/comments/${id}/edit/`; @@ -72,8 +75,15 @@ body: JSON.stringify({ message: editedComment }) - }).then(response => response.json()).then(data => { - updateComment(commentContainer, data.id, data.message); + }).then(response => { + if (response.status === 404) { + $(this).closest(editBlock).append('<p class="wrapper--error js-comment-error"><b>Update unsuccessful</b>. This comment has been edited elsewhere - please refresh to get the latest updates.</p>'); + $(this).attr('disabled', true); + return; + } + return response.json(); + }).then(data => { + updateComment(commentContainer, data.id, data.message, commentMD); updateLastEdited(this, data.edited); showComment(this); showEditButton(this); @@ -106,9 +116,10 @@ $(el).closest(feedContent).find(lastEdited).html(`${parsedDate} ${time}`); }; - const updateComment = (el, id, newComment) => { + const updateComment = (el, id, newComment, newCommentMD) => { $(el).attr('data-id', id); $(el).html(newComment); + $(el).attr('data-comment', newCommentMD); }; const closeAllEditors = () => { @@ -117,4 +128,6 @@ $(editButton).parent().show(); }; + const hideError = () => $(commentError).remove(); + })(jQuery); diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss index b80aa2b154d104af6634779ee87cbfa784cadd25..e7165e01b4cd95706618d388763e6ce4601e6f5f 100644 --- a/opentech/static_src/src/sass/apply/components/_wrapper.scss +++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss @@ -89,6 +89,10 @@ margin: 0 auto 2rem; background: $color--light-pink; border: 1px solid $color--tomato; + + .feed & { + margin: 0 0 1rem; + } } &--bottom-space {