Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: editing townsquare comments #6023

Merged
merged 3 commits into from
Apr 22, 2020
Merged

feat: editing townsquare comments #6023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
feec2a5
feat: enable editing townsquare comments
walidmujahid Apr 8, 2020
96f122e
Merge branch 'master' of https://github.com/gitcoinco/web into activi…
walidmujahid Apr 18, 2020
3b0b1e1
lint fixes
thelostone-mc Apr 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 170 additions & 38 deletions app/assets/v2/js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -536,53 +536,98 @@ $(document).ready(function() {
return;
}

// user input
var comment = $parent.parents('.box').find('.comment_container textarea').val().trim();
if ($('.editableComment')[0]) {
// edited content
const comment = $parent.parents('.box').find('.editableComment').val();

// validation
if (!comment) {
return;
}
$('.editableComment').prop('disabled', true);

$parent.parents('.box').find('.comment_container textarea').prop('disabled', true);
$('.post_comment').prop('disabled', true);
// validation
if (!comment) {
$('.editableComment').prop('disabled', false);
return;
}

$parent.parents('.activity.box').find('.loading').removeClass('hidden');
var has_hidden_comments = $parent.parents('.activity.box').find('.row.comment_row.hidden').length;
// increment number
var num = $parent.find('span.num').html();
$parent.parents('.activity.box').find('.loading').removeClass('hidden');

num = parseInt(num) + 1;
$parent.find('span.num').html(num);
const has_hidden_comments = $parent.parents('.activity.box').find('.row.comment_row.hidden').length;
const num = $parent.find('span.num').html();
const comment_id = $('.editableComment').parent().closest('.comment_row').data('id');
const url = '/api/v0.1/comment/' + comment_id;
const params = {
'method': 'EDIT',
'comment': comment,
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
};

// remote post
var params = {
'method': 'comment',
'comment': comment,
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
};
var url = '/api/v0.1/activity/' + $parent.data('pk');
$.post(url, params, function(response) {
const success_callback = function($parent) {
$.noop(); // do nothing
};
walidmujahid marked this conversation as resolved.
Show resolved Hide resolved

$.post(url, params, function(response) {
var success_callback = function($parent) {
$parent.parents('.box').find('.comment_container textarea').val('');
$parent.find('textarea').focus();
view_comments($parent, allow_close_comment_container, success_callback);
}).always(function() {
$parent.parents('.activity.box').find('.loading').addClass('hidden');
$parent.parents('.box').find('.comment_container textarea').prop('disabled', false);
$('.editableComment').prop('disabled', false);
$(`.comment_row[data-id="${comment_id}"] .comment_options`).prop('disabled', false).removeClass('hidden');
$(`.comment_row[data-id="${comment_id}"]`).parent().closest('.box')
.find('#container-post_comment')
.find('*').prop('disabled', false).removeClass('hidden');
// TODO: automatically cancel editing when another edit_comment button is clicked
$('.edit_comment').prop('disabled', false);
});
} else {
// user input
const comment = $parent.parents('.box').find('.comment_container textarea').val().trim();

$parent.parents('.box').find('.comment_container textarea').prop('disabled', true);
$('.post_comment').prop('disabled', true);

// validation
if (!comment) {
$parent.parents('.box').find('.comment_container textarea').prop('disabled', false);
$('.post_comment').prop('disabled', false);
return;
}


$parent.parents('.activity.box').find('.loading').removeClass('hidden');
const has_hidden_comments = $parent.parents('.activity.box').find('.row.comment_row.hidden').length;

// increment number
let num = $parent.find('span.num').html();

num = parseInt(num) + 1;
$parent.find('span.num').html(num);

// remote post
const params = {
'method': 'comment',
'comment': comment,
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
};
var override_hide_comments = !has_hidden_comments;
const url = '/api/v0.1/activity/' + $parent.data('pk');

view_comments($parent, allow_close_comment_container, success_callback, override_hide_comments);
}).done(function() {
// pass
})
.fail(function() {
$.post(url, params, function(response) {
const success_callback = function($parent) {
$parent.parents('.box').find('.comment_container textarea').val('');
$parent.find('textarea').focus();

};
const override_hide_comments = !has_hidden_comments;

view_comments($parent, allow_close_comment_container, success_callback, override_hide_comments);
}).done(function() {
// pass
}).fail(function() {
$parent.parents('.activity.box').find('.error').removeClass('hidden');
})
.always(function() {
}).always(function() {
$parent.parents('.activity.box').find('.loading').addClass('hidden');
$parent.parents('.box').find('.comment_container textarea').prop('disabled', false);
$('.post_comment').prop('disabled', false);
});
}
};

// converts an object to a dict
Expand Down Expand Up @@ -638,6 +683,7 @@ $(document).ready(function() {
const timeAgo = timedifferenceCvrt(new Date(comment['created_on']));
const show_tip = true;
const is_comment_owner = document.contxt.github_handle == comment['profile_handle'];
const is_edited = typeof comment['is_edited'] !== 'undefined' ? comment['is_edited'] : false;
var sorted_match_curve_html = '';

if (comment['sorted_match_curve']) {
Expand All @@ -647,6 +693,7 @@ $(document).ready(function() {
for (let j = 0; j < match_curve.length; j++) {
let ele = match_curve[j];


sorted_match_curve_html += '<li>';
sorted_match_curve_html += `Your contribution of ${ele.name} could yield $${Math.round(ele.value * 1000) / 1000} in matching.`;
sorted_match_curve_html += '</li>';
Expand Down Expand Up @@ -708,11 +755,14 @@ $(document).ready(function() {
</span>
<span class='float-right'>
<span class="d-none d-sm-inline grey font-smaller-5 text-right">
${timeAgo}
${timeAgo} ${is_edited ? '(edited)' : ''}
</span>
<span class="font-smaller-5 mt-1" style="display: block; text-align: right;">
<span class="comment_options font-smaller-5 mt-1" style="display: block; text-align: right;">
${is_comment_owner ?
`<i data-pk=${comment['id']} class="delete_comment fas fa-trash font-smaller-7 position-relative text-black-70 mr-1 cursor-pointer" style="top:-1px; "></i>| `
: ''}
${is_comment_owner ?
`<i data-pk=${comment['id']} class="edit_comment fas fa-edit font-smaller-7 position-relative text-black-70 mr-1 cursor-pointer" style="top:-1px; "></i>| `
: ''}
${show_tip ? `
<span class="action like px-0 ${comment['is_liked'] ? 'open' : ''}" data-toggle="tooltip" title="Liked by ${comment['likes']}">
Expand All @@ -736,7 +786,7 @@ $(document).ready(function() {
}

const post_comment_html = `
<div class="row py-2 mx-auto">
<div id="container-post_comment" class="row py-2 mx-auto">
<div class="col-sm-1 mt-1 activity-avatar d-none d-sm-inline">
<img src="/dynamic/avatar/${document.contxt.github_handle}">
</div>
Expand Down Expand Up @@ -837,6 +887,59 @@ $(document).ready(function() {
post_comment($target, false);
});


// cancel editing comment
$(document).on('click', '.cancel_edit', function(e) {
e.preventDefault();
const comment_id = $(this).data('id');
const editableContainer = $('#editableContainer');

const url = '/api/v0.1/comment/' + comment_id;
const params = {
'method': 'GET_COMMENT'
};

$.get(url, params, function(response) {
let the_comment = response['comment'];

the_comment = urlify(the_comment);
the_comment = linkify(the_comment);
the_comment = the_comment.replace(/\r\n|\r|\n/g, '<br />');

editableContainer.replaceWith(`<div class="activity_comments_main_comment">${the_comment}</div>`);

}).always(function() {
$(`.comment_row[data-id="${comment_id}"] .comment_options`).prop('disabled', false).removeClass('hidden');
$(`.comment_row[data-id="${comment_id}"]`).parent().closest('.box')
.find('#container-post_comment')
.find('*').prop('disabled', false).removeClass('hidden');
// TODO: automatically cancel editing when another edit_comment button is clicked
$('.edit_comment').prop('disabled', false);
});
});


$(document).on('click', '.edit_comment', function(e) {
e.preventDefault();
let comment_id = $(this).data('pk');
let commentContainer = $(`.comment_row[data-id="${comment_id}"] .activity_comments_main_comment`);
let content = commentContainer.html().replace(/<br>/g, '\n').trim();
let editableContainer = $(`<div id="editableContainer" class="col-12 col-sm-12 text-right"><textarea class="form-control bg-lightblue font-caption editableComment" cols="80" rows="3" data-id="${comment_id}">${content}</textarea><a href=# class="btn btn-gc-blue btn-sm mt-2 font-smaller-7 font-weight-bold cancel_edit" data-id="${comment_id}">CANCEL</a></div>`);
walidmujahid marked this conversation as resolved.
Show resolved Hide resolved

$(`.comment_row[data-id="${comment_id}"] .comment_options`).prop('disabled', true).addClass('hidden');
$(`.comment_row[data-id="${comment_id}"]`).parent().closest('.box')
.find('#container-post_comment')
.find('*').prop('disabled', true).addClass('hidden');

commentContainer.replaceWith(editableContainer);

$(`#editableContainer textarea[data-id="${comment_id}`).focus();

// TODO: automatically cancel editing when another edit_comment button is clicked
$('.edit_comment').prop('disabled', true);
});


$(document).on('click', '.delete_comment', function(e) {
e.preventDefault();
const comment_id = $(this).data('pk');
Expand Down Expand Up @@ -866,12 +969,42 @@ $(document).ready(function() {
});


$(document).on('keypress', '.enter-activity-comment', function(e) {
$(document).on('keyup keydown keypress', '.enter-activity-comment, .editableComment', function(e) {
if (e.which == 13 && !e.shiftKey) {
const $target = $(this).parents('.activity.box').find('.comment_activity');

post_comment($target, false);
}

if (e.key === 'Escape' && typeof $('.editableComment')[0] != 'undefined') {
const comment_id = $(this).data('id');
const editableContainer = $('#editableContainer');

const url = '/api/v0.1/comment/' + comment_id;
const params = {
'method': 'GET_COMMENT'
};

$.get(url, params, function(response) {
let the_comment = response['comment'];
walidmujahid marked this conversation as resolved.
Show resolved Hide resolved

the_comment = urlify(the_comment);
the_comment = linkify(the_comment);
the_comment = the_comment.replace(/\r\n|\r|\n/g, '<br />');

editableContainer.replaceWith(`<div class="activity_comments_main_comment">${the_comment}</div>`);

}).always(function() {
$(`.comment_row[data-id="${comment_id}"] .comment_options`)
.prop('disabled', false)
.removeClass('hidden');
$(`.comment_row[data-id="${comment_id}"]`).parent().closest('.box')
.find('#container-post_comment')
.find('*').prop('disabled', false).removeClass('hidden');
// TODO: automatically cancel editing when another edit_comment button is clicked
$('.edit_comment').prop('disabled', false);
});
}
});

// post comment activity
Expand Down Expand Up @@ -960,4 +1093,3 @@ window.addEventListener('scroll', throttle(function() {
$('.infinite-more-link').click();
}
}, 500));

18 changes: 18 additions & 0 deletions app/townsquare/migrations/0018_comment_is_edited.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Generated by Django 2.2.4 on 2020-04-12 23:56

from django.db import migrations, models


class Migration(migrations.Migration):

dependencies = [
('townsquare', '0017_squelchprofile'),
]

operations = [
migrations.AddField(
model_name='comment',
name='is_edited',
field=models.BooleanField(default=False),
),
]
1 change: 1 addition & 0 deletions app/townsquare/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ class Comment(SuperModel):
likes = ArrayField(models.IntegerField(), default=list, blank=True) #pks of users who like this post
likes_handles = ArrayField(models.CharField(max_length=200, blank=True), default=list, blank=True) #handles of users who like this post
tip_count_eth = models.DecimalField(default=0, decimal_places=5, max_digits=50)
is_edited = models.BooleanField(default=False)

def __str__(self):
return f"Comment of {self.activity.pk} by {self.profile.handle}: {self.comment}"
Expand Down
24 changes: 24 additions & 0 deletions app/townsquare/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,8 @@ def api(request, activity_id):
counter += 1; results[counter] += time.time() - start_time; start_time = time.time()
comment_dict['sorted_match_curve'] = comment.profile.matchranking_this_round.sorted_match_curve if comment.profile.matchranking_this_round else None
counter += 1; results[counter] += time.time() - start_time; start_time = time.time()
if comment.is_edited:
octavioamu marked this conversation as resolved.
Show resolved Hide resolved
comment_dict['is_edited'] = comment.is_edited
response['comments'].append(comment_dict)
for key, val in results.items():
if settings.DEBUG:
Expand Down Expand Up @@ -601,6 +603,28 @@ def comment_v1(request, comment_id):
}
return JsonResponse(response)

if method == 'EDIT':
content = request.POST.get('comment')
title = request.POST.get('comment')

comment.comment = content
comment.is_edited = True
comment.save()
response = {
'status': 203,
'message': 'comment successfully updated'
}
return JsonResponse(response)

# no perms needed responses go here
if request.GET.get('method') == 'GET_COMMENT':
response = {
'status': 202,
'message': 'comment successfully retrieved',
'comment': comment.comment,
}
return JsonResponse(response)

return JsonResponse(response)


Expand Down