backlog/main/templates/_comment_div.html

{# section commentaire. prends en parametre un objet Story ou Epic #}
{# l'objet en parametre doit avoir une propriete 'comments' et une propriete 'uuid' #}

{% load martortags %}
{% load commenting %}

<a class="anchor" id="a-comment-section"></a>
<div id="comment-section">
	<ul class="comment-list">
	{% for comment in obj.comments.all %}
		
		<li class="comment flex-col anchor" id="comment-{{ comment.id }}" data-id="{{ comment.id }}">
			<a class="anchor" id="a-comment-{{ comment.id }}"></a>
			<div class="flex-row">
				<span class="comment-header"><i class="fa fa-comment"></i> {{ comment.author }}, le {{ comment.created }}</span>

				{% if comment.author.id == user.id %}
				    <a class="comment-edit-btn" href="" style="margin-left: 20px;"><i class="fa fa-pencil"></i></a>
					<a class="comment-del-btn" href="{% url 'comment_del' comment_id=comment.id %}" style="margin-left: 10px;"><i class="fa fa-trash"></i></a>
				{% endif %}
			</div>
			<div class="comment-display">
				{{ comment.content|safe_markdown }}
			</div>
			
			<div class="comment-edition" style="display: none;">
				<form action="{% url 'comment_edit' comment_id=comment.id %}" method="post" accept-charset="utf-8" enctype="multipart/form-data">
					{% csrf_token %}
					
					{% comment_edition_form comment as frm %}
					{{ frm.content_type }}
					{{ frm.object_id }}
					{{ frm.content }}
					
			    	<div class="flex-row flex-end flex-align-center" style="margin-top: 10px;">
			    		<a href="" class="comment-edition-cancel" style="margin-right: 20px;">Annuler</a>
			    		<input type="submit">
			    	</div>
			    </form>
			</div>
	    </li>
	{% endfor %}
	</ul>
	
	<form action="{% url 'comment_post' %}" method="post" accept-charset="utf-8" enctype="multipart/form-data" style="margin-top:4em;">
		{% csrf_token %}
		
		{% comment_new_form obj as frm %}
		{{ frm.as_p }}
		
    	<div class="flex-row flex-end" style="margin-top: 10px;">
    		<input type="submit">
    	</div>
    </form>
    
</div>

<script>
	
	$(".comment-edit-btn, .comment-edition-cancel").click(function (event) {
		event.preventDefault();
		var comment_li = $(this).closest('.comment');
		comment_li.find('.comment-edition').toggle();
		comment_li.find('.comment-display').toggle();
	});
	
	$(".comment-del-btn").click(function (event) {
		if (confirm('Êtes vous sûr de vouloir supprimer le commentaire?')) {
			return true;
		}
	});
</script>