Fixing new answer position [Issue: #215]

Zambom
1 parent 973b673b
Showing 5 changed files with 88 additions and 10 deletions Show diff stats
forum/static/js/forum.js
forum/templates/post/post_render.html
forum/templates/post_answers/post_answer_load_more_render.html
forum/templates/post_answers/post_answer_render.html
forum/views.py
 var new_posts = []; //Store the new posts ids
-
+var new_answers = {};
 /*
 *
 * Defining action of the form to make a post in forum
@@ -294,10 +294,21 @@ function answer(id, url) {
                     type: frm.attr('method'),
                     url: frm.attr('action'),
                     data: frm.serialize(),
+                    dataType: 'json',
                     success: function (data) {
-                        $("#post_"+id).find(".answer_list").append(data);
-
                         $("#post_"+id).find(".answer_post").hide();
+
+                        if ($("#post_"+id).find(".load_more_answers").length == 0) {
+                            $("#post_"+id).find(".answer_list").append(data.html);
+                        } else {
+                            $("#post_"+id).find(".load_more_answers").before(data.html);
+                        }
+
+                        if (typeof(new_answers[id]) == 'undefined') {
+                            new_answers[id] = [];
+                        }
+
+                        new_answers[id].push(data.new_id);
                     },
                     error: function(data) {
                         console.log(frm.serialize());
@@ -397,6 +408,14 @@ function load_more_answers(post_id, pageNum, numberPages, url) {
     pageNum += 1;
+    var showing;
+
+    if (typeof(new_answers[post_id]) == 'undefined') {
+        showing = "";
+    } else {
+        showing = new_answers[post_id].join(',');
+    }
+
     // Show loader
     $("#post_"+post_id).find(".loading_answers").show();
@@ -404,11 +423,22 @@ function load_more_answers(post_id, pageNum, numberPages, url) {
     setTimeout(function (){
         $.ajax({
             url: url, 
-            data: {'page_answer': pageNum},
+            data: {'page_answer': pageNum, 'showing_ans': showing},
+            dataType: 'json',
             success: function(data) {
                 $("#post_"+post_id).find(".loading_answers").hide();
-                $("#post_"+post_id).find(".answer_list").append(data);
+                var child = $("#post_"+post_id).find(".answer_list").find(".new_answer:first");
+
+                if (child.length == 0) {
+                    $("#post_"+post_id).find(".answer_list").append(data.html);
+                } else {
+                    child.before(data.html);
+                }
+
+                if (data.page != data.num_pages) {
+                    $("#post_"+post_id).find(".answer_list").append('<a href="javascript:load_more_answers(' + post_id + ',' + data.page + ',' + data.num_pages + ',\'' + url + '\');" class="btn btn-raised btn-primary btn-block load_more_answers">' + data.btn_text + '</a>');
+                }
             }
         });
     }, 1000)
 {% load i18n permission_tags list_post_answer %}
-<div  class="row">
+<div class="row new_post">
     <div id="post_{{ post.id }}" class="col-sm-12 col-xs-12">
         <h3 class="user-name">
             {{ post.user }}
@@ -0,0 +1,38 @@
+{% load i18n permission_tags %}
+
+{% if answers|length > 0 %}
+    {% for answer in answers %}
+        <div class="loaded">
+            <div id="answer_{{ answer.id }}" class="row" style="background-color: #e0e0e0">
+                <div class="col-sm-12 col-xs-12">
+                    <h3 class="user-name">
+                        {{ answer.user }}
+                        {% if request.user|has_role:'system_admin' or request.user == answer.user %}
+                            <div class="pull-right">
+                                <div class="btn-group icon-more-horiz">
+                                    <a class="btn btn-default btn-xs dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <i class="material-icons">more_horiz</i>
+                                    </a>
+                                    <ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">
+                                        <li><a href="javascript:edit_post_answer('{% url 'course:forum:update_post_answer' answer.id %}', '{{ answer.id }}', '{% trans 'Answer edited sucessfully!' %}')"><i class="material-icons">create</i> {% trans 'Edit' %}</a></li>
+                                        <li><a href="javascript:delete_answer('{% url 'course:forum:delete_answer' answer.id %}', '{{ answer.id }}', '{% trans "Are you sure you want to delete this answer?" %}')"><i class="material-icons">delete_sweep</i> {% trans 'Remove' %}</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        {% endif %}
+                    </h3>
+                    <div class="post_answer_content">
+                        <div class="card-data">
+                            <p class="comment-date"><i class="fa fa-clock-o"></i> {{ answer.answer_date|timesince }} {% trans 'ago' %}
+                                {% if answer.is_modified %}
+                                    <em> - {% trans 'Edited' %}</em>
+                                {% endif %}
+                            </p>
+                        </div>
+                        <p class="comment-text">{{ answer.message|linebreaks }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+{% endif %}
 \ No newline at end of file
 {% load i18n permission_tags %}
-<div>
+<div class="new_answer">
     <div id="answer_{{ answer.id }}" class="row" style="background-color: #e0e0e0">
         <div class="col-sm-12 col-xs-12">
             <h3 class="user-name">
@@ -231,7 +231,13 @@ def load_answers(request, post_id):
     post = get_object_or_404(Post, id = post_id)
-    answers = PostAnswer.objects.filter(post = post)
+    showing = request.GET.get('showing_ans', '')
+
+    if showing == '':
+        answers = PostAnswer.objects.filter(post = post)
+    else:
+        showing = showing.split(',')
+        answers = PostAnswer.objects.filter(post = post).exclude(id__in = showing)
     paginator = Paginator(answers, 2)
@@ -251,7 +257,9 @@ def load_answers(request, post_id):
     context['answers'] = page_obj.object_list
     context['post'] = post
-    return render(request, 'post_answers/post_answer_list.html', context)
+    html = render_to_string('post_answers/post_answer_load_more_render.html', context, request)
+
+    return JsonResponse({'num_pages': paginator.num_pages, 'page': page_obj.number, 'btn_text': _('Load more answers'), 'html': html})
 class PostAnswerIndex(LoginRequiredMixin, generic.ListView):
 	login_url = reverse_lazy("core:home")	
@@ -294,7 +302,9 @@ def render_post_answer(request, answer):
 	context = {}
 	context['answer'] = last_answer
-	return render(request, "post_answers/post_answer_render.html", context)
+	html = render_to_string("post_answers/post_answer_render.html", context, request)
+
+	return JsonResponse({'new_id': last_answer.id, 'html': html})
 class PostAnswerUpdateView(LoginRequiredMixin, generic.UpdateView):
 	login_url = reverse_lazy("core:home")
1	var new_posts = []; //Store the new posts ids	1	var new_posts = []; //Store the new posts ids
2	-	2	+var new_answers = {};
3	/*	3	/*
4	*	4	*
5	* Defining action of the form to make a post in forum	5	* Defining action of the form to make a post in forum
	@@ -294,10 +294,21 @@ function answer(id, url) {		@@ -294,10 +294,21 @@ function answer(id, url) {
294	type: frm.attr('method'),	294	type: frm.attr('method'),
295	url: frm.attr('action'),	295	url: frm.attr('action'),
296	data: frm.serialize(),	296	data: frm.serialize(),
		297	+ dataType: 'json',
297	success: function (data) {	298	success: function (data) {
298	- $("#post_"+id).find(".answer_list").append(data);
299	-
300	$("#post_"+id).find(".answer_post").hide();	299	$("#post_"+id).find(".answer_post").hide();
		300	+
		301	+ if ($("#post_"+id).find(".load_more_answers").length == 0) {
		302	+ $("#post_"+id).find(".answer_list").append(data.html);
		303	+ } else {
		304	+ $("#post_"+id).find(".load_more_answers").before(data.html);
		305	+ }
		306	+
		307	+ if (typeof(new_answers[id]) == 'undefined') {
		308	+ new_answers[id] = [];
		309	+ }
		310	+
		311	+ new_answers[id].push(data.new_id);
301	},	312	},
302	error: function(data) {	313	error: function(data) {
303	console.log(frm.serialize());	314	console.log(frm.serialize());
	@@ -397,6 +408,14 @@ function load_more_answers(post_id, pageNum, numberPages, url) {		@@ -397,6 +408,14 @@ function load_more_answers(post_id, pageNum, numberPages, url) {
397		408
398	pageNum += 1;	409	pageNum += 1;
399		410
		411	+ var showing;
		412	+
		413	+ if (typeof(new_answers[post_id]) == 'undefined') {
		414	+ showing = "";
		415	+ } else {
		416	+ showing = new_answers[post_id].join(',');
		417	+ }
		418	+
400	// Show loader	419	// Show loader
401	$("#post_"+post_id).find(".loading_answers").show();	420	$("#post_"+post_id).find(".loading_answers").show();
402		421
	@@ -404,11 +423,22 @@ function load_more_answers(post_id, pageNum, numberPages, url) {		@@ -404,11 +423,22 @@ function load_more_answers(post_id, pageNum, numberPages, url) {
404	setTimeout(function (){	423	setTimeout(function (){
405	$.ajax({	424	$.ajax({
406	url: url,	425	url: url,
407	- data: {'page_answer': pageNum},	426	+ data: {'page_answer': pageNum, 'showing_ans': showing},
		427	+ dataType: 'json',
408	success: function(data) {	428	success: function(data) {
409	$("#post_"+post_id).find(".loading_answers").hide();	429	$("#post_"+post_id).find(".loading_answers").hide();
410		430
411	- $("#post_"+post_id).find(".answer_list").append(data);	431	+ var child = $("#post_"+post_id).find(".answer_list").find(".new_answer:first");
		432	+
		433	+ if (child.length == 0) {
		434	+ $("#post_"+post_id).find(".answer_list").append(data.html);
		435	+ } else {
		436	+ child.before(data.html);
		437	+ }
		438	+
		439	+ if (data.page != data.num_pages) {
		440	+ $("#post_"+post_id).find(".answer_list").append('<a href="javascript:load_more_answers(' + post_id + ',' + data.page + ',' + data.num_pages + ',\'' + url + '\');" class="btn btn-raised btn-primary btn-block load_more_answers">' + data.btn_text + '</a>');
		441	+ }
412	}	442	}
413	});	443	});
414	}, 1000)	444	}, 1000)
1	{% load i18n permission_tags list_post_answer %}	1	{% load i18n permission_tags list_post_answer %}
2		2
3	-<div class="row">	3	+<div class="row new_post">
4	<div id="post_{{ post.id }}" class="col-sm-12 col-xs-12">	4	<div id="post_{{ post.id }}" class="col-sm-12 col-xs-12">
5	<h3 class="user-name">	5	<h3 class="user-name">
6	{{ post.user }}	6	{{ post.user }}
	@@ -0,0 +1,38 @@		@@ -0,0 +1,38 @@
		1	+{% load i18n permission_tags %}
		2	+
		3	+{% if answers\|length > 0 %}
		4	+ {% for answer in answers %}
		5	+ <div class="loaded">
		6	+ <div id="answer_{{ answer.id }}" class="row" style="background-color: #e0e0e0">
		7	+ <div class="col-sm-12 col-xs-12">
		8	+ <h3 class="user-name">
		9	+ {{ answer.user }}
		10	+ {% if request.user\|has_role:'system_admin' or request.user == answer.user %}
		11	+ <div class="pull-right">
		12	+ <div class="btn-group icon-more-horiz">
		13	+ <a class="btn btn-default btn-xs dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		14	+ <i class="material-icons">more_horiz</i>
		15	+ </a>
		16	+ <ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">
		17	+ <li><a href="javascript:edit_post_answer('{% url 'course:forum:update_post_answer' answer.id %}', '{{ answer.id }}', '{% trans 'Answer edited sucessfully!' %}')"><i class="material-icons">create</i> {% trans 'Edit' %}</a></li>
		18	+ <li><a href="javascript:delete_answer('{% url 'course:forum:delete_answer' answer.id %}', '{{ answer.id }}', '{% trans "Are you sure you want to delete this answer?" %}')"><i class="material-icons">delete_sweep</i> {% trans 'Remove' %}</a></li>
		19	+ </ul>
		20	+ </div>
		21	+ </div>
		22	+ {% endif %}
		23	+ </h3>
		24	+ <div class="post_answer_content">
		25	+ <div class="card-data">
		26	+ <p class="comment-date"><i class="fa fa-clock-o"></i> {{ answer.answer_date\|timesince }} {% trans 'ago' %}
		27	+ {% if answer.is_modified %}
		28	+ <em> - {% trans 'Edited' %}</em>
		29	+ {% endif %}
		30	+ </p>
		31	+ </div>
		32	+ <p class="comment-text">{{ answer.message\|linebreaks }}</p>
		33	+ </div>
		34	+ </div>
		35	+ </div>
		36	+ </div>
		37	+ {% endfor %}
		38	+{% endif %}
0	\ No newline at end of file	39	\ No newline at end of file
1	{% load i18n permission_tags %}	1	{% load i18n permission_tags %}
2		2
3	-<div>	3	+<div class="new_answer">
4	<div id="answer_{{ answer.id }}" class="row" style="background-color: #e0e0e0">	4	<div id="answer_{{ answer.id }}" class="row" style="background-color: #e0e0e0">
5	<div class="col-sm-12 col-xs-12">	5	<div class="col-sm-12 col-xs-12">
6	<h3 class="user-name">	6	<h3 class="user-name">