Allow to delete single comments via UI

This commit is contained in:
Maximilian Grundke
2017-08-25 18:15:55 +02:00
parent 6aaa0f3bca
commit 3dd4cb440b
2 changed files with 52 additions and 45 deletions

View File

@ -22,8 +22,9 @@
display: none !important; display: none !important;
} }
p.comment { .comment {
width: 400px; width: 100%;
min-width: 200px;
} }
.popover-header { .popover-header {
@ -57,11 +58,19 @@ p.comment {
margin-bottom: 10px; margin-bottom: 10px;
} }
.popover-comment-editor {
width: 100%;
height: auto;
background-color: inherit;
border-style: hidden;
}
.popover-divider { .popover-divider {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #008cba; background-color: #008cba;
overflow: hidden; overflow: hidden;
margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -79,6 +88,7 @@ p.comment {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
border: 1px solid #cccccc; border: 1px solid #cccccc;
padding: 15px;
.popover-actions { .popover-actions {
display: flex; display: flex;

View File

@ -180,10 +180,11 @@ also, all settings from the rails model needed for the editor configuration in t
function generateCommentHtmlContent(comments) { function generateCommentHtmlContent(comments) {
var htmlContent = ''; var htmlContent = '';
comments.forEach(function(comment, index) { comments.forEach(function(comment, index) {
var commentText = preprocess(comment.text);
if (index !== 0) { if (index !== 0) {
htmlContent += '<div class="popover-divider"></div>' htmlContent += '<div class="popover-divider"></div>'
} }
htmlContent += '<p class="comment">'; htmlContent += '<div class="comment">';
htmlContent += '<div class="popover-header">' + htmlContent += '<div class="popover-header">' +
'<div class="popover-username">' + preprocess(comment.username) + '</div>' + '<div class="popover-username">' + preprocess(comment.username) + '</div>' +
'<div class="popover-date">' + comment.date + '</div>'; '<div class="popover-date">' + comment.date + '</div>';
@ -194,14 +195,15 @@ also, all settings from the rails model needed for the editor configuration in t
'</div>' '</div>'
} }
htmlContent += '</div>' + htmlContent += '</div>' +
'<div class="popover-comment">' + preprocess(comment.text) + '</div>'; '<div class="popover-comment">' + commentText + '</div>' +
'<textarea class="hidden popover-comment-editor">' + commentText + '</textarea>';
if (comment.editable) { if (comment.editable) {
htmlContent += '<div class="popover-actions">' + htmlContent += '<div class="popover-actions">' +
'<button class="popover-action-button btn btn-xs btn-warning" id="edit-' + comment.id + '"><%= t('shared.edit') %></button>' + '<button class="popover-action-button action-edit btn btn-xs btn-warning" data-comment-id=' + comment.id + '><%= t('shared.edit') %></button>' +
'<button class="popover-action-button btn btn-xs btn-danger" id="delete-' + comment.id + '"><%= t('shared.destroy') %></button>' + '<button class="popover-action-button action-delete btn btn-xs btn-danger" data-comment-id=' + comment.id + '><%= t('shared.destroy') %></button>' +
'</div>'; '</div>';
} }
htmlContent += '</p>'; htmlContent += '</div>';
}); });
return htmlContent; return htmlContent;
} }
@ -247,29 +249,15 @@ also, all settings from the rails model needed for the editor configuration in t
}) })
} }
function hasCommentsInRow(editor, row){ function deleteComment(commentId, editor, file_id, callback) {
return editor.getSession().getAnnotations().some(function(element) {
return element.row === row;
})
}
function getCommentsForRow(editor, row){
return editor.getSession().getAnnotations().filter(function(element) {
return element.row === row;
})
}
function deleteComment(file_id, row, editor) {
cleanupPopovers(); cleanupPopovers();
var jqxhr = $.ajax({ var jqxhr = $.ajax({
type: 'DELETE', type: 'DELETE',
url: "/comments", url: "/comments/" + commentId
data: {
row: row,
file_id: file_id }
}); });
jqxhr.done(function (response) { jqxhr.done(function () {
setAnnotations(editor, file_id); setAnnotations(editor, file_id);
callback();
}); });
jqxhr.fail(ajaxError); jqxhr.fail(ajaxError);
} }
@ -299,6 +287,7 @@ also, all settings from the rails model needed for the editor configuration in t
function handleSidebarClick(e) { function handleSidebarClick(e) {
var target = e.domEvent.target; var target = e.domEvent.target;
var editor = e.editor; var editor = e.editor;
var fileid = $(editor.container).data('file-id');
if (target.className.indexOf("ace_gutter-cell") == -1) return; if (target.className.indexOf("ace_gutter-cell") == -1) return;
@ -307,32 +296,40 @@ also, all settings from the rails model needed for the editor configuration in t
var commentModal = $('#comment-modal'); var commentModal = $('#comment-modal');
if (hasCommentsInRow(editor, row)) { var otherComments = commentModal.find('#otherComments');
var htmlContent = editor.commentVisualsByLine[row]; var htmlContent = editor.commentVisualsByLine[row];
commentModal.find('#otherComments').show(); if (htmlContent) {
commentModal.find('#otherComments > .container').html(htmlContent); otherComments.show();
} else { var container = otherComments.find('.container');
commentModal.find('#otherComments').hide(); container.html(htmlContent);
} var deleteButtons = container.find('.action-delete');
deleteButtons.each(function(index, button) {
commentModal.find('#addCommentButton').off('click'); $(button).on('click', function (event) {
commentModal.find('#removeAllButton').off('click'); var commentId = $(event.target).data('comment-id');
deleteComment(commentId, editor, fileid, function () {
commentModal.find('#addCommentButton').on('click', function(e){ var parent = $(button).parent().parent();
var commenttext = commentModal.find('textarea').val(); parent.siblings().first().remove(); // potential divider
var file_id = $(editor.container).data('file-id'); parent.remove(); // the comment itself
if (container.html() === '') {
if (commenttext !== "") { otherComments.hide();
createComment(file_id, row, editor, commenttext);
commentModal.find('textarea').val('') ;
commentModal.modal('hide');
} }
}); });
});
});
} else {
otherComments.hide();
}
commentModal.find('#removeAllButton').on('click', function(e){ var addCommentButton = commentModal.find('#addCommentButton');
var file_id = $(editor.container).data('file-id'); addCommentButton.off('click');
deleteComment(file_id, row, editor); addCommentButton.on('click', function(){
var commentTextarea = commentModal.find('#myComment > textarea');
var commenttext = commentTextarea.val();
if (commenttext !== "") {
createComment(fileid, row, editor, commenttext);
commentTextarea.val('') ;
commentModal.modal('hide'); commentModal.modal('hide');
}
}); });
commentModal.modal('show'); commentModal.modal('show');